URL输入到页面加载期间的性能优化总结

旧城等待， 2024-04-17 21:59 33阅读 0赞

### 目录 ###

*  为什么写这份笔记？
 *  DNS查询
 *   *  DNS是如何工作的？
     *  如何优化DNS查询？
 *  建立TCP连接
 *   *  如何优化TCP链接？
 *  HTTP请求
 *   *  如何优化HTTP的请求报文？
     *  如何优化HTTP的响应报文？
 *  首屏页面的加载
 *  浏览器解析页面
 *   *  我们主要关心浏览器对以下三类标签的处理
     *  浏览器如何解析页面的？
     *  如何优化？
 *  浏览器渲染页面
 *   *  如何优化浏览器渲染性能？
 *  附录

# 为什么写这份笔记？ #

--------------------

前端面试的时候经常会被问到：

> 1.  在浏览器中输入URL到页面加载完成发生了什么？
> 2.  如何提升网页的加载速度？

我决定整理一下从URL输入到页面显示，**这期间具体发生了什么**？并从中总结出可以优化页面加载速度的点。  
这篇文章最重要的作用是理清自己的思路，具体的原理和实现方案在本文中并不关键。

# DNS查询 #

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70]

> DNS（Domain Name Server，域名服务器）是进行域名(domain name)和与之相对应的IP地址 (IP address)转换的服务器。DNS中保存了一张域名(domain name)和与之相对应的IP地址 (IP address)的表，以解析消息的域名。

一句话来说，DNS能够根据域名找到IP地址。详见[阮一峰：DNS 原理入门][DNS]。

## DNS是如何工作的？ ##

1.  分级查询  
    DNS查询域名`www.baidu.com.root`的IP地址时，会依次查询`.root -> .com -> .baidu -> www`，最终获取IP地址
2.  缓存  
    DNS在查询域名IP地址时会先查询DNS缓存，会依次查询`浏览器DNS缓存 -> 操作系统DNS缓存 -> 路由器缓存 -> DNS服务器`  
    如果当前缓存中查询不到时，则向下一级缓存中查询，知道命中目标为止，然后返回IP地址，并且前面几级缓存会缓存这次请求DNS记录，提高下次查询的性能。

## 如何优化DNS查询？ ##

减少DNS查询，提前DNS查询。

1.  DNS预解析  
    提前进行DNS解查询，使用时直接从缓存中取。

<meta http-equiv="x-dns-prefetch-control" content="on" />
    
    <link rel="dns-prefetch" href="https://lz5z.com" />

1.  域名收敛  
    将静态资源文件放在同一个域名下，减少域名个数也就减少了进行DNS查询的次数。

# 建立TCP连接 #

--------------------

> 传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793 \[1\] 定义。  
> TCP旨在适应支持多网络应用的分层协议层次结构。 连接到不同但互连的计算机通信网络的主计算机中的成对进程之间依靠TCP提供可靠的通信服务。TCP假设它可以从较低级别的协议获得简单的，可能不可靠的数据报服务。 原则上，TCP应该能够在从硬线连接到分组交换或电路交换网络的各种通信系统之上操作。

HTTP协议是基于TCP协议的。DNS将域名解析为IP地址后，浏览器向IP地址发送TCP连接请求，也就是常说的三次握手（大学毕业后基本已忘光）。

*顺带一提，前端面试经常问TCP的断开时需要四次挥手，为什么连接时只需要三次挥手呢？  
原因是client发送发送连接/断开请求后，server端需要返回ack并返回连接/断开信息。区别在于连接时，server可以将ack和链接信息合并，但是断开时，必须ack和断开信息分别发送，因为client请求断开时，server端可能信息还没发送完，需要等待信息发送完毕后再通知client端关闭。*

需要注意的是HTTPS协议，在TCP链接之前还有一次SSL认证。  
HTTP：`HTTP -> TCP -> IP`  
HTTPS：`HTTP -> SSL/TLS -> TCP -> IP`  
[掘金：详细解析 HTTP 与 HTTPS 的区别 - 马海祥][HTTP _ HTTPS _ -]

## 如何优化TCP链接？ ##

首先我们需要了解，浏览器对一个HOST能建立大约6个TCP链接，一个TCP链接当前时刻只能处理一个HTTP请求。  
（*上面的结论不考虑HTTP2.0，不考虑HTTP1.0中的Pipelining*）

