前端优化方法大全

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

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

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

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

1、避免不必要的渲染

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

2、Fragment

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

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

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

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

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

6、优化条件渲染

让条件分支中只包含需要改动的元素&#x