浏览器渲染过程:
HTML
▶ Html
解析器 ▶ DOM
树 ▶ 资源请求【css解析器-css样式树】【js执行-操作dom】
▶ 渲染树【计算布局】
▶ 绘制 ▶ 显示
HTML 解析器
解析
HTML
文档,将元素逐个转化成DOM
节点,从而生成DOM
树
CSS 解析器
将
CSS
转化为对象,然后将对象构建成CSSOM
树
CSSOM
:CSS
对象模型
渲染树
渲染树:由
DOM
树和CSSOM
树转化而成,CSS
渲染树-计算布局
如:隐藏节点、绝对定位节点、由子节点控制的节点等
绘制
计算后的渲染树,通过显卡
GPU
进行绘制
显示
将绘制后的图层,显示
哪些环节会造成性能问题?
- 资源加载(
CSS
、JS
) - css层级,选择器的深度