一、DNS预取

如果你像我一样想在网站上有一个Twitter小程序，还有网站分析，再也许一些网页字体，那么你必须要链接到一些其它域名，这意味着你将不得不引发DNS查询。我的建议通常是，不要还没有先适当的考虑性能影响就使用某个或任何一个小程序，但对于你认为确实需要的，下面的将很有用……

因为这些东西都存在于其它域名，比方说这就意味着你的网站字体CSS将会同你自己的CSS并行下载，从某种意义上说是一种好处，但是脚本将仍会阻塞（除非它们是异步的）

事实上，这里的问题是DNS查询牵涉到了第三方域名。幸运的是，有一个相当快又简单的办法来加速这个过程：DNS预取。

DNS预取所做的恰恰就是凭证领餐(on the tin)，它不能被简单实现。比方说，如果你需要请求来自widget.foo.com的资源，那么你可以通过简单的在页面的<head>里先增加下面这个来预取那个主机的DNS：

<link href="//my.domain.com" rel="dns-prefetch" />

<link href="http://my.domain.com/" rel="prefetch" /> <!– IE9+ –>

那行简单的内容将会告诉支持的浏览器去开始预取那个域名的DNS，这要稍稍早于它实际需要的时刻。它意味着DNS查询过程，在浏览器<script>元素真正请求小程序的时候就已经在进行中了。这仅仅给浏览器增加了一个很小的开头。

这种简单的链接元素（就是我在CSS魔法上用到的）完全后向兼容，而且不会忽略性能影响。将它看作是性能提升增强吧！

二、资源预取

和DNS预取一样，也可对站点需要的其它资源进行预取。为了弄清楚我们想要预取哪些资源， 首先我们需要了解浏览器通常会在什么时候以什么方式对资源发出请求。

CSS中引用的Web字体和图片表现基本相同；浏览器在碰到需要它们的HTML时开始对它们进行下载。就和我在前面提到那样，浏览器非常聪明，这又是一个例证。想象一下，浏览器一看到下面的CSS声明就开始下载其中所引用的图片：

.page--home         { background-image:url(home.jpg); }

.page--about        { background-image:url(about.jpg); }

.page--portfolio    { background-image:url(portfolio.jpg); }

.page--contact      { background-image:url(contact.jpg); }

如果浏览器不是等碰到需要这些图片的HTML再下载它们，那么访问主页就会立即下载所有这四个图片。这会造成浪费，所以浏览器一定会确保在需要这些图片时才会开始下载它们。所以，这里有个问题在于，图片下载直到很晚才会开始。

如果我们可以完全确认某个CSS图片肯定会在每个页面都会用到的话，我们就可以用个小把戏让浏览器早早下载好这个图片，无需等到让浏览器碰到需要使用该图片的HTML才开始下载。想做到这一点也非常简单，但所用的方法可能会有点糙，就看你怎么弄了。

比较糙的方法和大多数笨拙的万全之法类似，就是在每个页面放置一个隐藏的<div>，在该div中使用带有空的alt属性的<img>标签。我在CSS Wizardry项目中的精灵中就是这么干的；因为我知道，每个页面都要使用该精灵，所以我就通过在HTML中对其进行引用对它进行预取。浏览器处理内联（inline）<img>的方式非常好，浏览器会早早地对它们进行预取，所以通过让浏览器将我的精灵作为HTML中的<img>进行载入，浏览器就可以在使用需要精灵的CSS之前将其下载好。通过首先在我的HTML中引用该精灵（隐藏起来的），我就能够抢先把精灵下载好。

还有第二种方法比较“优雅”，但会让人有些困惑。它和DNS预取的例子非常相似

<link rel="prefetch" href="sprite.png">

这会显式地告诉浏览器，马上开始预取我的精灵图片，而不要考虑在它处理CSS时可能会做的任何决定。

令人感到困惑之处在于有两篇文章似乎有不同的观点；基于来自MDN的这篇文章，貌似这种预取指令只是示意浏览器仅在它空闲时才有可能会对href所指的资源进行预取。然而，与此矛盾的是，来自Planet Performance的这篇文章貌似在说，如果浏览器支持rel="prefetch"的话，它就一定会预取href中所指的资源，并没有提及是否要在浏览器空闲时才进行预取。我在WebKit的Inpsector中的瀑布图中所看到的情况是后者说得是对的，但是在打开Developer Tools的情况下（薛定谔测不准。。。）WebKit的表现及其怪异，我就观察不到预取动作的情况了，这也就是我说，我无法100%保证我说的是对的。要是谁能解释清楚这方面的情况，我将不胜感激。

我在前面说过，字体和图片表现非常相似，上面所说的规则同样也适用于字体文件，但你无法使用隐藏的<div>载入字体文件（你需要使用预取link）。

<link rel="prefetch" href="webfont.woff">

所以，基本可以这么说，我们这里所作的一切，只能算是让浏览器提前下载资源的“小把戏”而已，耍了小把戏之后，在浏览器碰到要使用CSS的时候，其中所引用的资源就早已下载好了（或者至少已经在下载中了）。 漂亮极了！

