浏览器渲染原理

页面渲染流程

浏览器收到web网页的内容后会开始下载 HTML、CSS、JS，并绘制 DOM 树和 CSS 树，当两颗树都绘制完成后会合并成一个渲染树。然后再经过Layout、Paint、Composite，最终完成渲染。

HTML 解析会被 JS 阻塞

当 HTML 开始解析时遇到 JS 会停止解析 HTML，并执行 JS，因为 JS 可能会进行 DOM 操作，如果 HTML 解析完成后再执行 JS，性能开销会大一些。

当然也可以在 js 脚本中加上 defer，这样 HTML 就能先被解析完成，js 同步下载而不会阻塞，待 HTML 解析完成后，DOM 树还未渲染的时候再执行 js 脚本。

JS的执行会被 CSS 阻塞

因为 js 脚本 需要 css 完全解析完成并形成 CSS 树后才会开始执行，因为 js 用到的一些值可能会被 css 影响，比如元素定位，宽高。

为什么DOM 树和 CSS 树会合并

因为这两颗树一个是根据HTML 代码解析出来的，一个是根据 CSS 代码解析出来的，必须要合并成一个渲染树浏览器才能理解无误。

如何判断重绘时 reflow 和 repaint

reflow 就是 Layout 大小尺寸等改变，repaint 就是Paint颜色、阴影等改变。

css 中每个属性影响浏览器重绘的结果不一样，浏览器不同，重绘也会不同。有人专门整理出来了一份 css 属性和主流浏览器重绘时之间的关系。CSS Triggers

例如 transform 属性它只会触发 Composite，不会触发 Layout 和 Paint，做动画效果会开销小不易卡。