由于业务的需要，笔者最近需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，笔者遇到了很多的坑，也总结了一些优化方案。这里将笔者使用或准备使用的优化方案总结一下。

在描述如何解决问题，我们现在先来申明， 问题是什么？ 笔者的需求大概是在某个页面显示 1~1000张 ， 200~500k 大小的图。好消息是这些图片来源于本地硬盘而非网络。(否则这个问题就要变成优化网络....)

由于不是纯前端的项目，笔者可以从本地文件夹中读取文件。然后一段代码劈里啪啦的就出现了。

    const fileList = this.props.fileList;
    return (
        

"list-wrapper">
{
fileList.map((file) => { "img-item" src={file.src}>
})
}

就在笔者满心欢喜的认为这个需求基本搞定了，该去楼下加鸡腿的时候。无情的现实狠狠的抽了我一巴掌。随着网页的刷新，一张纯白的画面展示在了我的面前，然后只见图片 一点一点的从上面加载出来。 我不禁陷入了沉思，是CPU跑不动道了还是内存飘了？在一想，我这电脑都这个表现，真要上线了，这客户能忍受吗？不对，就这表现，没上线前产品小姐姐就的把我ko了...

方案一 懒加载

这种场景下想必大家第一反应也是懒加载。简单介绍一下图片懒加载。常见的图片懒加载方案是指页面加载时只渲染屏幕可见区域及周围的图片。当页面滚动时再加载需要显示的图片。
出于提高效(tou)率(lan)的目的，笔者在网上找了个比较好用的懒加载库然后引入项目。然而，情况并不乐观。因为该需求场景下每一张图片的宽高都是 50*50 ，那么在PC端常见的 1080p 的设备上首屏需要显示的图片达到了 400+张 。
即便我们忽视这个问题，当用户滚动网页速度很快时图片加载的体验也是不ok的。所以懒加载并不是万能的。

方案二 预加载

首先我们要知道，在硬件性能不变且CPU调度不能更积极的前提下。理论上我们无法减少图片渲染的时间。所以我们只能想办法调整图片渲染的方式来提高用户的体验。所以我们采用预加载的方式。

    const fileList = this.props.fileList;
    fileList.forEach((element) => {
        let img = new Image();
        img.src = element.src;
        img.onload = () => {
            // 渲染这张图
            ...
        }
    })

当然我们也可以使用img.decode()方法对图片进行解码，它会返回一个promise对象。

img.decode().then(() => {
    // 渲染这张图
     ...
})

采用了这套方案后，图片会一张又一张的加载。然而，加载的速度实在是不敢恭维。如果用户 想看最后那张图片 ，那他只能在哪里进行长久的等待...

方案三 懒加载 + 预加载

众所周知， 3 = 1 + 2。 所以方案三就是方案一和方案二的结合体。首先我们加载一张图片未加载时的底图(占位)。而后我们继续采用方案二的方式进行图片逐个的预加载。当用户滚动图片时，我们便改变下一站预渲染的图片为用户可见区域的第一张。然而，情况还是不乐观。当用户的滚动条匀速直线不停的往下运动时，效果依然很差。

综合上面几种方案，基本能优化的我们都已经优化了。那如继续何提高用户的体验呢？似乎，我们只能从图片本身去下手？
上文也提到，在我所面临的需求场景下一张图片的显示宽高为 50 * 50 。而图片的大小为 200~500k 。所以我们可以采用缩率图的方式，先渲染一张3~5k大小的缩略图，等用户点击图片查看详情时再去渲染大图。采用缩略图的情况下我们再使用方案三进行优化，性能表现几乎就可以满足这个场景下用户的需求了。

当然，上面的几种优化方案只是我在某个项目中使用。我们仍然可以采用例如图片渐进式增强，CDN缓存，图片压缩，设立单独的资源服务器等诸多方式。图片的加载优化本身也是一个前端老生常谈的问题，业内已经有太多太多的解决方案。如果你有更好的方案，你也可以在下面留言告诉我。谢谢观看。

觉得本文对你有帮助？请分享给更多人

关注「 全栈开发者社区 」加星标，提升全栈技能

本公众号会不定期给大家发福利，包括送书、学习资源等，敬请期待吧！

如果 感觉 推送内容不错，不妨右下角点个 好看 转发朋友圈或收藏，感谢支持。

好文章，我在看❤️

点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]作者：苏格团队https://juejin.im/post/5cbd30e7e51d456e803516ba背景由于业务的需要，笔者最近需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，笔者遇到了很多的坑，也总结了一些优化方案。这里将笔者使用或准备使用的优化方案总结一下。具体场景在描述如何解决问题，我们现在先来申明，问... 图片 加载 优化 对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。 以下的 优化 一、 优化 二栏目都是我自己封装在Vue的工具函数里，所以请认真看完，要不然直接复制的话，容易出错的。 Vue.js Element UI 优化 一： 图片 加载 动画 只有当 图片 加载 完成后才可以 显示 图片 ， 加载 动画结束。我们使用Element UI中的loading组件来用作 加载 的动画。假设一个... 在上面的代码中，我们使用 `require` 函数来 加载 `@/assets/ image s` 目录下的本地 图片 。` image Url` 计算属性会根据 ` image Name` 变量的值动态生成 图片 的路径。这样就可以 加载 指定的本地 图片 了。 注意：`require` 函数只能用于 加载 模块（例如 图片 、文本等），不能用于 加载 普通的 JavaScript 文件。另外，如果你的 图片 名称是由变量指定的，需要使用字符串模板语法来拼接完整路径。 sharepoint 创建网页服务器,sharepoint designer 2010，创建网站说：网站必须创建于运行microsoft sharepoint foundation的服务器上？... 虚拟机配置opc服务器,组态王怎么配置成opc服务器 sharepoint 创建网页服务器,sharepoint designer 2010，创建网站说：网站必须创建于运行microsoft sharepoint foundation的服务器上？... 虚拟机配置opc服务器,组态王怎么配置成opc服务器