点击精灵Logo
您的位置:首页 >seo高级

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

来源:精灵SEO 发布时间:2020-02-15

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

  具体场景

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

  踩坑历程

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

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

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

  方案一:懒加载

  这种场景下想必大家第一反应也是懒加载。简单介绍一下图片懒加载。常见的图片懒加载方案是指页面加载时只渲染屏幕可见区域及周围的图片。当页面滚动时再加载需要显示的图片。

  出于提高效(tou)率(lan)的目的,笔者在网上找了个比较好用的懒加载库然后引入项目。然而,情况并不乐观。因为该需求场景下每一张图片的宽高都是50*50,那么在PC端常见的1080p的设备上首屏需要显示的图片达到了400+张。

  即便我们忽视这个问题,当用户滚动网页速度很快时图片加载的体验也是不ok的。所以懒加载并不是万能的。

  方案二预加载

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

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

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

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

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

  方案三:懒加载+预加载

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

  终结方案

  综合上面几种方案,基本能优化的我们都已经优化了。那如继续何提高用户的体验呢?似乎,我们只能从图片本身去下手?

  上文也提到,在我所面临的需求场景下一张图片的显示宽高为50*50。而图片的大小为200~500k。所以我们可以采用缩率图的方式,先渲染一张3~5k大小的缩略图,等用户点击图片查看详情时再去渲染大图。采用缩略图的情况下我们再使用方案三进行优化,性能表现几乎就可以满足这个场景下用户的需求了。

  其他

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


相关文章内容简介

1 新站关键词排名为什么会忽上忽下

  每个人都期待自己优化的网站有一个稳定的排名,尤其是主关键词。但是很多时候,除了一些长尾词之外,主关键词排名会忽上忽下,是什么原因引起的?   新站排名经常会出现关键词上下波动,一天有排名一天没有排名,多是因为网站的上线时间短导致的,这个属于正常情况。为什么新站会出现这种排名波动呢?因为一个上线的新站,想要在百度获取好的排名是很难的一件事,原因大概有三,一是收录太少,网站收录都没有,谈什么参与排名?第二个是受众少,不想老站那样会有忠实的粉丝用户,会寻址访问或者收藏夹访问,获得网站投票的外链和友链都没有都几乎没有;三是网站内容质量问题,一般新站的内容都是比较少的,很多功能模块还不完善,所以与老站丰富的内容相比还是有一定差距的。   那新站是不是就没有机会获得网站排名了呢?当然不会,百度对于新站是有一定照顾的,所以现象就来了,你会发现有时上线一个网站,几天之后就会有首页的排名,还能够坚挺排名几天,但是几天之后排名就全掉了,再过几天,排名又会这样周而复始,简称排名忽上忽下。百度通常给新站 [阅读全文]

2 高指数的关键词该如何优化

  一般网站优化指的是关键词指数在500以内,优化的效果更好,更快。高指数一般是百度指数1-2k范围内的。今天给自贡SEO小伙伴们,一起讨论高指数关键词的优化方式和思路,不代表权威性,仅供SEO爱好者借鉴。   操作流程:   1、分析关键词,确认网站主关键词,然后选择2-3个辅助关键词,注意关键词的关联性和选词方法;   2、围绕用户心理,分析用户的来源和搜索喜好等等;   3、合理分布关键词,无论是频道页或者栏目页,都需要根据服装主关键词来部署相关词和长尾词,以便后期获得长尾流量;   4、文章上传的频率要高,前3个月每天至少2篇文章,每篇文章带至少一张图片,图片与文章内容有相关性;   网站上线之后,接下来就是需要一个团队围绕这个主关键词进行合理的分工,人员配置方面至少需要外链专员、编辑、推广专员、团队负责人(主管),具体的人数按需而定。外链专员需要做的是产生高质量外链,找寻高质量友链,外链以锚文本为主要目标,其中90%的锚文本指向首页,10%的锚文本指向内页,如果有能力操作链 [阅读全文]

系统提示

登录密码错误!!!