不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch)。 页面资源预加载/预读取(Link prefetch)是什么?来自MDN的解释:
简单说来就是:让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面,图片,视频等)。而且方法超级的简单! HTML5页面资源预加载(Link prefetch)写法<!-- 预加载整个页面 --> <link rel="prefetch" href="http://www./misc/3d-album/" /> <!-- 预加载一个图片 --> <link rel="prefetch" href=" http://www./wordpress/ wp-content/uploads/2014/04/b-334x193.jpg " /> HTML5页面资源预加载/预读取(Link prefetch)功能是通过 <link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" /> <link rel="next" href="2.html" /> HTTPS协议资源下也可以使用prefetch。 什么情况下应该预加载页面资源在你的页面里加载什么样的资源,什么时候加载,这完全取决于你。下面是一些建议:
禁止页面资源预加载(Link prefetch)火狐浏览器里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能,你可以这样设置: user_pref("network.prefetch-next", false); 页面资源预加载(Link prefetch)注意事项下面是一些关于页面资源预加载(Link prefetch)的注意事项:
利用浏览器空闲时间加载一些额外的资源文件,看起来是既刺激又危险,你想试试这些技术吗? |
|