浏览器渲染流程
一、步骤
- 根据 HTML 构建 HTML 树(DOM)
- 根据 CSS 构建 CSS 树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout 布局(文档流、盒模型、计算大小和位置)
- Paint 绘制(把边框、文字颜色、阴影等画出来)
- Compose 合成(根据层叠关系展示画面)
二、三棵树图示
三、如何更新样式
-
采用 JS 来更新样式
div.style.background='red'; div.style.display='none'; div.style.classname='redd'; <!-- 以上是用js代码来更新样式 -->
四、三种更新方式
以上图片表示什么含义呢?
- 第一种:全部都要走(渲染)一遍
例如:div.remove()
会触发当前消失,其他元素重新 Layout
- 第二种:跳过 Layout
例如:div.style.background='red';
改变背景颜色,直接 repaint+compose。
- 第三种:跳过 Layout 和 paint
例如:改变 transform。要在全屏下查看效果,在 iframe 里看有问题。