URL输入到渲染的过程 回流和重绘

133 阅读1分钟

1 dns域名解析,找到ip地址
2 根据IP地址,找到服务器建立TCP链接,若https,多一层TLS握手
3 客户端收到服务器的响应内容,解析文档
4 构建dom树和csscom
5 根据dom树和csscom生成渲染树
6 Layout(回流):根据生成的渲染树,得到节点的集合信息
7 Painting(重绘):根据渲染树及其回流得到的节点集合信息,得到节点的绝对像素
8 绘制:在页面上展示
9 加载并解析js脚本

回流和重绘

回流

每个dom节点的空间属性发生变化,会影响其他节点的空间布局,需要重新收集节点信息,在进行绘制,就是回流的过程,所以回流一定会重绘。获取位置信息和更改dom节点空间属性,会导致回流,这个过程很耗费性能,

回流的优化

1 避免连续多次修改,可以将修改合并,一次出发回流
2 对dom修改时,可以先使其脱离文档流,例如display:none,修改完成后在放回文档里。
3 通过节流和防抖控制出发频率
4 css3硬件加速,会使dom提升为独立的渲染层,他的变化不在影响文档流的布局。

重绘

对元素的外观的处理,比如颜色,背景,阴影