在项目中遇到一个情况 就是我的页面的图片很多,并且都是很大的图片 并且有的图片是背景插进去的有的是img链接进去的 图片加载的速度很慢 请问怎么优化
这里重点说图片部分的优化。
首先尝试优化图片大小,裁尺寸,降质量,根据颜色多少或者透明度情况等选择jpg,png8,png32等。当然如果不考虑兼容性可以上webp。
然后按需加载,根据不同屏幕状况提供不同的图片,比如屏幕尺寸,dpi等。
然后lazyload,首屏重点保证,其他可以根据事件触发来加载。
然后加载的时候可以先加载模糊版本,然后过渡到正常版本或者高清版本。可以用canvas做到比较好的过渡效果。
看看应用本身是否可以用一些低质量的图片,可以的话就换低质量的图片,大图用户点击之后再搞
再配合ls的lazyload
background不晓得lazyload是否支持,不支持的话需要自己写个
jquery.lazyload
静态文件,比如图片,使用七牛一类的云加速
图片尺寸要符合坑位大小
图片要进行压缩,最优采用webp格式
对图片使用懒加载
对非首屏的dom进行懒加载
对css请求进行合并
对js进行异步加载
为的就是快速让浏览器解析DOM, CSSOM, 从而进行渲染。
还有很多其他的优化方案,个人认为比较重要的就是缓存机制。