前端 性能优化
面试中经常会问到这个问题 记录一下
从浏览器的渲染过程来看
- 解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件
- CSS 文件下载完成,解析 CSS 文件成树形的数据结构,然后结合 DOM 树合并成 RenderObject 树
- 布局 RenderObject 树 (Layout/reflow),负责 RenderObject 树中的元素的尺寸,位置等计算
- 绘制 RenderObject 树 (paint),绘制页面的像素信息
- 浏览器主进程将默认的图层和复合图层交给 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. 防抖和节流
言简易懂: 防抖和节流