1.  Connection: keep-alive  
    HTTP1.0中每发送一个HTTP请求，都需要重新连接、断开TCP链接。HTTP1.1将`Connection: keep-alive`请求头写进了标准。也就是说第一个HTTP请求建立了TCP链接，请求结束TCP链接不会断开，接下来的HTTP请求无需再进行TCP链接。
    
    就像下面两种图展示的那样，第一次请求Initial connection和SSL都花了时间，而图二请求的时候没有花费Initial connection和SSL的时间。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 2]
2.  HTTP1.1 Pipelining（管道）  
    前面提到过一个TCP链接同一时刻只能处理一个HTTP请求。如果一个TCP能并行处理多个HTTP请求，性能肯定会更好。`Pipelining`初衷是这样的但是现实却很残酷。具体Pipelining的资料这里不做过多解释。
3.  HTTP2.0 Multiplexing  
    Multiplexing就是一个TCP链接并行处理多个HTTP请求的合理方案。  
    如下图中多个HTTP请求只占用了一个链接。  
    [HTTP/2.0 相比1.0有哪些重大改进？][HTTP_2.0 _1.0]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 3]

# HTTP请求 #

--------------------

> 这里推荐大家一本书[《图解HTTP》][HTTP]，里面对HTTP介绍的很详情，最重要的是图例比较多！看起来不吃力！毕竟大部分技术书籍还是比较枯燥的。

## 如何优化HTTP的请求报文？ ##

建立TCP链接之后，浏览器开始发送HTTP请求报文，请求报文包括：请求行、首部字段（请求首部、通用首部、实体首部）、报文主题。

1.  HTTP2.0 首部压缩（Header Compression）  
    顾名思义，这个优化就是字面意思。HTTP请求中首部字段在请求过程中会以文本形式发送，占用流量，而且HTTP请求中有部分首部字段是重复的，首部压缩后，几乎可以减少一半的大小。  
    [HTTP/2 头部压缩技术介绍][HTTP_2]
2.  合理添加Cookie  
    图片、字体等静态文件，单独使用域名来访问。与主域区分开来的目的是为了访问的时候不携带无用的Cookie。

## 如何优化HTTP的响应报文？ ##

服务端接受到请求报文后，经过一系列处理，返回信息给浏览器，返回的信息称之为响应报文。响应报文包括：状态行、首部字段（响应首部、通用首部、实体首部）、报文主题。

1.  CDN：内容分发网络  
    使用内容分发网络（CDN），缓存、共享、分发。  
    [CDN是什么？使用CDN有什么优势？][CDN_CDN]
2.  减少HTTP请求  
    HTTP1.1协议下浏览器对并发有限制，当请求过多时合并HTTP请求减少请求数，可以优化页面下载性能。  
    合并请求是老话题了，CSS spirit、代码合并等，不过由于HTTP2.0的多路复用，这些优化方案显得有些多余。
3.  GZIP压缩
    
    > GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。  
    > HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。
    
    GZIP压缩基本可以使经过webpack打包压缩后的代码再搜小50%以上。
4.  分片传输  
    分片传输，说白了就是讲一份完整的数据分成多个部分，分别后服务端请求。
    
    分片传输并没有减少数据的大小，甚至优于多次请求，总流量是偏大的。但是某些场景下是可以使用的。比如首屏是地图热力图，数据量比较大，为了让页面提前显示出来，可以先请求前20%的数据，拿到数据后就开始绘制地图。
5.  缓存  
    缓存优化主要体现在：HTTP缓存、数据缓存。
    
    HTTP缓存分为强缓存和协商缓存，请求命中强缓存时不会发送到服务端，而是直接从本地读取资源。如下图红框中内容所示，资源直接从内存（memory cache）和磁盘（disk cache）中读取。  
    [浏览器是根据什么决定「from disk cache」与「from memory cache」？][from disk cache_from memory cache]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 4]  
    数据缓存：Cookie、Senssion Storage、Local Storage  
    发送请求到服务端，服务端根据请求报文的首部字段判断资源是否有更新，如果资源没更新HTTP状态返回如下图所示为304，并从缓存中读取资源。  
    ![在这里插入图片描述][20190908185920922.png]
    
    > 如果对缓存相关的有不理解的，仔细阅读这位作者的文章：  
    > [缓存（一）——缓存总览：从性能优化的角度看缓存][Link 1]  
    > [缓存（二）——浏览器缓存机制：强缓存、协商缓存][Link 2]  
    > [缓存（三）——数据存储：cookie、Storage、indexedDB][cookie_Storage_indexedDB]  
    > [缓存（四）——离线应用缓存：App Cache => Manifest][App Cache _ Manifest]

# 首屏页面的加载 #

--------------------

