码迷,mamicode.com
首页 > 其他好文 > 详细

提高页面加载速度的方法

时间:2015-10-11 12:58:07      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

提高页面加载速度的方法有如下几个方面:
(一)减少HTTP强求
(1)增加并行连接
(2)合并资源文件:将多个小的css还有javascript文件进行合并成一个大文件,这样页面在加载页面的相关资源的时候,就会减少HTTP的请求,从而加快页面的加载速度
(3)使用CSS sprite:将整个网站上所有共用的小图片都合成一张图片,然后使用background-position进行控制所需要的图片位置.原理是虽然每次只是使用了一张小图片,但是整个图片都已经被保存到了缓存中,这样每次使用就不需要再去请求图片

sprite图片制作的网站有:http://www.spritecow.com 和http://www.spritebox.net
(二)使用CDN加速
只要有人访问你的网站,它就会从最近的一个节点取数据给他,但是这些节点所缓存的文件是不易改动的,所以最好在CDN上存放静态的文件,比如图片,字体,javascript文件,

(三)避免空的src和href属性值
比如在页面加载的过程中,有一个空的src属性的img元素被javascript动态地赋值,这样做的问题是在脚本执行之前,元素就被浏览器渲染了所以浏览器仍然会发起一个HTTP请求,虽然是一个空值,同样的空的href也会向服务器发送一个HTTP请求,这虽然不影响加载时间,但是会对服务器产生不必要的流量和压力,严重的以至于影响整个网站的用户体验,有一个简单的解决办法如下:
<a href="javascript:;" class="name"></a>
还可以按照如下方式解决:
<a href="#description" id="name"></a>
<script>
   $(‘#name‘).click(function(e){
     e.preventDefault();
   })
</script>
这样做的好处是用户在单击之前得到一些提示,而且单击之后也不会产生不必要的HTTP请求.
除此之外,空的src和href也是会产生报错的,如果在发送空属性值的时候,追踪请求头的状态(用Cookie或者其他方法),是无法追踪到状态的

(四)启用GZIP压缩
HTTP协议中有一个属性:Accept-Encoding,当显示为如下的时候表示这个请求的内容是被压缩过的:
Accept-Encoding:gzip,deflate

(五)把css放在头部,javascript放在尾部

(六)避免使用css表达式

(七)移除不使用的css语句

https://developer.yahoo.com/performance/rules.html

提高页面加载速度的方法

标签:

原文地址:http://my.oschina.net/sunshinewyf/blog/515468

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!