码迷,mamicode.com
首页 > Web开发 > 详细

网站性能优化整理

时间:2014-11-17 19:27:38      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:style   使用   sp   java   strong   on   代码   bs   html   


1.尽量减少请求数

提取公用CSS,模块化,其他的合并。Javascript也一样(可以避免页面加载阻塞)。

对页面上的小图标,背景等图片进行合并,减少请求次数。

2.减少页面体积

压缩JS

3.CSS&HTML的重构

CSS选择器不能太长,禁止使用ID选择器和!important

4.延迟加载

通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载。

原理:将图片的先用一个1*1的占位图片代替(如果占位图片能设置成真实图片的宽高是最好的)真实地址缓存在一个自定义的属性(lazy-src)中,

等到进入可视区(或距离可视区域一定范围)时,将占位图片的src换掉,真实图片开始加载。

 

优化方向

优化手段

请求数量

合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域

请求带宽

开启GZip,精简JavaScript,移除重复脚本,图像优化

缓存利用

使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,使AjaX可缓存

页面结构

将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出

代码校验

避免CSS表达式,避免重定向

 

 

 

 

 

 

 

 

 

 

 

网站性能优化整理

标签:style   使用   sp   java   strong   on   代码   bs   html   

原文地址:http://www.cnblogs.com/TiestoRay/p/2645580.html

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