网站性能优化整理_html/css_WEB-ITnose

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表达式，避免重定向