1、减少HTTP请求
(1)雪碧图(CSS Sprites)
就是把多张图合到一张图里面,然后通过CSS来分别取用。这样就可以减少请求数量。
(2)合并多个脚本和样式表
但这种方式有一个弊端,对于只想访问该网站的某一两个页面的人群来说,反而增大了下载量。
(3)合理设置缓存
可以在下次访问时减少部分请求,直接在缓存中读取。
(4)懒加载(Lazy Load)
只加载可见的部分。
先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
2、减少对DOM节点的操作
操作DOM节点时会引发重绘和回流,非常消耗性能。所以我们要尽量合并多次操作。
3、将JS脚本置底
JS的下载会阻止后面DOM树的构建,所以JS代码会截断首屏内容。
4、将样式表放在头部
如果把CSS放在body,浏览器还未解析样式就开始渲染,用户体验会很差。
5、使用CDN加速
CDN内容分发网络,是一组分布在多个不同地理位置的服务器,存放一些静态文件。当用户请求服务器时,服务器会根据用户地点为其分配最近的CDN以减少传输时间。
6、精简CSS选择器路径
浏览器对选择符的解析是从右往左进行的。
7、较小的图片可以转化为base64格式来显示
对于较小的图片,可以转化为base64格式写到JS或CSS文件中以减少HTTP请求。
8、不要滥用float
float的布局计算比较消耗性能。推荐使用固定布局或弹性布局。
9、预加载
对于一些大型游戏页面等可以增加一个loading页面,等待资源加载完毕再显示主页面。