预加载、预取和其他标记

原文地址：https://python.freelycode.com/contribution/detail/1502
Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。

有多种方法可以提高Web性能（全面了解，请参阅Web性能101）。其中一种方法是预先加载您稍后需要的内容。预取CSS文件，预呈现整个页面，或者提前解析域——当真的需要时，您不必等待！听起来很酷。

更酷的是浏览器有一个简单的内置方式来完成所有这些事情。有五个标记指示浏览器预加载某些内容：

1.png

这里介绍每个标记做什么，以及何时使用它们。

preload（预加载）

告诉浏览器尽快下载和缓存资源（如脚本或样式表）。当您在加载页面几秒钟后需要该资源，并且希望加快速度时，这很有用。

下载资源后，浏览器不会对其进行任何操作。不执行脚本，不应用样式表。它只是缓存——当其他东西需要它时，它会立即可用。

语法
2.png

href指向要下载的资源。

as可以是您可以在浏览器中下载的任何内容：

style 表示样式表，

script 表示脚本，

font 表示字体，

fetch用于使用fetch（）或xmlhttpRequest下载的资源，

其他值——参见MDN上的完整列表

指定as属性很重要——它有助于浏览器确定优先级并正确安排下载。

何时使用
当您很快需要资源时就使用它。当您知道在加载页面后很快就需要资源，并且您希望更早地开始加载该资源时，会有所帮助。例如：

使用自定义字体。在外部CSS文件中，应用这些字体的@font-face规则：

3.png

默认情况下，仅在提取和应用index.css时，comic sans.woff2才开始下载。使用不用等那么长时间，而是来更快地启动下载：

4.png

您按照关键的CSS方法来划分。按照这种方法，您将把CSS分为两部分：关键部分（即时渲染所需）和非关键部分：

5.png

使用这种方法，非关键样式将仅在JavaScript开始执行时开始下载，这可能是在第一次呈现之后的几秒钟。不用等待JS执行，而是使用来更快地启动下载：

6.png

不要过度使用。预加载所有内容并不能神奇地加快网站的速度——相反，它可能会阻止浏览器智能地安排所有内容。

不要与预取混淆。如果页面加载后不需要立即使用资源，则不要使用。如果您以后才需要它——例如，下一页，请使用。

更多细节
这是强制性的。与所有其他与预加载相关的标记不同，此标记对于浏览器是必需的（如果它支持该标记）。浏览器必须下载中指定的资源。对于此处描述的其他标记，如果浏览器决定——例如，如果网络速度较慢，则可以跳过预加载资源。

优先级。对于不同类型的资源（样式、脚本、字体等），浏览器通常分配不同的优先级。这允许首先下载最重要的资源。对于使用获取的资源，浏览器使用as属性来确定其优先级。有关Chrome，请参见Chrome优先级的完整表格

2）如何找到要预加载的内容：

    ——转到devtools并运行页面加载的性能记录

    ——滚动浏览网络部分，找到阻止页面呈现但下载太晚的内容（=网络部分下载太多）。通常是CSS或JS

prefetch（预取）

要求浏览器在后台下载和缓存资源（如脚本或样式表）。下载的优先级较低，因此不会干扰更重要的资源。当您知道在后续页面上需要该资源，并且希望提前缓存该资源时，这将非常有用。

下载资源后，浏览器不会对其进行任何操作。不执行脚本，不应用样式表。它只是缓存——当其他东西需要它时，它会立即可用。

语法
7.png

href指向要下载的资源。

as可以是任何您可以在浏览器中下载的内容：

style 表示样式表，

script 表示脚本，

font 表示字体，

fetch用于使用fetch（）或xmlhttpRequest下载的资源，

其他值——参见MDN上的完整列表

指定as属性很重要，它有助于浏览器确定优先级并正确安排下载。

何时使用
将其用于其他页面的资源。如果您需要不同页面上的资源，并且希望预加载该资源并加快该页面的呈现速度，那么将有所帮助。例如:

您有一个电子商务网站，40%的用户从主页转到产品页面。使用<link rel=“prefetch”>下载负责呈现产品页面的CSS和JS文件

您有一个单页应用程序，并对其进行代码拆分，以便不同的页面加载不同的包。当用户访问某个页面时，询问路由器链接到的其他页面，并使用<link rel=“prefetch”>为这些页面预加载包。

