前端性能优化关键词：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