面试：关键渲染路径？

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

当我们在浏览器输入网址后，浏览器是如何加载出我们需要的页面内容呢？浏览器就是通过关键的渲染路径将 html、CSS、JavaScript 这些文件转为我们所看到的的页面。这个过程使我们前端的重要过程，面试也是常常会被问到的知识点。

什么是关键渲染路径（CRP）

关键渲染路径（Critical Rendering Path），简称 CRP，是指浏览器将 web 代码（html、CSS、JavaScript ） 转为屏幕上可以显示的像素的过程，主要包括一下几个阶段：

1. 下载 HTML
2. 读取、解析 HTML，构建 DOM 树，遇到 <link rel="stylesheet" > 标签，并下载 CSS
3. 读取 CSS ，并构建 CSSOM 树
4. 将 DOM树 和 CSSOM树 合并为一个 渲染树
5. 使用渲染树，计算布局，计算每个元素的大小和位置（重排 Layout）
6. 将像素渲染到页面上（重绘 Paint）

如何优化CRP

优化CRP 就是要尽快的加载与首屏相关的 html、CSS、JavaScript，最大限度缩短 CRP 过程中消耗的时间。通常就是说快速首屏加载，减少白屏时间。

减少网页首次渲染的资源：拆分首屏和非首屏

将静态资源划分为关键资源（首屏所需要的资源）和非关键资源（非首屏所需要的资源）。

对于非关键资源可以采用延迟加载的方式。JS 和 CSS 异步加载。

还可以对 html、CSS、JavaScript 的代码进行减小、压缩（尽量不要超过 14kb ），亦或者是缓存处理。

关于 http 14kb 的事情 ，这个感兴趣的可以自己去查找资料。 简单的说就是 http 的 TCP 协议层有一个慢启动的过程，它在第一次传输数据时，只能传递 14kb 的数据，如果超过 14kb 的话，TCP 协议传递数据是需要多次往返的。

附：

• 【TCP 慢开始 / 14kb 规则】
• 【为什么都说首屏html大小限制在14KB以内】

减少关键路径长度和请求次数

1. 首屏样式和JS 采用内联形式，注意 JS 内联 要放在 </body> 之前，因为 javascript 会阻塞渲染（同步运行的 JS 脚本会停止 HTML 的解析，直到脚本运行结束）
2. 合并 JS 文件到个文件中，同时要尽可能的减小文件大小（尽量做到小于 14kb）

减少关键资源大小

• HTML：减少 DOM 的层级和数量
• JavaScript：对代码进行压缩，移除不必要的代码，去掉换行、空格和注释。常见的就是使用 webpack 工具对代码就行压缩 【UglifyjsWebpackPlugin】；使用 webpack 的【tree shaking】优化代码引用。
• CSS：删除冗余的代码，压缩代码。

静态资源图片

合并图片使用雪碧图、尽量的压缩图片资源大小

对于前端资源的优化还可以参考之前的文章: [前端性能优化的方式]

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏。