⼀个页面上有大量的图片(大型电商网站),加载很慢,怎么做优化
首先 一切优化得前后端开发协同配合区做 离开哪一方都举步维艰(很重要)
1. 先渲染缩略图, 主要看后端开发的技术能力, 这种方案几乎没前端啥事 就写个判断渲染而已 推荐
2. 图⽚懒加载,在⻚⾯上的未可视区域可以添加⼀个滚动事件,判断图⽚位置与浏览器顶端的距离与⻚⾯的距离,如果前者⼩于后者,优先加载。
3. 如果为幻灯⽚、相册等,可以使⽤图⽚预加载技术,将当前展示图⽚的前⼀张和后⼀张优
先下载。
4. 如果图⽚为css图⽚,可以使⽤ CSSsprite , SVGsprite , Iconfont 、 Base64 等技术。
5. 如果图⽚过⼤,可以使⽤特殊编码的图⽚,加载时会先加载⼀张压缩的特别厉害的缩略
图,以提⾼⽤户体验。
6. 如果图⽚展示区域⼩于图⽚的真实⼤⼩,则因在服务器端根据业务需要先⾏进⾏图⽚压
缩,图⽚压缩后⼤⼩与展示⼀致。