共计 5488 个字符，预计需要花费 14 分钟才能阅读完成。
什么是 CRP？
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 树的大抵流程梳理为下图：
咱们以上面这段代码为例进行剖析：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title> 构建 DOM 树 </title>
</head>
<body>
<p> 森林 </p>
<div> 之晨 </div>
</body>
</html>首先浏览器从磁盘或网络中读取 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、首次申请的 HTML 资源文件、CSS 文件是会阻塞首次渲染的，因为在构建 DOM 的过程中须要 HTML 和 JavaScript 文件，在结构渲染树的过程中须要用到 CSS 文件。
这些能阻塞网页首次渲染的资源称为 要害资源。而基于要害资源，咱们能够持续细化出三个影响页面首次渲染的外围因素：
要害资源个数。要害资源个数越多，首次页面的加载工夫就会越长。要害资源大小。通常状况下，所有要害资源的内容越小，其整个资源的下载工夫也就越短，那么阻塞渲染的工夫也就越短。申请要害资源须要多少个 RTT（Round Trip Time）。RTT是网络中一个重要的性能指标，示意从发送端发送数据开始，到发送端收到来自接收端的确认，总共经验的时延。
理解了影响加载过程中的几个外围因素之后，接下来咱们就能够系统性地思考优化计划了。总的优化准则就是 缩小要害资源个数 ， 升高要害资源大小 ， 升高要害资源的 RTT 次数：
- 如何缩小要害资源的个数？一种形式是能够将
JavaScript和CSS改成内联的模式，比方上图的JavaScript和CSS，若都改成内联模式，那么要害资源的个数就由 3 个缩小到了 1 个。另一种形式，如果JavaScript代码没有DOM或者CSSOM的操作，则能够改成sync或者defer属性 - 如何缩小要害资源的大小？能够压缩
CSS和JavaScript资源，移除HTML、CSS、JavaScript文件中一些正文内容 - 如何缩小要害资源
RTT的次数？能够通过缩小要害资源的个数和缩小要害资源的大小搭配来实现。除此之外，还能够应用CDN来缩小每次RTT时长。
交互阶段
接下来咱们再来聊聊页面加载实现之后的交互阶段以及应该如何去优化。
先来看看交互阶段的渲染流水线：
其实这块大抵有以下几点能够优化：
防止 DOM 的回流。也就是尽量避免重排和重绘操作。-
缩小 JavaScript 脚本执行工夫。有时JavaScript函数的一次执行工夫可能有几百毫秒，这就重大霸占了主线程执行其余渲染工作的工夫。针对这种状况咱们能够采纳以下两种策略：- 一种是将一次执行的函数合成为多个工作，使得每次的执行工夫不要过久。
- 另一种是采纳
Web Workers。
-
DOM 操作相干的优化。浏览器有渲染引擎和JS 引擎，所以当用JS操作DOM时，这两个引擎要通过接口相互“交换”，因而每一次操作DOM（包含只是拜访DOM的属性），都要进行引擎之间解析的开销，所以常说要缩小 DOM 操作。总结下来有以下几点：- 缓存一些计算属性，如
let left = el.offsetLeft。 - 通过
DOM的class来集中扭转款式，而不是通过style一条条的去批改。 - 拆散读写操作。古代的浏览器都有渲染队列的机制。
- 放弃传统操作
DOM的时代，基于vue/react等采纳virtual dom的框架
- 缓存一些计算属性，如
正当利用 CSS 合成动画。合成动画是间接在合成线程上执行的，这和在主线程上执行的布局、绘制等操作不同，如果主线程被JavaScript或者一些布局工作占用，CSS动画仍然能继续执行。所以要尽量利用好CSS合成动画，如果能让CSS解决动画，就尽量交给CSS来操作。-
CSS 选择器优化。咱们晓得CSS 引擎查找是从右向左匹配的。所以基于此有以下几条优化计划：- 尽量不要应用通配符
- 少用标签选择器
- 尽量利用属性继承个性
CSS 属性优化。浏览器绘制图像时，CSS的计算也是消耗性能的，一些属性需浏览器进行大量的计算，属于低廉的属性（box-shadows、border-radius、transforms、filters、opcity、:nth-child等），这些属性在日常开发中常常用到，所以并不是说不要用这些属性，而是在开发中，如果有其它简略可行的计划，那能够优先选择没有低廉属性的计划。防止频繁的垃圾回收。咱们晓得JavaScript应用了主动垃圾回收机制，如果在一些函数中频繁创立长期对象，那么垃圾回收器也会频繁地去执行垃圾回收策略。这样当垃圾回收操作产生时，就会占用主线程，从而影响到其余工作的执行，重大的话还会让用户产生掉帧、不晦涩的感觉。
缓存
缓存能够说是性能优化中简略高效的一种优化形式了。一个优良的缓存策略能够缩短网页申请资源的间隔，缩小提早，并且因为缓存文件能够反复利用，还能够缩小带宽，升高网络负荷。下图是浏览器缓存的查找流程图：
浏览器缓存相干的知识点还是很多的，这里我有整顿一张图：
对于浏览器缓存的具体介绍阐明，能够参考我之前的这篇文章，这里就不赘述了。
DNS 相干优化
DNS全称 Domain Name System。它是互联网的“通讯录”，它记录了域名与理论ip 地址的映射关系。每次咱们拜访一个网站，都要通过各级的 DNS 服务器查问到该网站的服务器ip，而后能力拜访到该服务器。
DNS相干的优化个别波及到两点：浏览器 DNS 缓存和 DNS 预解析。
DNS缓存
一图胜千言：
- 浏览器会先查看浏览器缓存（浏览器缓存有大小和工夫限度），工夫过长可能导致
IP地址变动，无奈解析正确IP地址，过短就会让浏览器反复解析域名，个别为几分钟。 - 如果浏览器缓存没有对应域名，则会去操作系统缓存中查找。
- 如果还没有找到，域名就会发送到本地区的域名服务器（个别由互联网供应商提供，电信、联通之类），个别在本地区的域名服务器上都能找到了。
- 当然也可能本地域名服务器也没找到，那本地域名服务器就开始递归查找。
一般而言，浏览器解析 DNS 须要 20-120ms，因而DNS 解析可优化之处简直没有。但存在这样一个场景，网站有很多图片在不同域名下，那如果在登录页就提前解析了之后可能会用到的域名，使解析后果缓存过，这样缩短了 DNS 解析工夫，进步网站整体上的访问速度了，这就是DNS 预解析。
DNS预解析
来看下 MDN 对于 DNS 预解析 的定义吧：
X-DNS-Prefetch-Control头管制着浏览器的DNS预读取性能。DNS预读取是一项使浏览器被动去执行域名解析的性能，其范畴包含文档的所有链接，无论是图片的，CSS的，还是JavaScript等其余用户可能点击的URL。
因为预读取会在后盾执行，所以 DNS 很可能在链接对应的货色呈现之前就曾经解析结束。这可能缩小用户点击链接时的提早。
咱们这里就简略看一下如何去做DNS 预解析：
- 在页面头部退出，这样浏览器对整个页面进行预解析
<meta http-equiv="x-dns-prefetch-control" content="on" />- 通过 link 标签手动增加要解析的域名，比方：
<link rel="dns-prefetch" href="//img10.360buyimg.com" />参考
李兵「浏览器工作原理与实际」
❤️ 爱心三连击
1. 如果感觉这篇文章还不错，来个 分享、点赞、在看 三连吧，让更多的人也看到～
2. 关注公众号 前端森林，定期为你推送陈腐干货好文。
3. 非凡阶段，带好口罩，做好集体防护。
4. 增加微信fs1263215592，拉你进技术交换群一起学习 ????