一、参考文章
二、浏览器渲染过程
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、 阴影等画出来)
- Compose合成(根据层叠关系展示画面)
三、用开发者工具查看渲染过程
- 点三个点→Rendering→勾选Paint flashing(渲染时闪一闪)
- 注意必须全屏查看效果，在iframe里看有问题
四、更新样式
1.一般我们用JS来更新样式
- 比如div.style.background = 'red'
- 比如div.style.display = 'none'
- 比如div.classList.add('red')：div有一个新的类，一个类里可以有好多样式。所以加许多个样式还不如加一个类
- 比如div.remove()直接删掉节点
2.三种更新方式
①第一种，全走
比如div.remove()会触发当前消失，其他元素布局位置都改了，要重新relayout。
示例代码
②第二种，跳过layout
比如改变背景颜色，直接repaint + composite。 示例代码
③ 第三种，跳过layout和paint
比如改变transform,只需composite。
示例代码
五、查看CSS属性是哪种更新方式
依次是谷歌、Firefox、safari、IE最新浏览器
