Web 项目 React Vue 性能优化方法

Question

首页白屏优化

原因

页面在进行渲染时，同步加载的 JS 和 CSS 都会阻塞页面渲染。SPA 应用将所有逻辑打包成 JS，导致浏览器加载 js 时间过长，就会出现白屏情况

解决办法

1. 首页加载不执行的 js，可以使用异步加载，例如 Vue 路由懒加载，异步组件
2. 将通用库从 bundler 中抽离，然后放在 cdn
3. gzip 压缩
4. SSR
5. 使用 prefetch ,preload 设置样式的优先级
6. 骨架屏，loading
7. 优化图片格式，使用 webP
8. 减少文件请求
9. 使用缓存

备注

prefetch 加载浏览器页面可能需要的资源，浏览器不一定加载这些资源，在 Vue 生成的 App 中我们可以看到 路由的资源基本使用 prefetch

preload 告诉浏览器页面必需这些资源，浏览器也一定会加载

preload 将加载和执行分离，不阻塞渲染。

perload/prefetch 不仅可以用于 js，也可以加载样式图片。defer 只能异步加载 js

React 性能优化

React 和 Vue 相比，较烦的就是要关注性能优化。父组件更新后，所以子组件都需要更新。因此在进行 React 开发时，需要时刻记住性能优化，避免不必要的更新。

组件更新

1. React.memo 缓存函数组件，当组件自身的状态更新时才更新。同时可以传入比较 props,决定是否更新
2. PureComponent 组件会对 props 进行浅比较，不一样才会进行更新
3. shouldComponentUpdate 可以对新旧 props 时进行比较，决定是否更新

传值优化

1. props 尽量不要传内联对象，方便组件比较
2. 避免匿名函数传值，class 组件使用具名函数进行传值，函数组件用 useCallback 缓存函数

其他

1. 使用 React.lazy 和 React.Suspense 懒加载组件
2. 使用 Fragment 替代 div
3. 利用 children 将渲染无关的子组件元素到「有状态组件」的外部

Vue 性能优化

Vue 因为有依赖收集，所以组件更新的是精确的，基本上不用怎么做处理。但是平时开发还是有些小细节需要去注意的

1. keep-alive 缓存组件
2. 利用 import 懒加载路由，懒加载组件
3. 列表 v-for 使用 key 值，index 索引无意义
4. v-show ,v-if 合理使用
5. 某些常量可以放在 computed 中
6. 组件销毁时，销毁事件监听