点击精灵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 如何判断外包的seo文章是否是抄袭或伪原创?

  做为资深的外贸seo运营人员,应该会有将内容外包的情况。有时候就会遇到外包的人有抄袭、复制、伪原创的情况发生。那如何避免这种情况的出现呢?相信很多人都遇到过这种情况,是比较头疼的。   那就需要检查。   抄袭、伪原创这种是必须检查的,查了很多资料以及实践检测之后,菜菜老师大概总结出这么几种有效的方法来。   方法一:放到谷歌翻译里,查看翻译成中文的内容是否语句通顺流畅,条理分明。   伪原创通常是对原文同义词、近义词进行替换,替换完毕之后,很可能前后语句不通,翻译成其他语言之后更是完全不可读,所以我们用翻译的方式检测。(现在谷歌翻译很强大,老外写的越自然通顺的文章,翻译过来基本完全可读)。一旦你遇到那种很不通顺的文章,可读性是相当低。   如果,整篇文章语句都很流畅,整篇文章思路逻辑清晰,那基本上就算打标了,当然还要确定一下是否为抄袭,这就用到下文其他方法了。   方法二:使用专门检测抄袭和伪原创的检测工具(四个)   关于拥有这种功能的工具,菜菜老师一共找了四个,最早用的是d [阅读全文]

2 企业为什么需要外包SEO优化?

  我们都知道搜索引擎优化(SEO优化)对一家企业是非常重要的,如果您想在百度上让更多客户搜索到您的产品或者服务,并希望产生电话或在线咨询线索,那么开始SEO项目是必须的。无论您是一个小公司还是一个大企业,SEO可以帮助您的网站带来大量的客户搜索流量,这样你可以为你的企业产生成百上千的潜在客户。   但是SEO技术是复杂的。耗时的,并且需求有足够的耐心等待看到最终的自然排名结果。   每个企业决定开展自己的SEO项目就如同去做SEO技术那么复杂,有时很难在两者之间做出选择。   SEO项目就像投资:   1、什么都不做:如果你选择什么都不做,那么你将什么都得不到,比如竞争对手在做,您将会失去一些业务;   2、自己做:自己学习并去做搜索引擎优化貌似一个艰巨的任务,需要学习大量的SEO技术知识,而且还要不断的去做测试,这样会耽误企业的发展;   3、招聘人才来做:在推广部门预算较多的时候,可以这样尝试下,毕竟长期在公司工作的人可以得到更好的信息沟通;   4、外包SEO项目:与SEO外 [阅读全文]

系统提示

登录密码错误!!!