谈起写代码，其实不论是前后端或是什么语言，随着项目日渐庞大，都会涉及到优化的问题，由于写了很久的前端，今天就来聊聊前端优化的一些方法（小技巧）。

首先呢，我们要知道页面展示可以分为3个阶段，请求页面，加载和解析页面，渲染。其实要做前端优化，就可以围绕这三个方面进行。（这只是一个角度分析）

• 请求数据阶段主要指标是服务器响应时间，从服务器角度优化。
• 加载和解析页面阶段，性能优化的主要思路是减少请求数量、降低资源的大小和避免阻塞。
• 渲染阶段优化思路是避免重绘和重排。

好，言归正传。接下来一起列出几个常见的优化技巧：

1、避免不必要的渲染

属性值没有改变时候不需要重新渲染，通过React.PureComponent + shouldComponentUpdate，或者React.memo来实现。

2、Fragment

避免不必要的标签，如果想返回一个标签列表，可以使用React.Fragment包裹。

3、事件回调不使用匿名函数或者bind

如果事件函数用匿名函数或者bind的函数，每次render时候都要解绑旧的函数，绑定新的函数，这时不必要的，类组件中，事件回调应该作为组件的一个属性；函数组件中可以用useCallback实现每次返回同一个函数。

4、不要用内联样式，防止解析操作耗时。

5、不要在render中setState，可能造成死循环。实际上render函数应该是个纯函数，没有任何副作用。

6、优化条件渲染

让条件分支中只包含需要改动的元素，不包含不需要改动的元素，防止diff子节点和更新节点时候增加不必要的操作，消耗性能。

7、缓存计算属性

使用memorize-one库缓存计算量大的值，在函数组件中使用useMemo缓存计算的值。

8、长列表优化

对于长列表，可以只渲染可视区及附近的元素，这样不用挂载大量DOM，节省很多性能。可以用react-vitualize库。

9、concurrent mode

启用concurrent mode之后，React会采取可中断渲染，让大规模的diff计算不会影响到界面的渲染，保证渲染和交互的流畅性。

使用Suspense组件可以在加载局部组件时候有更好的切换加载体验。

10、列表中使用key

不使用key或者用index作为key，都可能使列表在变化时候，让React无法辨别前后item对应关系，只能遍历对比，更新属性，这样可能会有多余的操作，造成性能损耗。

11、使用精灵图减少图片存储

12、使用svg来代替一些图片

13、使用懒加载

14、事件绑定方式，从性能考虑，在render方法中使用bind和箭头函数，都会生成新的方法实例，故应在constructer中欧给使用bind和箭头函数，提高性能

15、提取公共组建，组件拆分，合理使用hooks

16、不要使用内联函数，如果我们使用内联函数，则每次调用“render”函数时都会创建一个新的函数实例

17、避免 componentWillMount() 中的异步请求。由于 API 调用是异步的，因此组件在调用 render 函数之前不会等待 API 返回数据。于是在初始渲染中渲染组件时没有任何数据。

18、render 函数应保持纯净，以确保组件以一致的方式运行和渲染。不要在render里面setState

19、用 CSS 动画代替 JavaScript 动画。

我们可以制定一些规则：

如果 CSS 可以实现某些 JS 功能，那就用 CSS。

如果 HTML 可以实现某些 JS 功能，那就用 HTML。

理由如下：

破损的 CSS 规则和样式不会导致网页损坏，而 JavaScript 则不然。

解析 CSS 是非常便宜的，因为它是声明性的。我们可以为样式并行创建内存中的表达，可以推迟样式属性的计算，直到元素绘制完成。

为动画加载 JavaScript 库的成本相对较高，消耗更多网络带宽和计算时间。

虽然 JavaScript 可以提供比 CSS 更多的优化，但优化过的 JavaScript 代码也可能卡住 UI 并导致 Web 浏览器崩溃。

20、使用PureComponent和memo进行浅比较，类组件用PureComponent，函数组件用memo。

21、减少函数 bind this 的次数

22、在显示列表或表格时始终使用 Keys，这会让 React 的更新速度更快。

23、懒加载。React 可以通过 react-lazyload 这种成熟组件来进行懒加载的支持。

24、切分代码。通过 Code Splitting 来懒加载代码，提高用户的加载体验。例如通过 React Loadable 来将组件改写成支持动态 import 的形式。

25、页面占位。有时候图片或者文字没有加载完毕，对应位置空白，然后加载完毕会突然撑开页面导致闪屏。这时候使用第三方组件 react-placeholder 可以解决这种情况。

26、减少业务代码体积。通过 Tree Shaking 来减少一些代码