一次Web端大量图片同时加载卡顿问题的优化之旅

时间: 2019-05-03阅读: 171标签: 优化
作者:苏格团队
https://juejin.im/post/5cbd30e7e51d456e803516ba

背景

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


具体场景

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


踩坑历程

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

    const fileList = this.props.fileList;
    return (
        <div className="list-wrapper">
            {
                fileList.map((file) => {
                    <img className="img-item" src={file.src}>
                })
            }
        <div>
    )

就在笔者满心欢喜的认为这个需求基本搞定了,该去楼下加鸡腿的时候。无情的现实狠狠的抽了我一巴掌。随着网页的刷新,一张纯白的画面展示在了我的面前,然后只见图片一点一点的从上面加载出来。 我不禁陷入了沉思,是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缓存,图片压缩,设立单独的资源服务器等诸多方式。图片的加载优化本身也是一个前端老生常谈的问题,业内已经有太多太多的解决方案。如果你有更好的方案,你也可以在下面留言告诉我。谢谢观看。


链接: http://www.fly63.com/article/detial/3188

如何设置网站的robots.txt?

做过网站优化的朋友都知道,搜索引擎蜘蛛爬行抓取网站时首先会去访问根目录下的robots.txt文件,如果robots文件存在,则会根据robots文件内设置的规则进行爬行抓取,如果文件不存在则会顺着首页进行抓取,那么robots文件的工作原理是什么呢?

Webpack 打包后代码执行时机分析与优化

代码执行时机将决定着是否能够正常执行,当依赖文件没加载完成就开始执行、使用对应模块,那么将会导致执行异常。这在“ 存在资源加载失败时,加载重试影响原来文件的执行顺序 ”的场景下尤为常见。

运用meta标签进行网站优化

Set-Cookie(cookie设定)说明:如果网页过期,存盘的cookie将会被删除(必须是GMT的时间格式); Window-target(显示窗口的设定)说明:强制页面在当前窗口以独立页面显示----用来防止别人在框架里面调用你的页面

网站优化重点注意事项

可能很多的小白还不清楚,网站优化的重点在哪里,到底是站内优化重要还是站外优化重要,要知道的是,百度除了相关说明的,外链对网站的帮助已经越来越小,但是并不是代表就可以不去做

关于Js防抖与节流的思考

防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,防抖注重结果;节流::是让一个函数无法在很短的时间间隔内连续调用

优化(Vue)Javascript文件体积

可以看到竟然有8M和5.3M这么大的文件!在本地开发时由于本地网络打开文件很快感受不明显,但当把这些文件部署到服务器上,能明显感觉首屏打开时间是非常慢的。好,看到了问题,我们来优化~

JS 代码脏乱差?你需要知道这些优化技巧

JavaScript 是万众瞩目的力量。它是世界上最流行的编程语言。它容易理解,有丰富的学习资源,对初学者非常友好。JavaScript 有着庞大的资源库,对小公司和大企业都颇具吸引力。庞大的 JS 工具和库生态系统为开发者的生产力带来了福音

网页首屏性能优化总结

本文总结了系统地进行前端性能优化的整体思路。具体到实施的过程,每一种优化方法都能搜到详细的文章,这里就不展开了。同时,还应该结合具体的业务场景对症下药,最终真正的提高用户体验。符合预期。

Vue项目优化

在日常的Vue项目开发中,随着业务的日渐负责,代码量的日益增加,随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本质上来解决这种问题

WEB前端_搜索引擎工作原理与SEO优化

搜索引擎的工作分为三个阶段,即爬行,索引和检索;搜索引擎具有网络爬虫或蜘蛛来执行爬网,每次抓取工具访问网页时,它都会复制该网页并将其网址添加到索引中。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全