网页大量图片同时加载卡顿问题如何优化

因为业务流程的必须，笔者近期必须保持一个很多图片另外加载的要求。在保持这一要求的全过程中，笔者碰到了许多 的坑，也小结了一些提升方案。这儿将笔者应用或提前准备应用的提升方案总结一下。

实际情景

在叙述如何解决问题，人们如今首先来声明，难题是啥？笔者的要求大约是在某一网页页面显示信息1~1000张，200~500k尺寸的图。喜讯是这种图片来自当地固态盘并非互联网。(不然这一难题还要变为优化网络....)

踩坑过程

因为并不是纯前端开发的新项目，笔者能够从当地文件夹名称中载入文档。随后一段编码劈里啪啦的就出現了。

就在笔者心满意足的觉得这一要求基础拿下了，该去楼底下加鸡翅的情况下。绝情的实际狠狠地的抽了我一巴掌。伴随着网页页面的更新，一张纯白色的界面展现在了我的眼前，随后但见图片一点一点的从上边加载出去。我禁不住深陷了思索，是CPU跑不动道了還是运行内存漂了？在一想，我这电脑上都这一主要表现，真的上线，这顾客能承受吗？错误，就这主要表现，没发布前商品漂亮小姐姐就的将我ko了...

方案一：懒加载

这类情景下想来大伙儿第一反映都是懒加载。简易详细介绍一下图片懒加载。普遍的图片懒加载方案就是指网页页面加载时只3D渲染显示屏由此可见地区及周边的图片。当网页页面翻转时再加载必须显示信息的图片。

出自于提升效（tou）率（lan）的目地，笔者网上找了个较为功能强大的懒加载库随后导入新项目。殊不知，状况并不是开朗。由于该要求情景下每一张图片的高宽全是50*50，那麼在PC端普遍的1080p的机器设备上首屏必须显示信息的图片超过了400 张。

就算人们忽略这一难题，当用户翻转网页页面速率迅速时图片加载的感受也不是ok的。因此懒加载并非全能的。

方案二：预加载

最先人们要了解，在硬件配置特性不会改变且CPU生产调度不可以更积极主动的前提条件下。基础理论上人们没法降低图片3D渲染的時间。因此人们只有想方法调节图片3D渲染的方法来提升用户的感受。因此人们选用预加载的方法。

自然人们还可以应用img.decode()方式对图片开展编解码，它会回到一个promise目标。

选用了这套方案后，图片会一张又一张的加载。殊不知，加载的速率确实是不是太好。假如用户爱看最终那张图片，那他只有在哪儿开展长期的等候...

方案三：懒加载 预加载

大家都知道，3=1 2。因此方案三就是说方案一和方案二的集合体。最先人们加载一张图片未加载时的底图（占位性病变）。然后人们再次选用方案二的方法开展图片逐一的预加载。当用户翻转图片时，人们便更改下一站预3D渲染的图片为用户由此可见地区的第一张。殊不知，状况還是不开朗。当用户的滚动条匀速直线不断的向下健身运动时，实际效果仍然很差。

结束方案

综合性上边几类方案，基础能提升的我们早已提升了。那如再次何提升用户的感受呢？好像，人们只有从图片自身去着手？

前文也提及，在我所遭遇的要求情景下一张图片的显示信息高宽为50*50。而图片的尺寸为200~500k。因此人们能够选用缩率图的方法，先3D渲染一张3~5k尺寸的缩列图，等用户点一下图片查看更多时再去3D渲染大图图片。选用缩列图的状况下人们再应用方案三开展提升，特性主要表现基本上就能够考虑这一情景下用户的要求了。

别的

自然，上边的几类提升方案仅仅我还在某一新项目中应用。人们依然能够选用比如图片渐进性提高，CDN缓存文件，图片缩小，开设独立的資源网络服务器等众多方法。图片的加载提升自身都是一个前端开发老调重弹的难题，业界早已有非常多的处理方案。