pcie预取不预取_浏览器资源提示预取，预连接和预渲染

pcie预取不预取

It used to be that if we wanted to optimize our frontend assets, we would concatenate, minify, gzip etc. Don't get me wrong, we still do these things. Just that nowadays there are more steps we could take to increase performance on the frontend.

过去，如果我们要优化前端资产，我们将进行连接，缩小，gzip等。不要误会我，我们仍然会做这些事情。只是如今，我们可以采取更多措施来提高前端性能。

Resource hinting just like the name implies send hints to the browser "What Resource to get next?"

资源提示就像其名称所暗示的那样，将提示发送给浏览器“接下来要获得什么资源？”。

One of "these steps" we could take is called Resource Hinting. Resource hinting just like the name implies send hints to the browser "What Resource to get next?". Basically, we tell the web browser to load a particular resource before a user needs it. This can help us avoid DNS lookups, TCP connections, HTTPS handshakes etc.

我们可以采取的“这些步骤”之一称为资源提示 。就像名称所暗示的那样，资源提示将提示发送给浏览器“ 下一步要获取什么资源？ ”。基本上，我们告诉Web浏览器在用户需要之前加载特定资源。这可以帮助我们避免DNS查找，TCP连接，HTTPS握手等。

Currently, there are four official ways to do this: preconnect, prefetch, dns-prefetch, prerender. Not in any particular order, we will start with DNS prefetching.

当前，有四种官方方法可以做到这一点： preconnect ， prefetch ， dns-prefetch ， prerender 。并非以任何特定顺序，我们将从DNS预取开始。

DNS预取 ( DNS Prefetching )

If you have a website, odds are you have Google analytics or some other form of third-party analytics installed on your site.

如果您有网站，则很可能在网站上安装了Google Analytics（分析）或某种其他形式的第三方分析。

Not just analytics, anything that involves installing third-party script is overhead due to extra HTTP call(s). This also includes facebook widgets, twitter follow button widget, AD snippets, etc.

不仅是分析，由于额外的HTTP调用，涉及安装第三方脚本的任何事情都会增加开销。这也包括facebook小部件，twitter跟随按钮小部件，AD片段等。

NOTE: Third Party in this context involves anything that comes from another domain, even if it is your subdomain. The resource is not a link pointing to a blog post, but rather a link pointing to an image, a css file, JavaScript file, html file etc.

注意：在这种情况下，第三方涉及来自另一个域的任何内容，即使它是您的子域。该资源不是指向博客文章的链接，而是指向图像，css文件，JavaScript文件，html文件等的链接。

With DNS prefetching, we can tell the browser to perform a DNS lookup on the domains of these third party scripts, and when we finally make a request, we get only the file since we've already carried out DNS lookup before hand.

通过DNS预取， 我们可以告诉浏览器在这些第三方脚本的域上执行DNS查找 ，并且当我们最终发出请求时，由于我们已经预先进行了DNS查找，因此仅获得文件。

Doesn't sound like much right? Wrong, a DNS lookup can take as much as 1 - 3 seconds or higher in weird situations. Now, imagine you have at least 3 of this type of resource on your page. It means your website will be slow, and users hate slow websites.

听起来不太对吗？错误的是，在怪异的情况下，DNS查找可能需要1-3秒或更长时间。现在，假设您的页面上至少有3种此类资源。这意味着您的网站运行缓慢，用户讨厌缓慢的网站。

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

To let the browser prefetch a domain DNS, you can add this little snippet to your website's <head> tag.

要让浏览器预取域DNS，您可以将此小片段添加到网站的<head>标记中。

<link rel="dns-prefetch" href="http://example.com">

The href should only point to the domain of the resource and not to the resource itself. Now, when the browser comes across this <link tag on the page, it immediately starts performing a DNS lookup in the background, and when the resource gets called only a download is required, no more DNS lookup.

href仅应指向资源的域，而不是资源本身。 现在，当浏览器遇到页面上的该<link标记时，它将立即开始在后台执行DNS查找，并且当资源被调用时，只需要下载即可，不再进行DNS查找。

For browser support, DNS Prefetching has a large reach on desktop browsers, but still lacking when it comes to mobile browsers and of course older IE versions.

对于浏览器支持，DNS预取在台式机浏览器上具有很大的覆盖范围，但在移动浏览器（当然还有较旧的IE版本）上仍然缺乏。

DNS预取的SpeedTest (SpeedTest for DNS Prefetching)

For this test we create two HTML pages that load a twitter follow button widget. One page will use dns-prefetch and the other wont use it. Also, using chrome's inbuilt speed throttling, reduce the speed to 1Mbps and load both pages.

对于此测试，我们创建了两个HTML页面，它们加载了一个Twitter Twitter Follow按钮小部件。一页将使用dns-prefetch ，另一页将不使用它。另外，使用chrome的内置速度限制功能，将速度降低到1Mbps并加载两个页面。

Here is the result without dns-prefetch on this page.

这是此页上没有dns-prefetch的结果。

With dns-prefetch on this page.

在此页面上使用dns-prefetch 。

预连接 ( Preconnect )

