We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。
我们这里只尽量精简描述这个渲染过程，更具体的可以去看MDN-关键渲染路径。
在浏览器接收html时（浏览器收到数据的第一块时就可以开始解析收到的信息）：
首先解析 HTML 并构建 DOM 树；
async
defer
构建 CSSOM 树
Style（也叫构建Render树）
Layout（布局）
Paint
CRP 流程整体比较简单直接，我们讨论其中比较有意思的几个细节：
具有 async 属性的脚本在完成下载后和 load 事件之前第一时间执行。
load
具有 defer 属性的脚本在 HTML 解析完全完成之后执行，但在 DOMContentLoaded 事件之前执行。
DOMContentLoaded
如果在加载过程中更早地运行脚本很重要，请使用 async。
优化网络和资源本身（不局限于CRP）：
dns-prefetch
preconnect
tree-shaking
通过异步、延迟加载或者消除非关键资源来减少关键资源的请求数量，如defer/async/preload/prefetch。
defer/async/preload/prefetch
defer/async
通过区分关键资源的优先级来优化被加载关键资源的顺序，来缩短关键路径长度。
preload/prefetch
<head>
<body>
任何样式更新、DOM增删等等，造成布局（Layout）需要重新计算就称为回流（Reflow）。而不影响布局的节点样式/几何属性变更就是重绘（Repaint）。
回流严重影响性能，需要优化：
will-change/translate3d/translatez
position:absolute/fixed
display: none
transform
top
现代浏览器一般是多进程架构，以Chrome为例，一般会有以下进程：
Renderer 进程：
从架构上就可以看出，当 Renderer 线程被 JS 阻塞（忙于执行JS）时，卡顿掉帧是必然的。为了达到60FPS，必须限制JS运行时间、减少复杂的样式更新。
上面的图其实也某种程度就是浏览器的 event loop 流程。
下面是几点需要注意的细节：
The text was updated successfully, but these errors were encountered:
No branches or pull requests
（一）浏览器关键渲染路径-CRP
关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。
我们这里只尽量精简描述这个渲染过程，更具体的可以去看MDN-关键渲染路径。
在浏览器接收html时（浏览器收到数据的第一块时就可以开始解析收到的信息）：
首先解析 HTML 并构建 DOM 树；
async或者defer属性的）会阻塞渲染并停止 HTML 的解析。构建 CSSOM 树
Style（也叫构建Render树）
Layout（布局）
Paint
CRP 流程整体比较简单直接，我们讨论其中比较有意思的几个细节：
1. script 的
deferVSasync具有 async 属性的脚本在完成下载后和
load事件之前第一时间执行。具有 defer 属性的脚本在 HTML 解析完全完成之后执行，但在
DOMContentLoaded事件之前执行。如果在加载过程中更早地运行脚本很重要，请使用 async。
2. 怎么优化CRP？
优化网络和资源本身（不局限于CRP）：
dns-prefetch，preconnect等优化dns、tcp建立速度；tree-shaking等清除无用代码等等，减小资源体积；通过异步、延迟加载或者消除非关键资源来减少关键资源的请求数量，如
defer/async/preload/prefetch。defer/async来消除js对DOM构建的阻塞；通过区分关键资源的优先级来优化被加载关键资源的顺序，来缩短关键路径长度。
preload/prefetch等优化资源加载顺序；<head>；js放在<body>底部。3. Reflow/Repaint 以及相关的优化
任何样式更新、DOM增删等等，造成布局（Layout）需要重新计算就称为回流（Reflow）。而不影响布局的节点样式/几何属性变更就是重绘（Repaint）。
回流严重影响性能，需要优化：
will-change/translate3d/translatez等等；position:absolute/fixed；display: none，transform替代top等；（二）浏览器进程/线程角度看渲染流程以及 event loop
现代浏览器一般是多进程架构，以Chrome为例，一般会有以下进程：
Renderer 进程：
从架构上就可以看出，当 Renderer 线程被 JS 阻塞（忙于执行JS）时，卡顿掉帧是必然的。为了达到60FPS，必须限制JS运行时间、减少复杂的样式更新。
一桢内浏览器会做什么？
上面的图其实也某种程度就是浏览器的 event loop 流程。
下面是几点需要注意的细节：
（三）参考
The text was updated successfully, but these errors were encountered: