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表达式,避免重定向 |
时间: 2024-10-27 12:17:59