现代浏览器网页渲染原理
关键渲染路径
DOM tree + CSSOM tree => Render tree
JavaScript => Style => Layout => Paint => Composite
布局和绘制往往是页面渲染速度的关键，所以我们的渲染优化着重点可在这两方面：
-
Layout：关心的是页面节点的几何信息（位置、大小）
-
Paint：关心的是文字颜色、背景颜色、阴影等不会影响到自身以及周围的大小、位置的属性
1. 布局（Layout）
影响回流（Layout）的操作有哪些
- 添加、删除元素
- display: none
- 移动元素位置
- 修改浏览器大小、字体大小
- ......
FastDom批量对dom的读写操作
在chrome浏览器的Performance工具栏中，我们可以查看到又
FastDom这个工具可以提升多次修改布局的操作性能。
2. 减少重绘（repaint）
3. 复合线程（compositor thread）与图层（layers）
我们根据下面3步逐一了解复合线程：
- 将页面拆分图层进行绘制再进行复合
- 利用DevTools了解网页的拆分情况
- 哪些样式仅影响复合
我们在chrome中的Layes中可以查看当前页面的复合情况。
以下属性只会触发页面的复合，而不会触发我们的回流和重绘：
- Position
- Scale
- Rotation
- Opacity
4. 查看动画工具使用
Show Rendering查看
我们在Performance工具栏中，按ctrl + shift + p可以进行搜索 Show Rendering 字样。
当我们选择多选框时，页面动画渲染时，会用不同颜色框来表示我们选中的渲染方式是否启动。
Performance中的录制功能
5. 高频事件处理函数抖动问题（防抖）
requestAnimation-Frame
这个函数是在Layout和Paint之前执行的一个操作
