浏览器资源加载优化手段

作者: wiflish 分类: 技术 发布时间: 2014-07-07 15:06 ė 6没有评论

Preloader

将css文件放在head中,js等文件尽量放到body最后面。  ie6时代的经典优化手段,目前来说不是很实用了,现代浏览器本身会做优化,把js、css尽量提前加载,图片等放到后面加载。

<html>

 <head>
 <link rel="stylesheet" type="text/css" href="">
 <script type="text/javascript"></script>
 </head>
 <body>
 <img src="">
 <img src="">
 <img src="">
 <img src="">
 <img src="">
 <script type="text/javascript"></script>
 <script type="text/javascript"></script>
 <script type="text/javascript"></script>
 </body>
</html>

 

JS异步加载lib

典型代表: requireJS,目标就是按需进行异步加载。

浏览器缓存

LocaleStorge、Cookie

 

使用Link标签(HTML5)

<link rel=”subresource” href=”http://www.test.com/jquery.js”>   subresource类型用于加载当前页面将使用(但还未使用)的资源(预先载入缓存中),拥有较高优先级;

<link rel=”prefetch” href=”http://www.test.com/123/next.html”>, 用于加载用户将会打开页面中使用到的资源,优先级较低(即浏览器不做保证它能够加载到你指定的资源),浏览器的“秒开”体验就是用这个东西了。

<link rel=”dns-prefetch” href=”//www.test.com”>,用于提前dns解析和缓存域名主机信息,下次再请求同域名的资源时能够节省dns查找时间,比如我们可以看到淘宝首页就使用了这个类型的标签。

 

ajax加载

根据业务需求,对页面进行局部加载,优先显示用户最喜欢关注的东西,再逐步加载出后续的功能。

参考

http://www.infoq.com/cn/articles/browser-resource-loading-optimization?utm_source=infoq&utm_medium=popular_links_homepage

本文出自 Wiflish's Blog,转载时请注明出处及相应链接。

本文永久链接: http://wiflish.fyard.com/archives/272

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部