pcie预取 不预取_HTML5链接预取

pcie预取 不预取

One effort shared by both browsers and developers is making the web browsing experience faster.  There are many common-known ways to keep your websites fast:  using CSS sprites and image optimization, using .htaccess to set file headers for longer caching, javascript file compression, using CDNs, and so on.  I've even detailed some of the website optimization efforts used on this website.  Firefox introduces a new strategy for website optimization:  link prefetching.

浏览器和开发人员共同付出的努力之一就是使Web浏览体验更快。 有许多众所周知的方法可以使您的网站保持快速运行:使用CSS Sprite图像优化 ,使用.htaccess设置文件头以进行更长的缓存 ,使用javascript文件压缩,使用CDN等。 我什至详细介绍了该网站上使用的一些网站优化工作 。 Firefox引入了一种用于网站优化的新策略:链接预取。

What is link prefetching?  From the MDN:

什么是链接预取? 从MDN

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache.

链接预取是一种浏览器机制,它利用浏览器的空闲时间来下载或预取用户可能在不久的将来访问的文档。 网页向浏览器提供一组预取提示,并且在浏览器完成页面加载后,它开始以静默方式预取指定的文档并将其存储在其缓存中。 当用户访问预取的文档之一时,可以在浏览器的缓存中快速提供该文档。

Simply put: the browser downloads designated documents (pages, images, etc.)  the user will likely visit after the current page.  It's even super easy to implement!

简而言之:浏览器将下载用户可能在当前页面之后访问的指定文档(页面,图像等)。 它甚至超级容易实现!

HTML5链接预取代码 (HTML5 Link Prefetch Tag)


<!-- full page -->
<link rel="prefetch" href="https://davidwalsh.name/css-enhancements-user-experience" />

<!-- just an image -->
<link rel="prefetch" href="https://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />


HTML5 prefetching is done via the LINK tag, specifying "prefetch" as the rel and the href being the path to the document.  Mozilla also answers to a few differently named LINK rel attributes:

HTML5预取是通过LINK标记完成的,将“ prefetch”指定为rel ,将href指定为文档的路径。 Mozilla还回答了一些不同名称的LINK rel属性:


<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />


HTTPS  fetches are also supported.

还支持HTTPS提取。

何时预取内容 (When to Prefetch Content)

Whether prefetching is right for your website is up to you.  Here are a few ideas:

预取是否适合您的网站取决于您。 这里有一些想法:

  • When a series of pages is much like a slideshow, load the next 1-3 pages, previous 1-3 pages (assuming they aren't massive).

    当一系列页面很像幻灯片时,请加载接下来的1-3页,之前的1-3页(假设它们不占很大)。
  • Loading images to be used on most pages throughout the website.

    加载要在网站上大多数页面上使用的图像。
  • Loading the next page of the search results on your website.

    将搜索结果的下一页加载到您的网站上。

防止预取 (Preventing Prefetching)

Firefox allows you to disable link prefetching with the following setting snippet:

Firefox允许您使用以下设置片段禁用链接预取:


user_pref("network.prefetch-next", false);


预取笔记 (Prefetching Notes)

A few more notes about link prefetching:

有关链接预取的更多注意事项:

  • Prefetching does work across domains, including pulling cookies from those sites.

    预取确实可以跨域工作,包括从那些站点提取cookie。

  • Prefetching can throw off website statistics as the user doesn't technically visit a given page.

    由于用户从技术上讲不会访问给定的页面,因此预取会导致网站统计数据丢失。
  • Mozilla Firefox, currently the only browser to support prefetching, has actually supported prefetching since 2003.

    Mozilla Firefox是目前唯一支持预取的浏览器,实际上自2003年以来就已支持预取。

So what do you think?  Using spare time to download extra files seems both dangerous and exciting.  Let me know your thoughts!

所以你怎么看? 使用空闲时间下载额外的文件似乎既危险又令人兴奋。 让我知道你的想法!

翻译自: https://davidwalsh.name/html5-prefetch

pcie预取 不预取

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值