Web前端最全聊一聊前端性能优化(1)，2024年最新2024年大厂前端高级面试题分享

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CRP又称关键渲染路径，引用MDN对它的解释：

❝

关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。

❞

优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。

如何结合CRP进行性能优化？

---

我想对于性能优化，大家都不陌生，无论是平时的工作还是面试，是一个老生常谈的话题。

如果单纯针对一些点去泛泛而谈，我想是不太严谨的。

今天我们结合一道非常经典的面试题：从输入URL到页面展示，这中间发生了什么？来从其中的某些环节，来深入谈谈前端性能优化 CRP。

从输入 URL 到页面展示，这中间发生了什么？

---

这道题的经典程度想必不用我多说，这里我用一张图梳理了它的大致流程：这个过程可以大致描述为如下：

1、URI 解析

2、DNS 解析（DNS 服务器）

3、TCP 三次握手（建立客户端和服务器端的连接通道）

4、发送 HTTP 请求

5、服务器处理和响应

6、TCP 四次挥手（关闭客户端和服务器端的连接）

7、浏览器解析和渲染

8、页面加载完成

本文我会从浏览器渲染过程、缓存、DNS 优化几方面进行性能优化的说明。

浏览器渲染过程

---

构建 DOM 树

构建DOM树的大致流程梳理为下图：

我们以下面这段代码为例进行分析：

森林

之晨

首先浏览器从磁盘或网络中读取 HTML 原始字节，并根据文件的指定编码将它们转成字符。

然后通过分词器将字节流转换为 Token，在Token（也就是令牌）生成的同时，另一个流程会同时消耗这些令牌并转换成 HTML head 这些节点对象，起始和结束令牌表明了节点之间的关系。

当所有的令牌消耗完以后就转换成了DOM（文档对象模型）。

最终构建出的DOM结构如下：

构建 CSSOM 树

DOM树构建完成，接下来就是CSSOM树的构建了。

与HTML的转换类似，浏览器会去识别CSS正确的令牌，然后将这些令牌转化成CSS节点。

❝

子节点会继承父节点的样式规则，这里对应的就是层叠规则和层叠样式表。

❞

构建DOM树的大致流程可梳理为下图：

我们这里采用上面的HTML为例，假设它有如下 css:

body {

font-size: 16px;

}

p {

font-weight: bold;

}

div {

color: orange;

}

那么最终构建出的CSSOM树如下：

有了 DOM 和 CSSOM，接下来就可以合成布局树（Render Tree）了。

构建渲染树

等 DOM 和 CSSOM 都构建好之后，渲染引擎就会构造布局树。布局树的结构基本上就是复制 DOM 树的结构，不同之处在于 DOM 树中那些不需要显示的元素会被过滤掉，如 display:none 属性的元素、head 标签、script 标签等。

复制好基本的布局树结构之后，渲染引擎会为对应的 DOM 元素选择对应的样式信息，这个过程就是样式计算。

样式计算

样式计算的目的是为了计算出 DOM 节点中每个元素的具体样式，这个阶段大体可分为三步来完成。

把 CSS 转换为浏览器能够理解的结构

和 HTML 文件一样，浏览器也是无法直接理解这些纯文本的 CSS 样式，所以当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheets。

转换样式表中的属性值，使其标准化

现在我们已经把现有的 CSS 文本转化为浏览器可以理解的结构了，那么接下来就要对其进行属性值的标准化操作。

什么是属性值标准化？我们来看这样的一段CSS：

body {

font-size: 2em;

}

div {

font-weight: bold;

}

div {

color: red;

}

可以看到上面的 CSS 文本中有很多属性值，如 2em、bold、red，这些类型数值不容易被渲染引擎理解，所以需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过程就是属性值标准化。

那标准化后的属性值是什么样子的？

从图中可以看到，2em 被解析成了 32px，bold 被解析成了 700，red 被解析成了 rgb(255,0,0)……

计算出 DOM 树中每个节点的具体样式

现在样式的属性已被标准化了，接下来就需要计算 DOM 树中每个节点的样式属性了，如何计算呢？

这其中涉及到两点：CSS 的继承规则和层叠规则。

这里由于不是本文的重点，我简单做下说明：

• CSS 继承就是每个 DOM 节点都包含有父节点的样式

• 层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称“层叠样式表”正是强调了这一点。

样式计算完成之后，渲染引擎还需要计算布局树中每个元素对应的几何位置，这个过程就是计算布局。

计算布局

现在，我们有 DOM 树和 DOM 树中元素的样式，但这还不足以显示页面，因为我们还不知道 DOM 元素的几何位置信息。那么接下来就需要计算出 DOM 树中可见元素的几何位置，我们把这个计算过程叫做布局。

绘制

通过样式计算和计算布局就完成了最终布局树的构建。再之后，就该进行后续的绘制操作了。

到这里，浏览器的渲染过程就基本结束了，通过下面的一张图来梳理下：

到这里我们已经把浏览器解析和渲染的完整流程梳理完成了，那么这其中有那些地方可以去做性能优化呢？

从浏览器的渲染过程中可以做的优化点

---

通常一个页面有三个阶段：加载阶段、交互阶段和关闭阶段。

• 加载阶段，是指从发出请求到渲染出完整页面的过程，影响到这个阶段的主要因素有网络和 JavaScript 脚本。

• 交互阶段，主要是从页面加载完成到用户交互的整合过程，影响到这个阶段的主要因素是 JavaScript 脚本。

• 关闭阶段，主要是用户发出关闭指令后页面所做的一些清理操作。

这里我们需要重点关注加载阶段和交互阶段，因为影响到我们体验的因素主要都在这两个阶段，下面我们就来逐个详细分析下。

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

完成到用户交互的整合过程，影响到这个阶段的主要因素是 JavaScript 脚本。

• 关闭阶段，主要是用户发出关闭指令后页面所做的一些清理操作。

这里我们需要重点关注加载阶段和交互阶段，因为影响到我们体验的因素主要都在这两个阶段，下面我们就来逐个详细分析下。

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-MVoIMIbw-1715895824821)]