Max—— 前端攻城狮 's Blog

A Simple pure blog generated by jekyll

HTML5预解析标签和预加载标签

<< Back

HTML5预解析预加载

1.预解析

DNS的的解析成本很高,往往导致了网站加载速度慢。现在浏览器针对这个问题开发了更智能的处理方式,它将域名缓存后,当用户点击其它页面地址后自动的获取。如果你希望预先获取NDS,你可以控制你的浏览器来解析域名,例如:

<link rel="dns-prefetch" href="http://huodong.kugou.com">
<link rel="dns-prefetch" href="http://www.gbin1.com">
<link rel="dns-prefetch" href="http://m.gbin1.com">
<link rel="dns-prefetch" href="http://s.gbin1.com">

	

2.预加载

预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源,当用户访问这个预加载的链接时,如果它已经被预加载在缓存中,页面就可以毫秒级快速呈现。

<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />

	

在Chrome中,预加载使用 <link>标签,并指定 rel="prefetch" 属性,而href属性就是需要预加载的文件路径。

关于预加载,有如下注意事项:

  • 预加载可以跨域进行,当然,请求时cookie等信息也会被发送。
  • 预加载可能破坏网站统计数据,而用户并没有实际访问。

3.预渲染

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

<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />
<link rel="prerender" href="http://huodong.kugou.com/2014" />

	

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

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

参考五个HTML5新特性

参考探讨HTML5的预加载功能prefetch

发表于: 24 Jul 2015