页面加载速度优化

个人觉得主要是图片的优化:
1、针对小图片
a、雪碧图,将多个小图片整合在一张图片上,减少http请求次数。
b、使用icon font,可以自己设计svg图片通过阿里矢量官网https://www.iconfont.cn 下载自定义小图标,如果对小图标要求不严可直接使用阿里相近小图标。

2、如果是大图,使用阿里矢量图、雪碧图就不太合适。
a、可以使用线上资源,比如将图片上传oss服务器,直接调用oss线上链接。
b、使用熊猫压缩工具压缩图片,线上地址:https://tinypng.com/。
c、懒加载:用户进来默认加载首屏图片,后面scroll到的时候再加载。
d 、默认加载缩略图,用户点击查看后加载大图。

3、使用cnd第三方资源
页面引用的js 、图片等可以用cnd资源,比如使用jQuery可以用bootstrap 中文站提供的 cdn 静态库,链接地址为:,图片估计得用自己企业的cnd啦。

4、代码优化
css、js压缩,比如grunt工具,css、js使用外部链接,不要写在页面。如果要写在页面,css写在头部,js写在尾部。还有就是css、js代码质量,css比如float滥用、display的正确使用,即不要写一些无用的css,display:inline啦就不要width、height、margin等等。js比如:dom操作的时候选择dom最好用id,因为id是唯一的,如果用标签、class等浏览器在查找该元素时效率比较低下;将代码推迟到$(window).load方法里面,等页面加载完成后再加载js。

5、按需加载
比如有些js暂时还没用到就可以先不加载,模块化开发,只需加载用到的资源。

猜你喜欢

转载自blog.csdn.net/qq_37291064/article/details/87863868