原文地址

声明:此文带着自己的理解,不完全按原文翻译

prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕。

有了浏览器缓存,为何还需要预加载?

  • 用户可能是第一次访问网站,此时还无缓存
  • 用户可能清空了缓存
  • 缓存可能已经过期,资源将重新加载
  • 用户访问的缓存文件可能不是最新的,需要重新加载

Chrome 的预加载技术

现在的 chrome 聪明到根据你的浏览记录,预测到你可能访问或搜索哪些网站,在你打开网站之前就加载好了一些资源了。
举个栗子,当你在搜索框输入 "amaz" 时,它猜测到你可能要访问 amazon.com,可能就帮你加载了这个网站的一些资源。
如果这个预测算法精准的话,就能大大地提高用户的浏览体验了。

DNS prefetch

我们知道,当我们访问一个网站如 www.amazon.com 时,需要将这个域名先转化为对应的 IP 地址,这是一个非常耗时的过程。

DNS prefetch 分析这个页面需要的资源所在的域名,浏览器空闲时提前将这些域名转化为 IP 地址,真正请求资源时就避免了上述这个过程的时间。

<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://completion.amazon.com'>
<link rel='dns-prefetch' href='http://fls-na.amazon.com'>

应用场景1:我们的资源存在在不同的 CDN 中,那提前声明好这些资源的域名,就可以节省请求发生时产生的域名解析的时间。
应用场景2:如果我们知道用户接下来的操作一定会发起一起资源的请求,那就可以将这个资源进行 DNS-Prefetch,加强用户体验。

Resource prefetch

在 Chrome 下,我们可以用 link标签声明特定文件的预加载:

<link rel='subresource' href='critical.js'>
<link rel='subresource' href='main.css'> <link rel='prefetch' href='secondary.js'>

在 Firefox 中或用 meta 标签声明:

<meta http-equiv="Link" content="<critical.js>; rel=prefetch">

rel='subresource' 表示当前页面必须加载的资源,应该放到页面最顶端先加载,有最高的优先级。

rel='prefetch' 表示当 subresource 所有资源都加载完后,开始预加载这里指定的资源,有最低的优先级。

注意:只有可缓存的资源才进行预加载,否则浪费资源!

Pre render

前面说到的预解析DNS、预加载资源已经够强悍了有木有,可还有更厉害的预渲染(Pre-rendering)!

预渲染意味着我们提前加载好用户即将访问的下一个页面,否则进行预渲染这个页面将浪费资源,慎用!

<link rel='prerender' href='http://www.pagetoprerender.com'>

rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面,一旦我们访问这个页面,则秒开了!

在 Firefox 中或用 rel='next' 来声明

<link rel="next" href="http://www.pagetoprerender.com">

不是所有的资源都可以预加载

当资源为以下列表中的资源时,将阻止预渲染操作:

  • URL 中包含下载资源
  • 页面中包含音频、视频
  • POST、PUT 和 DELETE 操作的 ajax 请求
  • HTTP 认证(Authentication)
  • HTTPS 页面
  • 含恶意软件的页面
  • 弹窗页面
  • 占用资源很多的页面
  • 打开了 chrome developer tools 开发工具

手动触发预渲染操作

在 head 中强势插入 link[rel='prerender'] 即可:

var hint =document.createElement("link")
hint.setAttribute(“rel”,”prerender”)
hint.setAttribute(“href”,”next-page.html”)
document.getElementsByTagName(“head”)[0].appendChild(hint)

兼容性

这么好用的特性,当然要考虑各浏览器的兼容程度了(哭:

IE9 支持 DNS pre-fetching 但管它叫 prefetch。

IE10+ 中 dns-prefetch 和 prefetch 是等价的。

其他方面的测试,目前还没有很好的方案,暂且只能通过查看浏览器是否缓存来测试。

在 Chrome 中打开了 chrome developer tools 开发工具会阻止页面的预渲染,所以我们看不到这个过程,但可以在 chrome://cache/ 或 chrome://net-internals/#prerender 中查看。

Firefox 可以在 about:cache 中查看。

警告

这些特定还是实验性质的,将来可能改变。

权利越大,责任越大,不要滥用!

参考链接

html5-prefetch
MDN Controlling DNS prefetching
MDN Link prefetching FAQ

HTML5 prefetch即预加载的更多相关文章

  1. html5 app图片预加载

    function Laimgload(){} //图片预加载JS Laimgload.prototype.winHeight = function(){ //计算页面高度 var winHeight ...

  2. HTML5的页面资源预加载技术(Link prefetch)加速页面加载

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

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

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

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

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

  5. 资源预加载preload和资源预读取prefetch简明学习

    前面的话 基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用 资源优先级 在介 ...

  6. 详解HTML5中rel属性的prefetch预加载功能使用

    在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...

  7. HTML5 预加载

    原文地址: HTML5 Link Prefetching 原文日期: 2010年07月07日 翻译日期: 2013年08月13日 浏览器厂商和开发者之间共同努力的一个方向就是让网站更快.现在已有很多广 ...

  8. 黄聪:WordPress实现HTML5预加载

    WordPress实现HTML5预加载方法很简单,把下面代码: <?php if (is_archive() && ($paged > 1) && ($pa ...

  9. HTML prefetch 预加载无效的记录

    在link中新增: <link rel="prefetch" href="/view/search.html" /> 预加载会将内容缓存到浏览器, ...

随机推荐

  1. iOS中你必须了解的多线程

    多线程概念详解 什么是进程? 简单的说进程就是我们电脑上运行的一个个应用程序,每一个程序就是一个进程,并且每个进程之间是独立的,每个进程运行在其专用受保护的内存空间内(window系统可以通过任务管理 ...

  2. 你好,C++(6)2.3 C++兵器谱

    2.3  C++兵器谱 正所谓“工欲善其事,必先利其器”,而要想做好C++程序设计,自然也离不开几件像样的兵器.下面我们就来看看C++兵器谱上有哪些神兵利器值得我们学习掌握.排在兵器谱上首要位置的就是 ...

  3. bootstrapValidator Maximum call stack size exceeded

    既然validator依赖与Bootstrap3,那么表单必须使用Bootstrap的类来编写. Tip1:如果表单不是通过Bootstrap构建(即元素包含表单项且关联的label没有form-gr ...

  4. 自适应 or 移动前端页面布局的问题?

    说出来,还请各位看官不要笑 - -.哥们至今不是很清楚页面的自适应和移动前端页面开发有什么区别 .有幸哪位看官清楚这些的话,希望能不吝赐教 .A.meta        <meta name=& ...

  5. HTML&CSS基础学习笔记1.12—引入样式表

    引入样式表 我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...

  6. linux pc syncy安装问题

    linux pc 上安装syncy遇到的坑 pycurl安装可以指定curl-config,这个是根据自己机器libcurl安装位置确定,不在默认位置时要指定:python setup.py inst ...

  7. WCF消息

    1. MessageContract 序列化一个对象并生成消息的时候,希望将部分数据成员作为SOAP的报头,部分作为消息的主体.比如说,我们有一个服务操作采用流的方式进行文件的上载,除了以流的方式传输 ...

  8. IOS 播放音频流媒体

    #pragma mark - 加载播放数据 - (void)loadData:(NSString *)musicUrl { NSURL *playURL = [NSURL URLWithString: ...

  9. bzero()等的区别

    bzero  原型: extern void bzero(void *s, int n); 用法: #include <string.h> 功能:置字节字符串s的前n个字节为零.    说 ...

  10. c++命名空间using

    #include<iostream> namespace run1 { ; } namespace run2 { ; void show() { std::cout << x ...