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

时间: 2019-05-03阅读: 237标签: 优化
作者:苏格团队
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缓存,图片压缩,设立单独的资源服务器等诸多方式。图片的加载优化本身也是一个前端老生常谈的问题,业内已经有太多太多的解决方案。如果你有更好的方案,你也可以在下面留言告诉我。谢谢观看。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

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

CSS 性能优化还有哪些方法?

CSS 必须通过一个相对复杂的管道,就像 HTML 和 JavaScript一样,浏览器必须从服务器下载文件,然后进行解析并将其应用于DOM。由于优化程度极高,这个过程通常非常快——对于不基于框架的小型 web 项目,CSS通常只占总资源消耗的一小部分

webpack常用构建优化总览

读了《深入浅出webpack》总结一下常用的webpack的构建优化策略,可通过以下手段来提升项目构建时的速度,理论上我们项目的第三方依赖均应在自己的工程的node_modules下,所以我们可以设置查找目录

如何对 React 函数式组件进行优化?

本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮难的。

网站性能优化实战

读取缓存→DNS查询→TCP链接→发起请求→接收响应→处理HTML元素→加载完成。CSS属性读写分离:浏览器每次对元素样式进行读操作时,都必须进行一次重新渲染(重排 + 重绘)

如何让你的 JS 写得更漂亮?

网上有不少关于JS编写优化建议,这里我根据自己的经验提出一些比较有用的意见。1. 按强类型风格写代码,JS是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好。下面分点说明:

首页白屏优化实践

自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范,但是由于这三大框架都是JS驱动

网站搜索引擎优化,值得关注的4个策略有哪些?

在做网站搜索引擎优化的过程中,对于企业站而言,由于SEO人员都是处于执行层面,甚至即使你有权制定SEO优化方案,偶尔也是草草就上手操作。当你运营到一定阶段的时候

webpack优化分享

Webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理

如何提升网站访问速度?

但网站打开速度变的不可科学的时候,怎么检测打开速度是多少?检测网站是否被劫持、域名是否被墙、DNS污染检测、网站打开速度检测等信息。如果你是网站使用者,你可以通过升级宽带、光纤、升级CPU内存

React 中 的 9 种优化技术

谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时,流量在第一周涨了 10%,接下来的三周涨了 25%

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

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

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