2022-08-29 | 面试合集 | UNLOCK | 更新时间:2022-8-29 17:35

前端面试题的收集和总结(进阶篇)

进阶概念

有了解什么是微前端吗,讲讲

随着公司的发展,项目在不断增加,当需要对多个项目进行集成,集成成一个平台的时候,可以用到微前端,或者说一个大型项目,由多团队合作开发的时候,也可以用到微前端。微前端就是将一个项目拆分成多个更小更易管理的小应用,它们之间相互独立,又相互通信,它们可以独立发布功能,独立部署项目,同时又构建成一个项目。这就是微前端。有很多方法可以实现微前端,像iframe的嵌套,腾讯的wujie,阿里的qiankun等等。

qiankun 的主应用和微应用之间的通讯

官方提供的action通讯,qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例的数据值用于通信; setGlobalState:设置 globalState - 设置新的值时,内部将执行 浅检查,如果检查到 globalState 发生改变则触发通知,通知到所有的 观察者 函数; onGlobalStateChange:注册 观察者 函数 - 响应 globalState 变化,在 globalState 发生改变时触发该 观察者 函数。 offGlobalStateChange:取消 观察者 函数 - 该实例不再响应 globalState 变化

qiankun 的生命周期有哪些?

bootstrap、mount、unmount 这三个生命周期,代表着初始渲染只执行一次;每次进入都会调用;每次切换都会调用;

qiankun 怎么实现样式隔离

在默认情况下,qiankun会沙盒模式会确保单实例场景子应用之间的样式隔离,但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。可以在starts()方法中设置开启沙箱的严格的样式隔离,这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点,从而确保微应用的样式不会对全局造成影响。也是设置样式前缀来保证样式名称直接的冲突覆盖问题;

浅拷贝和深拷贝的区别,怎么实现深拷贝

深拷贝和浅拷贝的区别只针对于像object和array之类的引用数据类型。像string和number之类的简单数据类型则不存在这种区别,对于浅拷贝来说就是简单的将对象复制一份出来,可以通过Object.assign()进行复制动作。而浅拷贝复制出来的对象。如果只有第一层属性,则没有问题,如果是多层对象,则从二层开始的对象起所引用的内存地址都是一个。这就会导致原对象修改里层对象会影响复制出新对象;然后深拷贝出来的对象则不管对象嵌套几层,都会复制出来,所复制的对象都有新的内存地址。而实现深拷贝,则可以使用JSON转换,简单通过JSON.parse(JSON.stringify(object)),这个方法的只能拷贝一些简单的。它不能拷贝对象里的函数。当层级很深的时候。可能会出现溢出现象。
然后可以通过递归循环去遍历各个属性然后判断属性类型,进行复制。可以引用第三插件进行设置。

有了解数据埋点,有具体使用吗?

所谓数据埋点,是数据采集领域的术语,指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程,用于业务分析,数字营销,产品运营等。主流埋点方案:第一种:自己公司研发在产品中注入代码统计,并搭建起相应的后台查询。比如:在点击按钮或者其他用户行为达到时候,请求1px图片或透明gif;通过后台进行数据统计。第二种:通过第三方统计工具,如友盟、神策、Talkingdata、GrowingIO等。

为什么数据埋点请求要使用1px透明像素?

  • 能够完成整个 HTTP 请求+响应(尽管不需要响应内容)。触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据
  • 跨域友好
  • 执行过程无阻塞
  • 相比 XMLHttpRequest 对象发送 GET 请求,性能上更好
  • GIF的最低合法体积最小(最小的BMP文件需要74个字节,PNG需要67个字节,而合法的GIF,只需要43个字节)
  • 执行过程无阻塞,不影响用户的体验,只要new Image对象就好了;(排除JS/CSS文件资源方式上报)

当一个函数的参数不确定的时候?怎么进行参数的读取

可以通过 arguments 进行参数的访问,

function add(){ console.log(arguments) };add(1,2,21)

什么是函数柯里化?

函数柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数, js中bind() 就是函数柯里化的的实现; 让人们将关注的重点聚焦到函数本身,而不因冗余的数据参数分散注意力

function add(a){
    return function(b){
       return a+b
    }
}
add(1)(2)(3)

有了解什么是SSR吗?能讲一下嘛

SSR 也就是服务端渲染,简单的讲就是将在客户端把标签渲染成HTML的工作放在服务端完成,然后再把html直接返回给客户端。SSR的优点在于可以加载的快速,白屏时间比CSR要短,SEO要比现在的单页面应用要好。 缺点在于开发和维护成本,开发条件会被限制。同时需要考虑服务器的部署和负载均衡。

什么是SPA?

单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换 HTML(采用的是 div 切换显示和隐藏),从而实现UI与用户的交互。在 SPA 应用中,应用加载之后就不会再有整页刷新。比如React 和 Vue。