前端性能优化的方法：合并、压缩、缓存或者在服务器上开启gzip之类的，目的都是为了让页面加载的更快
资源预拉取（prefetch）则是另一种性能优化的技术。通过预拉取可以告诉浏览器用户在未来可能用到哪些资源。
1、DNS prefetch:
DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析DNS。比如我们需要一个在www.funwall.cn的图 片或者视频文件。在<head>就可以这么写：
<link rel='dns-prefetch' href='//www.funwall.cn'> 当请求这个域名下的文件时就不需要等待DNS查询了。项目中有用到第三方的代码时这么做尤其有益（其他的使用场景，比如当静态资源和HTML不在 一个域上，而在CDN上；又比如在重定向前可以加上DNS prefetch)。
2、Preconnect
和DNS prefetch类似，preconnect不光会解析DNS，还会建立TCP握手连接和TLS协议（如果需要）。
<link rel='preconnect' href='http://css-tricks.com'>举个栗子：
上半张图显示了浏览器先拉html、再拉CSS并建立好CSSOM后，发现需要两个外链的字体（在fonts.gstatic.com上）,然后浏览器开始发 起两 个请求，具体来说，需要对这个域进行DNS解析、TCP和TLS握手（一个建立后可以复用给另一个连接）。
<link href='https://fonts.gstatic.com' rel='preconnect'c rossorigin>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700|Open+Sans' rel='stylesheet'>3、Prefetch
当能确定网页在未来一定会使用到某个资源时，开发者可以让浏览器提前请求并且缓存好以供后续使用。prefetch支持预拉取图片、脚本或者任何可 以被浏览器缓存的资源
<link rel='prefetch' href='image.png'>prefetch很适用于优化webfonts的性能。以前，字体文件必须等DOM和CSSOM创建好后才能下载，可如果prefetch了字体，这个瓶颈就能轻松解决 了。Prefetch没有同域的要求
4、subresource
subresource可以用来指定资源是最高优先级的。比如，在Chrome和Opera中我们可以加上下面的代码
<link rel='subresource' href='style.css'> 所以，如果资源是在当前页面需要，或者马上就会用到，则推荐用subresource，否则还是用prefetch
5、prerender
prerender是一个重量级的选项，它可以让浏览器提前加载指定页面的所有资源
<link rel='prerender' href='/nextpage.html'>但是要注意，一定要在十分确定用户回点某个链接时才用这个特性，否则客户端就会无端的下载很多资源和渲染这个页面
转载连接：http://blog.csdn.net/franktaoge/article/details/51473823
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
