浏览器渲染过程如下：
阻塞问题：
构建 CSSOM 会阻塞浏览器渲染，但不会阻塞解析 HTML 构建 DOM树。
JavaScript 会阻塞 DOM 树构建。
当 HTML 解析器遇到一个 script 标签时，它会暂停构建 DOM，将控制权移交给 JavaScript 引擎；等 JavaScript 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建。
JavaScript 可以查询和修改 DOM 与 CSSOM，会导致竞态问题。
浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行 JavaScript，会怎样？答案很简单，对性能不利：浏览器将延迟执行 JavaScript 和 DOM 构建，直至其完成 CSSOM 的下载和构建。
异步脚本
携带 defer属性的脚本，顺序执行，会在DOMContentLoaded 事件触发之前执行。
标准里defer是顺序执行，但因为浏览器可能并未按照标准实现，所以现实情况不一定是顺序执行。
携带 async属性的脚本，乱序执行，会在loaded 事件触发之前执行。
浏览器 60 帧刷新率中的每一帧，像素至屏幕管道中的关键点可以分为 5 个步骤。
.headline 或 .nav > .nav__item）计算出元素的 CSS 规则并计算每个元素的最终样式。<body> 元素的宽度一般会影响其子元素的宽度以及树中各处的节点。跳过 Layout 和 Paint
更改一个既不要布局也不要绘制的属性，则浏览器将跳过 Layout 和 Paint，只执行 Composite。
跳过 Layout
如果只修改 paint only 属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，浏览器会跳过 Layout 过程，但仍将执行 Paint。
这个过程就是浏览器重绘。
无跳过
如果修改元素的 layout 属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），浏览器会检查所有其他元素，然后自动重排页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需会进行合成。
这个过程就是触发回流和重绘。
通过上面的描述可以知道，触发重绘不一定会触发回流，但触发回流一定会触发重绘。
浏览器为了避免在一帧的时间里频繁的触发回流和重绘过程，会将多次回流、重绘汇总成一次进行处理。一般是将回流、重绘操作推入一个队列中，直到队列达到阈值或者需要执行时，才会清空队列。
强制回流
执行获取布局信息的操作，为了获取正确的数据，浏览器会清空队列，触发回流重绘。
读取以下属性或者使用以下方法会导致强制回流：
避免强制回流
对于频繁读取布局信息的操作，可以使用requestAnimationFrame()，将操作汇集起来并延迟入队，因为requestAnimationFrame()是在每一帧重绘前执行的。
或者将值缓存起来也是可以的。
// 频繁读取布局信息会导致强制回流
for (let i = 0; i < arr.length; i++) {
arr[i].style.padding = el.style.clientWidth + '5px';
// do something
}
// 缓存
let width = el.style.clientWidth;
for (let i = 0; i < arr.length; i++) {
arr[i].style.padding = width + '5px';
// do something
}脱离文档流
对于会频繁修改属性的元素，可以使其脱离文档流，这样可以最小化回流和重绘。因为脱离了文档流，修改不会影响文档流整体。
GPU 加速绘制，提升为合成层
所有的元素会在 Composite 进行渲染层合并，即形成层叠上下文的元素会渲染在不同的渲染层中。
但一个渲染层满足以下条件会被提升为合成层，由硬件加速绘制：
对于动画可以使用 transform 和 opacity 属性，会跳过上面五个步骤中的Layout、Paint，不触发回流重绘，但动画的其它属性，比如 background-color 这些，还是会引起回流重绘。
具体内容参考文章无线性能优化：Composite
原文：https://www.cnblogs.com/guolao/p/12234932.html