使用 immutable.jspureComponent
React动画
ErrorBoundary
Suspense和 Fragment
https://juejin.cn/post/6963053793613185031
前端页面性能优化
https://zhuanlan.zhihu.com/p/141979564

react性能分析

  • 长列表虚拟滚动
  • 从业务场景中进行需求提炼，这是一个持续的过程
  • 组件化、prop、单向数据流、性能、虚拟渲染，并意识到状态管理的重要
  • 前端sku算法商品多规格选择
  • 内存泄漏优化
  • 响应速度优化的核心思想就是避免在主线程中做耗时操作
  • 在加载数据时显示一些 Skeleton 会对感知的用户体验产生巨大影响

webpack优化方案
浏览器缓存原理和最佳实践策略
CDN缓存
EventLoop异步更新
避免回流和重绘
函数的节流和防抖
通过 Performance监控性能
TCP网络调优

React性能优化

不要在 render函数里面去修改 this.state，会递归，死循环

  1. 性能永远是第一需求：时刻考虑代码的性能问题
  2. 一个组件的js的代码不要超过 300行
  3. 渲染列表时加 key
  4. 合理使用 SCU，shouldComponentUpdate
    1. PureComponent
    2. memo
  5. 合理使用 immutable.js
  6. webpack构建优化
  7. 使用 SSR

react性能优化.md

常见的性能问题场景

  1. 键盘的输入，input的 onChange
  2. 滚动；鼠标的移动，拖拽
    1. 解决：函数的节流和防抖
  3. 自定义事件，DOM事件及时销毁
  4. 减少函数 bind this 次数
  5. 注重可重构的代码，代码保持可重构
  6. 代码的潜在性能问题；组件拆分的粒度，粒度拆分的越小越好

Table性能优化

  • 表格数据使用Object.freeze(data)处理，即这个数据不是响应式的了，可以提高表格渲染的性能
    • 一般来说表格中的数据是不会进行更改的。一般进行更改后都是重新调用接口来重刷一遍数据
  • 减少使用计算属性和dom的判断渲染
  • 后端只会传给你一个状态码， 你会通过不同的状态码来渲染不同的东西， 比如{status: 0},
    • 要渲染会员这个中文，可以在js中先将数据进行转换下，变成{status: ‘会员’}，直接渲染上去

网络性能优化

  1. 合理使用异步组件，自动化按需加载：Suspense & lazy； react-loadable
  2. 图片懒加载
  3. 资源压缩，资源合并等前端通用的懒加载
  4. 缓存

memo & PureComponent

  • shouldComponentUpdate 判断组件是否更新
    • 如果新值和旧值一样，就 return false不渲染
  • PureComponent 对比的就是 state的属性，基础数据类型
  • memo就是 shouldCOmponentUpdate做浅比较

react 异步渲染

异步渲染的2个部分
异步渲染的2个部分.jpg

时间分片

  1. 虚拟DOM的 diff操作可以分片进行
  2. react的 API：unstale_deferredUpdates
  3. chrome的API：requestIdleCallback
    1. 在浏览器的空闲时段内调用的函数排队
    2. 在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应
    3. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback
    4. https://reactjs.org/docs/design-principles.html#beyond-the-dom
  4. requestAnimationFrame
  1. window.requestIdleCallback(callback[, options])

渲染挂起

  1. 内置组件 timeout
  2. unstable_deferUpdate

事件优化

函数组件 useCallack

  1. 每次render调用时，都会重新创建一个事件的回调函数，带来额外的性能开销
  2. 当组件的层级越深时，这种开销就越大，因为任何一个上层组件的变化都可能会触发这个组件的render方法
  3. 优化点：useCallback禁止重复创建事件句柄

中文输入法优化

  1. 用 onCompositionStart，onCompositionUpdate，onCompositionEnd这三个事件来处理
  2. compositionstart 要开始输入中文
  3. compositionupdate 插入新字符
  4. compositionend ```jsx handleCompositionStart () { this.lock = true }

handleCompositionEnd (event) { this.lock = false this.handleChange(event.target.value) }

handleCompositionUpdate () { this.lock = true }

  4. <a name="9e2104d6"></a>
  5. ### reselect 避免重复计算
  7. 1. 自动缓存的数据处理流程，类似 vue的 computed
  8. 2. 应用场景：
  9.    1. 输入框改变，触发table重新渲染，但是table数据并没有变化
  10.    2. 购物车
  12. ```jsx
  13. import { reselect } from "reselect"
  15. const getItems = state => state.items;
  16. const getById = state => state.byId;
  18. const tbodyCache = reselect(getItems, getById, (items, byId) => {
  19.   console.log("reselect: get table data");
  20.   if (!items) return [];
  21.   return items.map(id => byId[id]);
  22. })

用工具定位性能问题

react-devt-tools

image.png

勾选 Highlight Updates
image.png

chrome Performance

CPU 6x showdown

集成第三方 JS 库

  1. 使用 ref 获取 原生的 DOM
  2. 手动将组件更新到 DOM 节点
  3. 组件销毁时，删除原生节点