前端性能优化小结

https://zhuanlan.zhihu.com/p/113864878?from_voters_page=true

浏览器渲染流程：

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

1、关键路径优化（首屏）

优化DOM、优化JS（js放后面或者加async）、优化CSSOM（首次加载关键CSS、选择器效率问题）

2、避免重绘或回流
重绘的代价比回流要小，
导致回流的操作：

页面首次渲染

• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的 DOM 元素
• 激活 CSS 伪类（例如:hover）
• 查询某些属性或调用某些方法
• 一些常用且会导致回流的属性和方法 clientWidth、clientHeight、clientTop、clientLeftoffsetWidth、offsetHeight、offsetTop、offsetLeftscrollWidth、scrollHeight、scrollTop、scrollLeftscrollIntoView()、scrollIntoViewIfNeeded()、getComputedStyle()、
  getBoundingClientRect()、scrollTo()

避免方法：
避免使用 CSS 表达式（例如：calc()）。
动画效果应用到position属性为absolute或fixed的元素上,它们不影响其他元素的布局,所它他们只会导致重新绘制,而不是一个完整回流。这样消耗会更低。
图片懒加载。
事件委托。
防抖/节流。
服务端渲染。
组件懒加载。
react purecomponent