关于首屏页面的优化，这个点其实比较大。网上资料很多，我的经验是搜索大厂产品的优化方案内容质量更高，比如搜索`淘宝 首屏优化`、`京东 首屏优化`等等。

> 例如：  
> [淘宝首页性能优化实践][Link 3]  
> [京东2016版首页改版前端总结][2016]

说实话我在这方面实战经验并不丰富，优化这事前期简单，越到后面就越有事倍功半的感觉，毕竟也要平衡投入产出。有时也很羡慕那些有稳定业务并对细节有要求的部门，能在某一点上深耕细作，作为技术人肯定是一件幸福的事情。

1.  服务端渲染
2.  首屏内容直出
3.  懒加载（首先加载可见内容）
4.  DOM模块缓存
5.  WebP图片格式
6.  骨架屏
7.  loading
8.  …

# 浏览器解析页面 #

--------------------

HTTP请求返回THML资源后，浏览器会对返回的资源进行解析，解析的顺序是从上至下的。

## 我们主要关心浏览器对以下三类标签的处理 ##

1.  `<link>`：CSS样式文件  
    加载样式文件时，继续解析HTML；当解析到`<script>`标签时，继续加载JS脚本文件，阻塞JS脚本文件的执行，阻塞解析HTML，直到CSS样式文件下载并执行完成；
2.  `<script>`：JS脚本文件  
    加载和执行JS脚本文件时，阻塞解析HTML；给`<script>`标签加载`async、defer`属性后，不阻塞解析HTML解析。`async`和`defer`有一些细节上的差异。这里不做说明；
3.  `<img>、<video>`：其他资源文件  
    加载资源文件，不阻塞解析HTML；

## 浏览器如何解析页面的？ ##

接下来我们在Chrome -> newwork 中将网速限制在20kb，然后做以下实验：

**实验1**

<!DOCTYPE html>
    <html lang="en">
      <head>
        <title>test</title>
        <script> var now = new Date(); console.log('head start', new Date() - now); </script>
        <script type="text/javascript"> window.onload = function() { console.log('资源加载完成', new Date() - now); }; document.addEventListener('DOMContentLoaded', function() { console.log('html 解析完成', new Date() - now); }); </script>
        <link href="https://static.daojia.com/eife/credit/static/css/my-index.bd1d850d3e7ad884e66cb627f3569654.css" rel="stylesheet" />
        <script async type="text/javascript" src="https://static.daojia.com/eife/credit/static/js/vendor.a737d57d590bada6dc54.js" ></script>
        <script> console.log('head end', new Date() - now); </script>
      </head>
      <body>
        <img src="https://avatar.csdn.net/3/5/E/3_weixin_43322208.jpg" alt="" onload="console.log('image loaded', new Date()-now)" />
        <div class="red">123</div>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 5]

1.  解析到第一个`<script>`标签，进入JS引擎并执行，控制台打印 ‘head start’；
2.  解析到第二个`<script>`标签，进入JS引擎并执行，绑定`onload`和`DOMContentLoaded`方法；
3.  解析到`<link>`标签，加载CSS文件，继续往下解析；
4.  解析到第三个`<script>`标签，有`async`属性所以异步加载JS脚本，由于上面的link标签，因此阻塞解析DOM，直到上面CSS文件加载完成后，继续解析；
5.  解析到第四个`<script>`标签，进入JS引擎并执行，控制台打印 ‘head end’；
6.  解析到`<image>`标签，加载图片，继续往下解析；
7.  DOM解析完成，执行`DOMContentLoaded`的回调，打印 ‘html 解析完成’；
8.  图片文件加载完成，打印 ‘image loaded’；
9.  CSS文件、JS文件加载完成，执行`onload`的回调，打印 ‘资源加载完成’；
10. 渲染页面；

**实验2**

<!DOCTYPE html>
    <html lang="en">
      <head>
        <title>test</title>
        <script> var now = new Date(); console.log('head start', new Date() - now); </script>
        <script type="text/javascript"> window.onload = function() { console.log('资源加载完成', new Date() - now); }; document.addEventListener('DOMContentLoaded', function() { console.log('html 解析完成', new Date() - now); }); </script>
        <link href="https://static.daojia.com/eife/credit/static/css/my-index.bd1d850d3e7ad884e66cb627f3569654.css" rel="stylesheet" />
      </head>
      <body>
        <img src="https://avatar.csdn.net/3/5/E/3_weixin_43322208.jpg" alt="" onload="console.log('image loaded', new Date()-now)" />
        <div class="red">123</div>
        <script async type="text/javascript" src="https://static.daojia.com/eife/credit/static/js/vendor.a737d57d590bada6dc54.js" ></script>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 6]

