前端 性能优化

前端 性能优化

面试中经常会问到这个问题 记录一下

从浏览器的渲染过程来看

1. 解析 HTML 文件，构建 DOM 树，同时浏览器主进程负责下载 CSS 文件
2. CSS 文件下载完成，解析 CSS 文件成树形的数据结构，然后结合 DOM 树合并成 RenderObject 树
3. 布局 RenderObject 树 （Layout/reflow），负责 RenderObject 树中的元素的尺寸，位置等计算
4. 绘制 RenderObject 树 （paint），绘制页面的像素信息
5. 浏览器主进程将默认的图层和复合图层交给 GPU 进程，GPU 进程再将各个图层合成（composite），最后显示出页面

---

所以 只要会对渲染操作阻塞的操作，都是可以进行性能优化的一个方向

DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。

按照渲染思路来想

进行渲染的时候，所有的图片/html文件等等，都是通过请求来的
所以第一想法就是如果能减少请求的次数，就是很好的一种优化方式。

1. 减少http请求

可以通过以下(2、3)方式来减少http的请求的次数

2. 多张图片合成一张，使用雪碧图

3. 合并CSS文件

假如在一个页面中，有很多张图片。
如果不使用懒加载，就会有点卡顿，等到全部图片都下载完成才显示，有点鸡肋

4. 图片的懒加载

同理的还有当数据量很大时

5. 数据的分页处理

当页面都已经加载完成了。后续开始进行用户操作了。
我们都知道，当html元素的大小等发生改变时会触发回流的操作。即重渲染。
很明显，我们需要减少此类的操作。

6. 减少DOM操作

页面在渲染的时候，结合html生成的dom树和cssom树的render，除了减少dom的操作以外，当遇到css表达式时，也会浪费很多的资源

7. 避免使用CSS表达式

例如calc() 表达式的使用

从写代码的层面，就会涉及到事件委托咯。

8. 事件委托

还有一些用户可能会重复点击的地方，为了避免一直出发带来的性能问题。

频繁的用户操作就会让我们联想到 防抖和节流 的方法

9. 防抖和节流

言简易懂: 防抖和节流