提高页面加载速度的方法有如下几个方面:
(一)减少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