1.  解析到第一个`<script>`标签，进入JS引擎并执行，控制台打印 ‘head start’；
2.  解析到第二个`<script>`标签，进入JS引擎并执行，绑定`onload`和`DOMContentLoaded`方法；
3.  解析到`<link>`标签，加载CSS文件，继续往下解析；
4.  解析到`<image>`标签，加载图片，继续往下解析；
5.  DOM解析完成，执行`DOMContentLoaded`的回调，打印 ‘html 解析完成’；
6.  图片文件加载完成，打印 ‘image loaded’；
7.  CSS文件、JS文件加载完成并执行，然后执行`onload`的回调，打印 ‘资源加载完成’；
8.  渲染页面；

> 推荐一篇文章详细分析了[js和css的加载造成阻塞][js_css]

## 如何优化？ ##

1.  `script`标签的异步加载：`async、defer`  
    正常情况下遇到`script`标签会阻塞解析，等到JS文件加载并执行完成后，继续进行解析。异步加载的下遇到`script`加载JS文件，浏览器继续解析。
2.  避免`link`后面放`script`标签导致CSS阻塞  
    解析到`link`标签后开始下载CSS文件并继续解析，遇到内联`script`标签，需要等待CSS文件加载完毕后才会执行JS；遇到外部`script`标签，加载JS文件并等待JS、CSS文件都加载完成后才会执行JS；遇到含有`asnyc、defer`的`script`标签，加载JS文件并继续解析。
3.  `link`标签后的`<script>`标签尽量放在`<body>`底部  
    `script`标签放在底部的好处在于避免上面提到的CSS阻塞，解析`<link>`标签后开始解析body中的标签并加载其中的image、video等资源。如果`script`标签放在body头部的话，body中的资源文件就不能提前加载了。

# 浏览器渲染页面 #

--------------------

呈现引擎一开始会从网络层获取请求文档的内容（HTML），内容的大小一般限制在 8000 个块以内。  
然后进行如下所示的基本流程：  
![在这里插入图片描述][20190908224947993.png]

*  呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树。
 *  呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
 *  呈现树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。
 *  下一个阶段是绘制 - 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。

需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。

**这篇文章[浏览器的工作原理：新式网络浏览器幕后揭秘][Link 4]详细解答了浏览器的工作原理。**

如下所示WebKit 主流程详细示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 7]

`DOM Tree + Style Rules => Render Tree => Layout => Painting`

1.  DOM Tree  
    解析器的输出“解析树”是由 DOM 元素和属性节点构成的树结构。DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。  
    解析树的根节点是“Document”对象。
2.  Style Rules  
    解析CSS元素形成Style Rules，再根据CSS选择器，将样式规则附加到DOM Tree上。有些人会说这里会有一棵Style Rule Tree，我的理解是这棵树真实意义上其实是不存在的，在生成Render Tree时，DOM Tree会附加上Style Rules，这时候的Style Rules的抽象结构大家称之为Style Rule Tree。
3.  Render Tree  
    由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示，它的作用是让您按照正确的顺序绘制内容。WebKit 将渲染树中的元素称为呈现器或呈现对象。呈现器知道如何布局并将自身及其子元素绘制出来。 呈现器与DOM元素是对应的，但不是一一对应，。也就是说Render Tree和DOM Tree不是一一对应的。非可视化的DOM元素不会被插入Render Tree。CSS Rule也会影响到元素是否被插入Render Tree，`display:none`和`visibility: hidden`分别作用域A元素和B元素，他们会被插入到Render Tree吗？
4.  Layout  
    呈现器在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。
    
    HTML 采用基于流的布局模型，这意味着大多数情况下只要一次遍历就能计算出几何信息。处于流中靠后位置元素通常不会影响靠前位置元素的几何特征，因此布局可以按从左至右、从上至下的顺序遍历文档。但是也有例外情况，比如 HTML 表格的计算就需要不止一次的遍历。
5.  Painting  
    在绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。相比Layout，Painting的性能消耗更小。

## 如何优化浏览器渲染性能？ ##

**让电脑更加快速的理解你写的代码是优化，让人更加快速的理解你写的代码也是优化。** 也就是两点：性能、可读性。

很多人专注在JavaScript的优化上，其实HTML、CSS也有优化的空间。想象一下如果你拿到了一份HTML全是`<div></div>`，CSS选择器全是`.a .a .aaa`的代码吧~

