03面经-重点复习

102 阅读4分钟

😟React虚拟dom一定比真实dom快嘛?

虚拟DOM不一定比普通DOM快,但是虚拟DOM一定能够提高性能。真实页面对应一颗DOM树,传统直接操作DOM往往是浪费性能的。虚拟DOM的好处在于React的diff算法可以批处理DOM,React在更新页面之前就提前计算好了要更新和渲染的DOM。同时React也提供了直观的shouldComponentUpdate生命周期函数回调,来减少数据变化后不必要的Virtual DOM对比过程,以保证性能。

301和302区别

  • 301(永久移动)请求的网页已经移动到新的位置。服务器会返回此响应,会自动将请求者转到新的位置。
  • 302(临时移动)服务器目前正从不同位置的网页响应请求,但请求者应继续使用原来的位置来进行以后的请求。此状态码与响应GET和HEAD请求的301代码类似,会自动将请求者转到不同位置。 HTTP状态码301和302的区别: 301和302的关键区别在于资源是否存在有效性。301资源还在只是换了一个位置,返回的是新位置的内容;302资源暂时性失效。返回的是一个临时的代替页上。

React的diff算法解释下

传统的diff算法是通过循环递归对节点进行依次对比,效率低下,时间复杂度为O(n^3),其中n是树中的节点,而React将复杂度转换成O(n),React的diff算法主要有三个策略:

  • Web UI中的DOM节点跨层级的移动操作很少
    React通过updateDepth对Virtual DOM树进行层级控制,只会对相同层级的DOM进行比较(同一父节点下的子节点)。当发现该节点不在时,则该节点及其子节点会被完全删除掉,不会用于进一步比较,这样只需要对树进行一次遍历,便能完成整个DOM树的比较。
  • 拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构
    如果是同一类型的组件,按照原则继续比较Virtual DOM树即可;如果不是,则将该组件判断为Dirty component,从而替换整个组件下的所有子节点。对于同一类型的组件,有可能其虚拟DOM没有任何变化,如果确切直到这一点,用户可以通过shouldComponentUpdate()来判断该组件是否需要进行diff算法分析,大大地节省了时间
  • 对于同一层级的一组子节点,它们可以通过唯一ID进行区分
    当节点处于同一层级上时,diff提供了三种操作INSERT_MAKRKUP(插入节点)MOVE_EXSITING(移动节点)和REMOVE_NODE(删除节点)

跨域的解决方案

跨域问题

  • 跨域是指从一个域名的网页去请求另一个域名的资源,但由于同源策略(域名、端口、协议均一致)的关系,一般不允许访问。
  • 浏览器没有禁用安全限制
  • 采用了XMLHttpRequest请求
    解决策略
  • CORS
  • Nginx反向代理
  • JSONP

image.png - 利用script标签没有跨域限制 - 限制:仅支持get请求;安全性

讲讲CORS

[CORS跨域资源共享](跨源资源共享(CORS) - HTTP | MDN (mozilla.org))是一种基于HTTP头的机制,该机制通过允许服务器标示除了自己以外的其他origin(域,协议,端口),使得浏览器允许这些origin访问加载自己的资源。使用 Origin 和 Access-Control-Allow-Origin 就能完成最简单的访问控制。

关键渲染路径优化

前端如何加快首屏渲染

  • 懒加载
    在页面长时间加载过程中,先加载关键内容,延迟加载非关键内容
  • 缓存
    接口缓存和静态资源缓存
  • 离线化
    离线化是指线上实时变动的资源数据静态化到本地访问时走的是本地文件的方案
  • 并行化
    并行化则是在请求通道上下功夫,解决请求阻塞问题,进而减少首屏时间

如何在用户离开页面时进行弹窗挽留