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

什么是关键渲染路径

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

常见的优化方法

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

参考链接:

above the fold 定义
延迟加载图片
都有谁在阻塞渲染
阻塞渲染的CSS
阻塞渲染的JavaScript
网络字体阻塞渲染
优化首屏显示