针对浏览器解析页面的过程，我们可以有以下优化思路：

1.  减少DOM Tree嵌套，并不是无限制的不适用嵌套，而是不写多余的嵌套。过多的嵌套对解析性能的影响虽然微小，但是我们也要注意。而且嵌套过多会增加内存。
2.  更优雅的使用CSS选择器，提减少Rule与DOM元素匹配的时间。[如何提升 CSS 选择器性能？][CSS]
3.  减少reflow/repaint，页面渲染压力较少。 [CSS（GPU）动画优化][CSS_GPU]
4.  HTML最佳实践、CSS最佳实践、JS最佳实践（网上资料很多，但是目标是差不多的：性能和可读性。）

# 附录 #

> 1.  [阮一峰：DNS 原理入门][DNS 1]
> 2.  [掘金：详细解析 HTTP 与 HTTPS 的区别 - 马海祥][HTTP _ HTTPS _ -]
> 3.  [知乎：HTTP/2 相比 1.0 有哪些重大改进？][HTTP_2.0 _1.0]
> 4.  [《图解HTTP》][HTTP]
> 5.  [CSDN：HTTP/2 头部压缩技术介绍 - 嫩草终结者][HTTP_2]
> 6.  [知乎：CDN是什么？使用CDN有什么优势？][CDN_CDN]
> 7.  [知乎：浏览器是根据什么决定「from disk cache」与「from memory cache」？][from disk cache_from memory cache]
> 8.  [GitHub：缓存（一）——缓存总览：从性能优化的角度看缓存 - amandakelake][Link 1]
> 9.  [GitHub：缓存（二）——浏览器缓存机制：强缓存、协商缓存 - amandakelake][Link 2]
> 10. [GitHub：缓存（三）——数据存储：cookie、Storage、indexedDB - amandakelake][cookie_Storage_indexedDB]
> 11. [GitHub：缓存（四）——离线应用缓存：App Cache => Manifes - amandakelake][App Cache _ Manifest]
> 12. [云栖社区：淘宝首页性能优化实践][Link 3]
> 13. [凹凸实验室：京东2016版首页改版前端总结][2016]
> 14. [CSDN：js和css的加载造成阻塞 - 栲霓杞蛙][js_css]
> 15. [浏览器的工作原理：新式网络浏览器幕后揭秘][Link 4]
> 16. [简书：如何提升 CSS 选择器性能 - 阿树  
>     ][CSS]
> 17. [CSDN：CSS（GPU）动画优化 - 余阿良][CSS_GPU]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/869a0d160ea04d10b7a73b61b72ee592.png
[DNS]: http://www.ruanyifeng.com/blog/2016/06/dns.html
[HTTP _ HTTPS _ -]: https://juejin.im/entry/58d7635e5c497d0057fae036
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e048e2b3eef14656bd4278916c72cc9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b5f093159a414d4997b0082bab4ef4b1.png
[HTTP_2.0 _1.0]: https://www.zhihu.com/question/34074946
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f50c631ffb744ee7825d1ef9129e2e02.png
[HTTP]: https://book.douban.com/subject/25863515/
[HTTP_2]: https://blog.csdn.net/qq_32523587/article/details/79970471
[CDN_CDN]: https://www.zhihu.com/question/36514327
[from disk cache_from memory cache]: https://www.zhihu.com/question/64201378
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/931d05b4b99a41669823937300ef596e.png
[20190908185920922.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ee41d2a3a0ce4839b077a5b1a21ceecd.png
[Link 1]: https://github.com/amandakelake/blog/issues/43
[Link 2]: https://github.com/amandakelake/blog/issues/41
[cookie_Storage_indexedDB]: https://github.com/amandakelake/blog/issues/13
[App Cache _ Manifest]: https://github.com/amandakelake/blog/issues/15
[Link 3]: https://yq.aliyun.com/articles/33324
[2016]: https://aotu.io/notes/2016/12/26/jd-index-2016-summary/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/671e3d324b584a5d98c1f8e6ebf6fabc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8ae0c6416c824fb0b04285a5c07f5a40.png
[js_css]: https://www.cnblogs.com/bibiafa/p/9364986.html
[20190908224947993.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/dcaa0dec8a184faca034973826db0378.png
[Link 4]: https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Introduction
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/497c9417dae74cd5b4ccd635283954d7.png
[CSS]: https://www.jianshu.com/p/268c7f3dd7a6
[CSS_GPU]: https://blog.csdn.net/aaaaaaliang/article/details/79451341
[DNS 1]: https://blog.csdn.net/hollis_chuang/article/details/100877687