前端性能优化关键词:Critical rendering path


什么是关键渲染路径

Critical:必需的,关键的
Render:渲染
Path:浏览器现实初始视图(initial view )所必须的一系列过程。初始视图也称为首屏(above the fold),用户不需要滚动就能看到的内容。
所以关键渲染路径的定义就是:浏览器显示网页(首屏)所必须的一系列事件。
回顾浏览器渲染过程
1. 加载HTML
2. 加载资源
3. 解析
4. 渲染
首屏内容的优化对用户体验至关重要,首屏所需的步骤精简,时间加快,其余内容延迟加载或者滚动加载。

常见的优化方法

去掉或者减少阻塞资源
控制首屏所需字节先加载
推迟其余的资源

参考链接:

above the fold 定义
https://en.wikipedia.org/wiki/Above_the_fold
https://www.smashingmagazine.com/2009/09/10-useful-usability-findings-and-guidelines/
延迟加载图片
https://varvy.com/pagespeed/defer-images.html
都有谁在阻塞渲染
https://www.keycdn.com/blog/blocking-the-dom/
阻塞渲染的CSS
https://varvy.com/pagespeed/render-blocking-css.html
阻塞渲染的JavaScript
https://varvy.com/pagespeed/render-blocking.html
网络字体阻塞渲染
http://ianfeather.co.uk/web-fonts-and-the-critical-path/
优化首屏显示
https://varvy.com/pagespeed/prioritize-visible-content.html