html 页面预加载,HTML5前端性能优化

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip压缩等，这使得页面加载更快。

现在，有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。而在HTML5里，出现了一个新的用来优化网站速度的新功能：页面资源预加载/预读取(Link prefetch)。

什么是资源预加载：预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面使用到，一些可能在将来的某些页面中被使用。作为开发人员，我们比浏览器更加了解我们的应用，所以我们可以对我们的核心资源使用该技术。

简单说来就是：让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面，图片，视频等)。

HTML5页面资源预加载(Link prefetch)写法1

2

3

4

5

6

HTML5页面资源预加载/预读取(Link prefetch)功能是通过Link标记实现的，将rel属性指定为“prefetch”，在href属性里指定要加载资源的地址。火狐浏览器里还提供了一种额外的属性支持：1

2

3

title="Designed for Mozilla" href="mozspecific.css" />

什么情况下应该预加载页面资源

在你的页面里加载什么样的资源，什么时候加载，这完全取决于你。下面是一些建议：当页面有幻灯片类似的服务时，预加载/预读取接下来的1-3页和之前的1-3页。

预加载那些整个网站通用的图片。

预加载网站上搜索结果的下一页。

页面资源预加载(Link prefetch)注意事项

下面是一些关于页面资源预加载(Link prefetch)的注意事项：预加载(Link prefetch)不能跨域工作，包括跨域拉取cookies。

预加载(Link prefetch)会污染你的网站访问量统计，因为有些预加载到浏览器的页面用户可能并未真正访问。