尽可能多地使用它是安全的。浏览器通常以最低优先级调度预取，因此它们不会干扰其他资源。这意味着预取很多东西可能是安全的。请记住，虽然这仍然会使用用户的数据——并且有可能花他们的钱！

不要用于紧急资源。几秒钟后需要资源时，不要使用。在这种情况下，请改用。

更多细节
不是强制性的。浏览器不需要遵循指令。这意味着它可以决定不获取资源——例如，如果连接速度较慢。

在Chrome中的优先级。在Chrome中，下载通常以最低优先级（完整的优先级表）排序。这意味着它们通常在其他所有加载后安排。

preconnect（预连接）

要求浏览器提前执行到域的连接。当您知道很快会从那个域下载一些东西，但是不知道确切的内容，想加快初始连接的速度时，这是很有帮助的。当浏览器从新的第三方域中检索某些内容时，必须建立连接。（第三方域与应用程序所在的域不同。）当站点使用Google字体的字体、从CDN加载React或从API服务器请求JSON响应时，可能会发生这种情况。

建立新的连接通常需要几百毫秒。每个域只需要一次，但仍然需要时间。如果预先设置连接，您将节省时间并更快地从该域加载资源。

语法
8.png

href指向要解析的域名。你可以指定协议（https://domain.com）或不指定协议（https://domain.com），它的工作将相同。

何时使用
将其用于您很快需要的域。当您在第三方域上拥有重要的样式、脚本或图像时，但您还不知道资源URL时，将帮助您。例如：

您的应用程序托管在my-app.com上，它向api.my-app.com发出AJAX请求。您不知道您将向该域发出什么特定的请求——因为您是动态地从JS发出请求的。

使用<link rel=“preconnect”>提前连接到api.my-app.com，使第一个数据请求更快

您的应用程序托管在my-app.com上，它使用谷歌字体。Google字体分两个阶段加载字体：首先，从fonts.googleapis.com下载一个CSS文件；然后，该CSS文件从fonts.gstatic.com请求字体。

在从fonts.googleapis.com下载CSS文件之前，您无法知道fonts.gstatic.com中需要哪些特定的字体文件。使用<link rel=“preconnect”>提前建立连接

使用它可以稍微加快一些第三方脚本或样式。如果页面中有第三方资源，您确实需要更快地加载，请为该域添加。它将指示浏览器更快地为该域设置连接。

不要过度使用。建立和保持连接的成本很高——无论是对客户机还是服务器。最多对4-6个域使用此标记。

更多细节
不是强制性的。浏览器不需要遵循指令。这意味着它可以决定不建立新的连接——例如，如果已经建立了很多连接，或者在其他情况下。

连接过程包括什么。要连接到每个站点，浏览器必须执行以下步骤：

DNS解析。查找指定域名（google.com）的服务器IP地址（216.58.215.78）

TCP握手。执行往返（消息转到client→server→client）以启动到服务器的TCP连接

TLS握手（仅适用于HTTPS站点）。执行两次往返（消息转到client→server→client→server→client）以启动安全的TLS会话。

注意：这将随着HTTP/3的变化而改变，因为它将改进和加速连接机制。不过，这仍然很遥远。

dns-prefetch（DNS预取）

浏览器连接到新的第三方域时必须执行DNS解析。（第三方域与应用程序所在的域不同）当您的站点使用Google字体的字体、从CDN加载React或从API服务器请求JSON响应时，可能会发生这种情况。

对于每个新域，解析DNS记录通常需要大约20-120毫秒。它只影响从该域下载的第一个资源，但它仍然很重要。如果提前执行DNS解析，将节省时间并更快地加载该资源。

语法
9.png

href指向要解析的域名。你可以指定协议（https://domain.com）或不指定协议（https://domain.com），它的工作将相同。

何时使用
将其用于您很快需要的域。当您在浏览器事先不知道的第三方域上拥有一些重要资源时， 将帮助您。例如：

您的应用程序托管在my-app.com上，它向api.my-app.com发出AJAX请求。浏览器不知道您将向该域发出请求，因为您是从JS发出请求的。

使用<link rel=“dns prefetch”>解析api.my-app.com并使第一个数据请求更快