三、页面预取

和资源预取非常类似，我们也可以进行页面预取。该功能是firefox首先实现的。

<linkrel="prefetch"href="/my-next-page.htm">

页面预取的时候浏览器不但下载新的页面，而且下载该新页面所需的所有资源，并同时开始渲染该新页面（渲染过程对用户不可见），以确保整个页面包括新页面对用户是连续性呈现。

对于Chrome，使用

<linkrel="prerender"href="http://mydomain.com/my-next-page.htm">

页面预取技术目前还是有争议的，很多人认为其中最大风险是，在转到下一个页面之前进行渲染的对该新页面是否信任的问题。

转载翻译自：Speed Up Your Site Using Prefetching

采用预取（Prefetch）来加速你的网站(转)的更多相关文章

  1. 怎么看网站是否开启CDN加速？测试网站全国访问速度方法详解

    注意域名,动静分离的网站,只对静态文件的域名做了cdn 怎么看网站有没开启CDN? 要看一个网站是否开启CDN,方法很简单,只要在不同的地区ping网址就可以,比如在山东济南ping www.jb51 ...

  2. 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  3. 用CSS开启硬件加速来提高网站性能

    国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamt ...

  4. 用CSS开启硬件加速来提高网站性能（转）

    翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-cs ...

  5. 页面资源预加载(Link prefetch)功能加速你的页面加载速度

    有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清空了缓存 缓存可能已经过期,资源将重新加载 用户访问的缓存文件可能不是最新的,需要重新加载 页面资源预加载/预读取 ...

  6. cdn加速对门户网站产生的影响

    满意的用户体验是门户网站吸引和留住用户的必备条件.据统计,如果等待网页打开的时间超过8秒,将会有超过30%的用户放弃等待,造成严重的用户流失,降低了用户的体验度和忠诚度.门户网站内容涉及面多,涵盖文字 ...

  7. 使用cloudflare加速你的网站隐藏你的网站IP

    前言 cloudflare 是一家国外的 CDN 加速服务商,还是很有名气的.提供免费和付费的加速和网站保护服务.以前推荐过的百度云加速的国外节点就是和 cloudflare 合作使用的 cloudf ...

  8. 使用css来开启硬件加速来提高网站性能

    一.什么是硬件加速 硬件加速就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器,这样就可以使得animation与transition更加顺畅.我们可以在浏览器中用css开启硬件加速 ...

  9. CSS开启硬件加速来提高网站性能

    原文永久链接 CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行. 那我们怎样才可以切换到GPU模式呢, ...

随机推荐

  1. InnerHtml() 与html( )的区别

    InnerHtml() 与html( )的区别 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTM ...

  2. 2.4.1 用NPOI操作EXCEL关于HSSFClientAnchor(dx1,dy1,dx2,dy2,col1,row1,col2,row2)的参数

    NPOI教程:http://www.cnblogs.com/atao/archive/2009/11/15/1603528.html 之所有说NPOI强大,是因为常用的Excel操作她都可以通过编程的 ...

  3. /dev/null 和 /dev/zero

    1.概论 -- 来自维基的解释 /dev/null  : 在类Unix系统中,/dev/null,或称空设备,是一个特殊的设备文件,它丢弃一切写入其中的数据(但报告写入操作成功),读取它则会立即得到一 ...

  4. OFBiz：添加样式【转】

    原文地址:http://www.cnblogs.com/ofbiz/p/3205851.html 1. 打开themes文件夹,拷贝一份样式作为自己的样式更改初始样式,我这里拷贝的是flatgrey文 ...

  5. 纯CSS实现蜂窝六边形的个性相册

    概述 纯CSS实现蜂窝六边形的个性相册 详细 代码下载:http://www.demodashi.com/demo/12804.html 此案例主要用到CSS3的 transform 和 transi ...

  6. js中ip地址与整数的相互转换

    转载地址 //IP转成整型function _ip2int(ip) {    var num = 0;    ip = ip.split(".");    num = Number ...

  7. Linux命令-更新系统时间和硬件时间

    查看系统时间和时区: date 查看系统时间date -R 查看时区 修改时区: tzselect 修改时区 或 cp /usr/share/zoneinfo/Asia/Shanghai /etc/l ...

  8. beyond compare 与git diff整合

    这两天花了点时间最终在Window和Mac上把Beyong Compare和git整合好.当中遇到到非常多坑,如今把这些都分享出来.希望对大家有帮助. 首先如果你已经装好了Beyong Compare ...

  9. POJ 2750 Potted Flower （单点改动求线段树上最大子序列和）

    题目大意: 在一个序列上每次改动一个值,然后求出它的最大的子序列和. 思路分析: 首先我们不考虑不成环的问题.那就是直接求每一个区间的最大值就好了. 可是此处成环,那么看一下以下例子. 5 1 -2 ...

  10. Introduction to SIFT (Scale-Invariant Feature Transform)

    SIFT OpenCV 官方文档: https://docs.opencv.org/master/da/df5/tutorial_py_sift_intro.html https://opencv-p ...