前端性能优化:资源预加载

  性能优化       2015-12-16

本文是前端性能优化系列文章之一,从预加载方面阐述前端性能优化的可能性。所有预加载技术都存在一个潜在的风险:对资源预测错误,而预加载的开销(抢占 CPU 资源,消耗电池,浪费带宽等)是高昂的,所以必须谨慎行事。

DNS-Prefetch

1、综述

在很多网站的源代码中都有一段dns-prefetch的代码,例如淘宝:

  1. <link rel="dns-prefetch" href="//g.tbcdn.cn">
  2. <link rel="dns-prefetch" href="//g.alicdn.com">
  3. <link rel="dns-prefetch" href="//gw.alicdn.com">
  4. <link rel="dns-prefetch" href="//gtms01.alicdn.com">
  5. ...

dns-prefetch便是DNS预解析;通过DNS预解析来告诉浏览器未来我们可能从某个特定的URL获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快地完成DNS解析。

2、使用

默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS-Prefetch。如果想对页面中没有出现的域进行预解析,那么就要使用显示的DNS-Prefetch了,使用link标签,如:

  1. <link rel="dns-prefetch" href="//g.cloudcdn.com">

禁止使用隐式的DNS-Prefetch,可使用下面代码:

  1. <meta http-equiv=”x-dns-prefetch-control” content=”off”>

3、优缺点

优点:当浏览器真正请求该域中的某个资源时,就无需再进行DNS解析;
缺点:多页面重复DNS预解析会增加重复DNS查询次数;

4、兼容性

(1)Chrome:Supported
(2)Safari:5+
(3)Firefox:3.5+
(4)Opera:Unknown
(5)IE:9+,名称为:Pre-resolution

5、扩展阅读

(1)数据显示典型的一次DNS解析耗费20~120毫秒,所以DNS预解析可以减少用户等待的时间;而域名解析和内容载入是串行的网络操作,并不会影响页面其他内容的加载或渲染;
(2)对于DNS的优化,除了预解析之外,另外就是减少DNS解析的数目;
(3)另外加速DNS解析的速度可以使用 pdnsd 之类的缓存DNS代理服务器;
(4)在Chrome中,可以通过输入chrome://DNS来查看一些DNS数据。

Preconnect

1、综述

Preconnect 称为“预连接”,除了进行预解析之外,还将进行TCP握手和建立传输层协议。

2、使用

可以通过以下方式进行 Preconnect:

  1. <link rel="preconnect" href="//g.cloudcdn.com">

3、优缺点

4、兼容性

(1)Chrome:46+
(2)Firefox:39+
(3)其他:不支持

5、扩展阅读

Prefetching

1、综述

Prefetching 称为“预获取”,让浏览器预先请求资源并放入浏览器缓存中。

2、使用

可以通过以下方式进行 Prefetching:

  1. <link rel="prefetch" href="/images/big.jpeg">

3、优缺点

4、兼容性

5、扩展阅读

Subresources

1、综述

这是另一种预获取方式,这种方式指定的预获取资源具有最高的优先级,在所有 prefetch 项之前进行;如果资源是当前页面必须的,或者资源需要尽快可用,那么最好使用subresource而不是prefetch

2、使用

通过以下方式使用 subresource:

  1. <link rel="subresource" href="index.css">

3、优缺点

4、兼容性

5、扩展阅读

Prerender

1、综述

prerender可以预先加载文档的所有资源。这类似于在一个隐藏的 tab 页中打开了某个链接 – 将下载所有资源、创建 DOM 结构、完成页面布局、应用 CSS 样式和执行 JavaScript 脚本等。当用户真正访问该链接时,隐藏的页面就切换为可见,使页面看起来就是瞬间加载完成一样。Google 搜索在其即时搜索页面中已经应用该技术多年了,微软也宣称将在 IE11 中支持该特性。

2、使用

通过以下方式使用 prerender:

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

3、优缺点

4、兼容性

5、扩展阅读

Preload

1、综述

2、使用

3、优缺点

4、兼容性

5、扩展阅读

问题

1、验证域名解析和内容载入是串行操作;

参考链接:

1、DNS预解析

本文最后更新于2015-12-17 19:20:23