您的应用程序托管在my-app.com上，它使用谷歌字体。Google字体分两个阶段加载字体：首先，从fonts.googleapis.com下载一个CSS文件；然后，该CSS文件从fonts.gstatic.com请求字体。

浏览器不知道您将从fonts.gstatic.com加载字体，因此请使用<link rel="dns-prefetch">

使用它可以稍微加快一些第三方脚本或样式。如果页面中有第三方资源，您确实需要更快地加载，请为该域添加。它将指示浏览器更快地为该域安排DNS解析。

注意<link rel=“dns prefetch”/>和。在同一个域中使用这两个标记并不是真正有用的——已经包括了所有<link rel=“dns prefetch”/>所做的，以及更多。但是，在两种情况下，它仍然有意义：

您希望支持较旧的浏览器。从IE10和Safari 5开始支持<link rel=“dns prefetch”/>。chrome和firefox中支持<link rel=“preconnect”/>，但仅在11.1版中添加到Safari，在ie/edge中仍然不支持。如果需要支持这些浏览器，请使用<link rel=“dns prefetch”/>作为<link rel=“preconnect”/>的备用。

您希望加速4-6个以上的域。不建议在超过4-6个域中使用<link rel=“preconnect”/>，因为打开和保持连接是一项昂贵的操作。<link rel=“dns prefetch”/>更轻，因此如果您想加快速度，请将其用于其他第三方域。

更多细节
不是强制性的。浏览器不需要遵循指令。这意味着它可以决定不执行DNS解析——例如，如果已经有很多DNS解析，或者在其他情况下。

什么是DNS。Internet上的每个服务器都由一个唯一的IP地址寻址，该地址看起来像216.58.215.78。但是，当您访问一个站点时，您不会键入服务器的IP地址——您使用站点域（像google.com）。这要归功于DNS（域名系统）服务器——将域（google.com）映射到服务器IP地址（216.58.215.78）的服务器。

要解析域名，浏览器必须对DNS服务器执行请求。当您连接到一个新的第三方域时，这需要20-120毫秒。

DNS被缓存，尽管不可靠。某些操作系统和浏览器缓存您的DNS请求。如果您需要再次从第三方域中检索某些内容，这将节省时间——但不要依赖它。Linux通常根本没有DNS缓存。Chrome有一个DNS缓存，但它只能存活一分钟。Windows缓存DNS响应5天。

prerender（预渲染）

要求浏览器加载一个URL并在不可见选项卡中呈现它。当用户单击指向该URL的链接时，应该立即呈现页面。如果您确定用户下一步将访问某个特定页面，并且希望更快地呈现该页面，这将非常有用。

在2019年，尽管（或因为？）它的功能，在主要浏览器中的支持很差。查看更多详细信息。

语法
10.png

href指向要在后台呈现的URL。

何时使用
当您确定一个用户下一页会去某页时。如果您有一个转换程序，其中70%的访问者从A页转到B页，那么A页中的可能有助于快速呈现B页。

不要过度使用。在流量和内存方面，预渲染页面的成本非常高。不要将用于多个页面。

更多细节
不是强制性的。浏览器不需要遵循指令。这意味着它可以决定不执行预渲染——例如，如果内存不足，或者连接速度较慢。

Chrome不能进行完全渲染。Chrome没有完全渲染，而是进行NoState 预取以保存内存。这意味着Chrome会下载页面和所有后续资源，但不会呈现或执行JavaScript。

火狐和Safari根本不支持这个标签。这并没有破坏规范，因为浏览器不需要对标签进行操作；但这仍然是非常可悲的。火狐有一个已经开放了7年的实现缺陷，有报道说Safari也不支持它。

总结
使用：

—— 几秒钟后您需要一个资源 —— 下一页需要资源时 —— 当您知道很快就会需要一个资源，但还不知道它的完整网址 ——当您知道很快就会需要一个资源，但还不知道它的完整网址（对于旧浏览器） —— 当您确定用户将导航到某个特定页面时，您希望加快速度

这篇文章是由PerfPerfPerf带来的。我们通过加快Web应用程序的速度帮助公司获得更多收益。

有Web性能问题，或者只是想了解如何改进？我们很乐意帮忙