一、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. Oracle学习(五)：多表查询

    1.知识点:能够对比以下的录屏进行阅读 SQL> --等值连接 SQL> --查询员工信息: 员工号 姓名 月薪 部门名称 SQL> select empno,ename,sal,d ...

  2. ubuntu——主题更新，Ubuntu-tweak安装

    1.首先打开终端 2.在终端中输入sudo apt-add-repository ppa:tualatrix/ppa 回车后输入密码等一会,导入密钥 3.再输入sudo apt-get update ...

  3. CRNN中英文字符识别

    代码地址如下:http://www.demodashi.com/demo/13870.html 参考GitHub源码:https://github.com/YoungMiao/crnn 应demo大师 ...

  4. 【微信支付】公众号、商户基础配置和流程（包括设置支付授权目录、测试支付目录和白名单、JS接口安全域名、授权回调域名等）

    一.使用场景以及说明 使用场景:商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 说明:1.用户打开图文消息或者扫描二维码,在微信内置浏览器打开网 ...

  5. sqlserver学习笔记（六）—— sqlserver内置函数（字符串、日期）

    sqlserver中有很多内置函数,这里总结了一些常用的 一.关于字符串的函数: 1.CHARINDEX 寻找一个指定字符串在另一个字符串中的起始位置 SELECT CHARINDEX('world‘ ...

  6. 工作总结 表单提交中 Input 设置 disabled readonly

    input框里面添加disabled属性之后,该内容就无法向上提交  需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏  也可以正 ...

  7. 在Quartus中如何使用TCL脚本文件配制管脚

    quartus软件分配管脚的方法有两种,一是选择菜单“assignments->pins”进入管脚分配视图手动分配:第二种方法是利用tcl脚本文件自动分配.这里我来介绍第二种方法. 1.生成tc ...

  8. MYSQL服务器复制配置

    首先声明:此文是在失去U盘极度郁闷的时候写的,有些零散,估计也有错误.欢迎大家指出   MYSQL服务器复制配置   这是根据我之前看的MYSQL复制的文档然后自己亲自实验的过程.配置的功能比较简单. ...

  9. Cookie/Session编码

    Unicode编码:保存中文 中文与英文字符不同,中文属于Unicode字符,在内存中占4个字符,而英文属于ASCII字符,内存中只占2个字节.Cookie中使用Unicode字符时需要对Unicod ...

  10. Q_PROPERTY介绍

    QT提供了一个成熟的属性系统,但是作为一个跨平台的且与编译器无关的库,qt不依赖于非标准的编译器功能例如 __property or [property]: QT的强大之处在于它可以支持任何标准的c+ ...