浏览器渲染过程以下:git
阻塞问题:github
构建 CSSOM 会阻塞浏览器渲染,但不会阻塞解析 HTML 构建 DOM树。web
JavaScript 会阻塞 DOM 树构建。canvas
当 HTML 解析器遇到一个 script 标签时,它会暂停构建 DOM,将控制权移交给 JavaScript 引擎;等 JavaScript 引擎运行完毕,浏览器会从中断的地方恢复 DOM 构建。浏览器
JavaScript 能够查询和修改 DOM 与 CSSOM,会致使竞态问题。缓存
浏览器还没有完成 CSSOM 的下载和构建,而咱们却想在此时运行 JavaScript,会怎样?答案很简单,对性能不利:浏览器将延迟执行 JavaScript 和 DOM 构建,直至其完成 CSSOM 的下载和构建。性能优化
异步脚本异步
携带 defer
属性的脚本,顺序执行,会在DOMContentLoaded
事件触发以前执行。async
标准里defer
是顺序执行,但由于浏览器可能并未按照标准实现,因此现实状况不必定是顺序执行。ide
携带 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