本文介绍了预取技术，包括DNS预取、链接预取和预渲染，以提升网页性能和用户体验。DNS预取能提前解析域名，减少等待时间；链接预取可预先加载预测用户可能访问的资源；预渲染则会完整创建用户可能前往的页面。开发者应基于用户行为和网站内容智能使用预取技术，以提高网站性能。
pcie预取 不预取
This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.
本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
In this article, I’ll discuss prefetching, what it is, and how developers can use it to wow visitors with high-performance websites.
在本文中，我将讨论预取，它是什么以及开发人员如何使用它来使高性能网站的访问者惊叹。
什么是预取？ (What Is Prefetching?)
Although optimizing a website for initial page load is great, for the highly interactive websites users expect today, this might not be enough.
尽管为初始页面加载而优化网站非常好，但是对于当今用户期望高度互动的网站，这可能还不够。
What if browsers knew which link users were about to click, or which page they were about to visit next, so that content could automagically appear on their screen at the speed of light?
如果浏览器知道用户将要单击哪个链接，或者他们接下来将要访问哪个页面，从而内容可以以光速自动显示在他们的屏幕上，该怎么办？
Well, browsers can do that now. In fact, some major browsers are smart enough to make these kinds of guesses based on visitors’ browsing patterns, document markup and structure, the user’s device, connectivity, etc. Therefore, browsers already try to anticipate the resources needed to build the page visitors are likely to access, get those resources ready and display the page at warp speed when users request it. However, developers can use their knowledge of the website or web application to help browsers single out those crucial resources more accurately.
好吧，浏览器现在可以做到这一点。 实际上，一些主要的浏览器足够聪明，可以根据访问者的浏览模式，文档标记和结构，用户的设备，连接性等做出此类猜测。因此，浏览器已经在尝试构建页面访问者所需的资源。可能会访问，准备好这些资源并在用户请求时以翘曲的速度显示页面。 但是，开发人员可以利用他们对网站或Web应用程序的了解来帮助浏览器更准确地挑选出这些关键资源。
This is what prefetching is, a hint for browsers to foresee users’ every browsing wish and make it come true in a snap.
这就是预取，这是浏览器的一个提示，可以预见用户的每一个浏览愿望，并使它们Swift实现。
You can find prefetching in the Resource Hints specification led by Ilya Grigorik.
您可以在Ilya Grigorik领导的Resource Hints规范中找到预取。
In what follows, I’m going to discuss:
接下来，我将讨论：
- DNS-prefetching DNS预取
- Link/Resource prefetching 链接/资源预取
- Prerendering (Page prefetching) 预渲染(页面预取)
DNS预取 (DNS-Prefetching)
The internet is a network of computer-readable IP addresses (e.g., 87.87.87.87) that are referenced by human-readable hostnames (e.g., yoursite.com). DNS is the protocol that converts hostnames into IP addresses.
互联网是由人类可读的主机名(例如yoursite.com)引用的计算机可读IP地址 (例如87.87.87.87)的网络。 DNS是将主机名转换为IP地址的协议。
Each time the browser makes an HTTP request for a resource on a different domain, it can spend a few milliseconds to resolve the domain to the associated IP address.
每次浏览器对不同域上的资源进行HTTP请求时，浏览器都会花费几毫秒的时间将域解析为关联的IP地址。
If a website has a Twitter or Facebook widget, Google Analytics, and perhaps one or two custom web fonts, then it must have links to other domains. This makes DNS lookups unavoidable.
如果网站具有Twitter或Facebook小部件，Google Analytics(分析)，并且可能具有一种或两种自定义网络字体，则它必须具有指向其他域的链接。 这使得DNS查找不可避免。
DNS prefetching helps to decrease waiting time for visitors because the browser performs DNS lookups before it sends a request for resources located on other domains.
DNS预取有助于减少访问者的等待时间，因为浏览器在发送对其他域资源的请求之前会执行DNS查找。
So, let’s say developers know a website will make a request to somewidget.example.com. They can drop a hint for the browser suggesting it to go ahead and prefetch that hostname’s DNS by adding a rel attribute to the link with the value of dns-prefetch, like this:
因此，假设开发人员知道一个网站将向somewidget.example.com发出请求。 他们可以向浏览器添加提示，建议浏览器继续进行操作，方法是在链接中添加rel属性，并使用dns-prefetch的值来预取该主机名的DNS，如下所示：
<link rel="dns-prefetch" href="//somewidget.example.com">Now, when the request to somewidget.example.com takes place, the browser has already performed the DNS lookup ahead of time and users get the results delivered a bit sooner.
现在，当对somewidget.example.com的请求发生时，浏览器已经提前执行了DNS查找，并且用户可以更快地获得结果。
Browser support for DNS-prefetch at this time is present in all major desktop browsers. When support for DNS-prefetching is lacking, browsers simply retrieve resources in the usual way. No big deal.
目前，所有主要的台式机浏览器都支持DNS预取的浏览器。 当缺少对DNS预取的支持时，浏览器仅以通常的方式检索资源。 没什么大不了的。
What if the browser never requests the DNS-prefetched resource? Thankfully, DNS-prefetching is not a costly operation, since it doesn’t send more than just a few hundred bytes over the network. Once again, no harm done.
如果浏览器从不请求DNS预取的资源怎么办？ 幸运的是，DNS预取并不是一项昂贵的操作，因为它在网络上发送的不仅仅是数百个字节。 再一次，没有伤害。
链接预取 (Link Prefetching)
According to the spec, link prefetching …
根据规范 ，链接预取...
is used to identify a resource that might be required by the next navigation, and that the user agent SHOULD fetch, such that the user agent can deliver a faster response once the resource is requested in the future.
用于标识下一个导航可能需要的资源，并且应该获取用户代理，以便将来一旦请求该资源，用户代理就可以传递更快的响应。
In other words, if developers have grounds to assume users are likely to visit a specific web page and know the browser needs some critical resources to deliver it, they can use the prefetch directive. This points the browser towards the resources it should fetch before users actually navigate to that page.
换句话说，如果开发人员有理由假设用户可能会访问特定的网页，并且知道浏览器需要一些关键资源来交付该网页，则他们可以使用prefetch指令。 这使浏览器指向在用户实际导航到该页面之前应获取的资源。
Keep in mind that prefetching only works with cacheable resources, such as JavaScript, images and so on. Here’s what the code looks like:
请记住，预取仅适用于可缓存资源，例如JavaScript，图像等。 代码如下所示：
<link rel="prefetch" href="//example.com/future-image.jpg">The browser now knows that the future-image.jpg image is going to be needed soon, so it can prefetch it and store it locally in the cache. At that point, because the browser will have already done the time-consuming work of downloading the resource in the background, the benefit of this technique consists in super-fast rendering as soon as users click to access the relevant page requiring future-image.jpg.
现在，浏览器知道将很快需要future-image.jpg图像，因此它可以预取并将其本地存储在缓存中。 到那时，由于浏览器已经完成了在后台下载资源的耗时工作，因此该技术的优势在于，一旦用户单击访问需要future-image.jpg的相关页面，就可以进行超快速渲染future-image.jpg 。
Link prefetching is great at creating the perception of a fast-loading website, but it’s a much more expensive operation than DNS-prefetching. If users never access the page which needs the prefetched asset, the browser will have downloaded unnecessary data and clogged up its cache.
链接预取可以很好地创建快速加载的网站，但它比DNS预取要昂贵得多。 如果用户从不访问需要预取资产的页面，则浏览器将下载不必要的数据并阻塞其缓存。
At the time of writing, link prefetching is supported by the latest versions of Chrome, Firefox, IE/Edge and Opera. Non-supporting browsers will simply ignore the hint.
在撰写本文时， 最新版本的Chrome，Firefox，IE / Edge和Opera支持链接预取。 不支持的浏览器将仅忽略提示。
页面预取/预呈现 (Page Prefetching/Prerendering)
Implementing page prefetching or prerendering is just a matter of adding the prerender directive inside a link’s rel attribute, like this:
只需在链接的rel属性内添加prerender指令即可实现页面预取或预呈现，如下所示：
<link rel="prerender" href="//example.com/future-page.html">Prerendering goes all the way and literally creates an invisible version of the entire page users are likely to go to next, including applying CSS and executing JavaScript. As soon as users click on the relevant link, the ghost page instantly materializes before their eyes, replacing the old content.
预渲染一直进行到整个过程，并从字面上创建了用户可能会转到下一步的整个页面的不可见版本，包括应用CSS和执行JavaScript。 用户单击相关链接后，幻影页面会立即出现在他们眼前，从而替换了旧内容。
If link prefetching can be an expensive operation, prerendering is even more so. In this case, browsers download an entire web page and all its resources on the basis of an expectation that users will visit that page, which ultimately may or may not happen.
如果链接预取可能是一项昂贵的操作，那么预渲染就更是如此。 在这种情况下，浏览器会根据用户可能会访问该页面的期望来下载整个网页及其所有资源。
At this time, prerendering is supported in IE/Edge, Chrome and Opera.
目前，IE / Edge，Chrome和Opera中支持预渲染。
链接预取和预呈现的用例 (Use Cases for Link Prefetching and Prerendering)
Since both link prefetching and (to a greater extent) prerendering don’t come cheap, having a definite idea of when it’s suitable to implement them on a web page is important.
由于链接预取和(在更大程度上)预呈现都不便宜，因此，确定何时在网页上实现它们很重要。
Devs who plan on using resource hints should do so when they have solid grounds for assuming which resources to prefetch or prerender based on the website’s content, users’ behavior, analytics, etc.
计划使用资源提示的开发人员应该在基于站点的内容，用户的行为，分析等来假设要预取或预呈现哪些资源的基础上这样做。
The Resource Hints spec indicates a number of use cases where link prefetching could benefit user experience:
资源提示规范指出了许多用例 ，其中链接预取可以使用户体验受益：
- Search results — It’s reasonable to assume users are interested in those results, therefore it’s likely they’re going to click the links leading to the content they’re after. 搜索结果-假设用户对这些结果感兴趣是合理的，因此，他们很可能会单击指向所关注内容的链接。
- Paginated content — Once users are reading the first page of a multi-page article, it’s not too far-fetched to assume they’re going to click the link that lands them on the next page. 分页内容-用户阅读多页文章的第一页时，假设他们要单击将其链接到下一页的链接并不太牵强。
- Image galleries — Google devs use prefetching on Picasa Web Albums. If users are viewing a photo, developers are justified in guessing that the next photo is also going to be accessed, so they instruct the browser to download it as soon as possible. 图像库-Google开发人员在Picasa网络相册上使用预取。 如果用户正在查看照片，开发人员有理由猜测下一张照片也将被访问，因此他们指示浏览器尽快下载它。
Similarly, Santiago Valdarrama offers some helpful tips on when developers could reasonably consider implementing prerendering on a website:
同样，圣地亚哥·瓦尔达拉玛(Santiago Valdarrama)提供了一些有用的提示，提示开发人员何时可以合理地考虑在网站上实施预渲染：
When deciding whether to prerender entire pages ahead of time, consider that Google prerenders the top results on its search page, and Chrome prerenders pages based on the historical navigation patterns of users. Using the same principle, you can detect common usage patterns and prerender target pages accordingly. You can also use it, just like resource prefetching, on questionnaires or surveys where you know users will complete the workflow in a particular order.
在决定是否提前渲染整个页面时，请考虑Google渲染其搜索页面上的顶部结果，Chrome则根据用户的历史导航模式来渲染页面。 使用相同的原理，您可以检测到常见的使用模式并相应地预渲染目标页面。 就像资源预取一样，您也可以在问卷调查或调查中使用它，您知道用户将按特定顺序完成工作流程。
资源资源 (Resources)
If you’d like to dig deeper, the following resources are a must-read:
如果您想更深入地研究，则必须阅读以下资源：
Front-end performance for web designers and front-end developers
结论 (Conclusion)
DNS-prefetching, link prefetching and prerendering are powerful optimization techniques. If implemented responsibly, on the basis of the knowledge developers have of web content and user behavior, prefetching can considerably improve user experience.
DNS预取，链接预取和预呈现是强大的优化技术。 如果负责任地实施 ，则基于开发人员对Web内容和用户行为的了解，预取可以大大改善用户体验。
翻译自: https://www.sitepoint.com/lightning-fast-websites-prefetching/
pcie预取 不预取
1392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
