您现在的位置是:首页 > web开发 > web性能优化学习

web性能优化学习

web开发作者:dayu日期:10天前点击:4

web性能的黄金法则‘2-5-8’

2s内得到响应,会感觉系统速度很快,5s的到响应,系统速度还是很快的,8s系统速度比较慢,还能等待,8s以上,没法等了

在web优化上减少http请求是一方面

  • 减少http请求可以从 :

1.减少图片的请求数量,对于一个网站如果用到了很多的图片,可以使用css sprites(雪碧图) 把图片集中在一张图片上,这样可以压缩大小,也减少了请求数量,在使用的时候可以使用background-position 来进行处理。

2.使用iconfont,在一些使用icon图标的情况下,可以把icon的图片换成icon font 来减少图片的http请求,对于icon font,bootstrap中也有提供,还有

Font Awesome Icons 中也提供了

3.减少css js 文件的请求,我们可以把一些通用的内容放到一个文件中,把一些小文件合并成一个文件然后进行压缩处理来减少文件的大小,这样也是可以减少请求的。

4.使用data:URL 协议使你的页面直接包含图像(内联图片) 这样也可以减少http请求,但是内联图片也优缺点,它不可以进行缓存,而且只有在IE8以上使用

  • 优化页面

1.可以使用外联样式,减少使用内联样式以及嵌入样式,使用外联样式可以更好的进行优化,也可以动态修改,对于一些兼容IE浏览器的样式,可以单独写一个文件,而不是放在同一个样式表中,这样的好处是当项目不需要兼容的时候可以更好的去除

2.同样也使用外部脚本,而不是把脚本放到任何地方

3.样式要放置在head标签中,而脚本文件要放到body的底部。因为脚本文件会阻塞加载,样式文件放在head标签中会减少页面呈现的时间,因为在加载文件的同时,也会对页面进行渲染,对于js文件中也要尽量减少直接对标签进行处理,如果要改变样式,可以通过加入className,或是删除className进行处理

  • 压缩文件

可以压缩js,css及html文件 文件来减小文件的大小,从而减小http请求的大小

web性能优化学习

原文地址:http://www.cnblogs.com/Devilwx/p/7201777.html


下一篇       上一篇