Taking DNS prefetching a bit further, preconnect is basically dns-prefetch on steroids. If the domain you enabled prefetching for uses HTTPS, preconnect allows you to not only perform DNS lookups but also resolve TCP roundtrips, TLS negotiations etc.

进一步进行DNS预取， 预连接基本上是对类固醇的dns-prefetch 。如果启用了预取的域使用HTTPS，则预连接不仅可以执行DNS查找，还可以解决TCP往返，TLS协商等问题。

If you thought DNS lookups were slow, TLS negotiations are slower as they involve a to and fro movement of SSL certificates for verification.

如果您认为DNS查找很慢，则TLS协商会比较慢，因为它涉及SSL证书的来回移动以进行验证。

Enabling preconnect is simple, you just have to add a link tag with rel of preconnect and href pointing to the domain where the resource is hosted.

启用预连接很简单，您只需要添加一个带有rel preconnect和href的链接标记即可指向托管资源的域。

<link rel="preconnect" href="https://cdn.example.com">

Preconnect is still lacking currently when it comes to browser support as only a few browsers support it. So, for now at least, only use DNS prefetching.

当前，在浏览器支持方面仍然缺少预连接，因为只有少数浏览器支持它。因此，至少到目前为止，仅使用DNS prefetching 。

预取 ( Prefetching )

This allows you to go get an entire resource. For example, a font, an image. With prefetching, we can download and kept image in the browsers cache, and when the request for the file is made, the browser just looks in its cache and serves the file.

这使您可以获取整个资源。 例如，字体，图像。通过预取，我们可以将图像下载并保存在浏览器的缓存中，并且在请求文件时，浏览器只是在其缓存中查找并提供文件。

<link rel="prefetch" href="/path/to/resouce/image.png">

Currently, its implementations are not consistent. Take Firefox for example, it will only prefetch resources only when the browser is idle

当前，其实现方式不一致。以Firefox为例，它仅在浏览器空闲时才预取资源

But for browser support, only a few mobile browsers and the new internet explorer (not edge, Safari) don't support prefetching.

但是对于浏览器支持，只有少数移动浏览器和新的Internet Explorer（而不是Edge，Safari）不支持预取。

预渲染 ( Prerendering )

Prerendering lets us download an entire webpage and all its resources and cache it. With prerendering, the DOM is created, the page is laid out, css applied, JavaScript executed, etc. With the use of Page visibility api we can prevent the executed JavaScript from affecting the user's experience.

通过预渲染，我们可以下载整个网页及其所有资源并进行缓存。 通过预渲染，可以创建DOM，布局页面，应用CSS，执行JavaScript等。通过使用页面可见性api，我们可以防止执行JavaScript影响用户的体验。

This is edge case, and should be used mostly when your user has a slow connection or when you are absolutely sure that your user will click on that link.

这是一种极端情况，应在用户连接速度缓慢或您完全确定用户将单击该链接时使用。

Prerendering makes loading a link instant, similar to searching with Google instant.

通过预渲染，可以立即加载链接，类似于使用Google Instant搜索。

To preload a page, just add this <link> tag to the page.

要预加载页面，只需将此<link>标记添加到页面。

<link rel="prerender" href="http://example.com">

Note: this will download the entire page.

注意：这将下载整个页面。

This has the worst browser support and should be used sparingly (at least for now).

这对浏览器的支持最差，应谨慎使用（至少目前如此）。

提示概率 ( Hint Probability )

Since we are not sure what a user does on the page, we could guess. For example, if a user scrolls past a certain part of the page, we could increase the probability of prerendering the next navigation page.

由于我们不确定用户在页面上的操作，因此可以猜测。例如，如果用户滚动到页面的特定部分，则可以增加预渲染下一个导航页面的可能性。

To set a probability, we need to add a new pr attribute to the link tag with the value. The value for probability is a float ranging from 0 - 1.0.

要设置概率，我们需要使用该值向链接标签添加新的pr属性。概率值是从0到1.0的浮动范围。

<link rel="prerender" href="//example.com/page/2" pr="0.42">

注意 (Note)

This is just for a twitter button and bootstrap css on a CDN. A normal page could have more than that.

这仅适用于CDN上的Twitter按钮和引导CSS。普通页面可能不止这些。

结论 ( Conclusion )

This is total speculation, and I don't have any tests or proof to back this up, but it seems only logical, loading too many widgets on your page will definitely slow down your website as will hinting at too many resources. Everything should be done in moderation.

这完全是猜测，我没有任何测试或证据可以证明这一点，但似乎合乎逻辑，在页面上加载太多小部件肯定会减慢您的网站的速度，暗示有太多资源。一切都应适度进行。

In closing, predicting what a user does next is almost impossible, but it doesn't hurt to try, right?

最后，预测用户下一步做什么几乎是不可能的，但是尝试尝试并没有什么坏处吧？

To learn more about Resource hinting check out the W3 document.

要了解有关资源提示的更多信息，请查看W3文档。

翻译自: https://scotch.io/tutorials/browser-resource-hinting-with-prefetch-preconnect-and-prerender

pcie预取不预取