浏览器渲染原理浅析

[shuch]

浏览器多线程

浏览器是多线程的

• GUI 渲染线程
• JavaScript 引擎线程
• 定时器线程
• 事件线程
• 异步请求线程

为了防止渲染出现不可预期的结果（js可能修改dom或css），GUI 渲染线程和JavaScript引擎线程互斥。

渲染线程

• 解析 HTML 构建DOM树 Dom Tree
• 解析 CSS 构建 CSS 规则树 CSS Rule Tree
• CSS规则树附加到 DOM树上，删除不可见元素，形成渲染树 Render Tree
• 回流(Reflow或Layout)：计算每个元素盒子位置和大小
• 重绘(Repaint)：根据元素的位置和大小，计算元素的绝对像素
• 渲染(Display)：将绝对像素发给GPU，将多个合成层合并，形成一个层。

元素新增和删除以及位置或大小改变会触发节点的回流(Reflow)，之所以叫回流是因为浏览器默认的布局方式是流式布局。参考回流和重绘

优化方式

• 尽量避免js操作dom
• style 样式改变通过class而不是手动修改
• 开启GPU加速渲染will-change和translateZ
• documentFragment离线操作 dom
• 耗时操作放在web worker中完成

script defer和async

• async 属性会异步下载script，下载后立即执行，下载完成前不影响html解析。
• defer 属性会异步下载script，下载后延迟执行，等到html解析完成，执行完成后触发DOMContentLoaded 事件
• async是无序的，而 defer有序

参考

你真的了解回流和重绘吗