精灵SEO

seo

>

seo优化

>

网站优化

>

关键词优化

>
seo公司
您的位置:首页 >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 一个好的企业网站建设对企业的作用

  一个好的企业网站建设对企业的作用!互联网一直在改变,不仅影响了每个人的生活,同时也关系到了市场上每个企业的发展。对于当下的互联网大环境,企业想要在市场上谋得一席之地,网络推广是必须要走的一步;而做好网络推广的第一步就是企业网站,一个优秀的企业网站!   那么一个好的企业网站的作用是什么呢   1. 提升企业形象   网站是企业在网络上的门户,跟线下的门脸一样重要,一个好的企业网站能丰富的展现出公司的整体形象,让客户眼前一亮。   2. 增强企业曝光度   当企业网站建设好后,可以运用网站优化的技术把网站信息排到搜索引擎第一页,让更多的客户看到公司信息和产品信息。   3. 打通更多的市场渠道   互联网时代,固守线下市场就是固步自封,而网络能更好的打破更多局限性,让业务更好的拓展到各个地区,扩大业务量。   4. 提高客户服务   当客户遇到一定的问题的时候,能第一时间从网站里找到解决方案,更加直观,更加方便。   5. 展示企业的产品   企业网站能更方便,更具体的把企业的信息 [阅读全文]

2 你所不知道网站优化方式

  你所不知道网站优化方式!互联网+时代,网站优化,让网站获得更好的排名和流量,是让网站更有价值的方式。为什么别人网站排名比你好,那是你不知道这些网站优化方式!今天,精灵seo为您分享网站优化的方式,希望能帮到大家。   一、规律发布是关键   为了网站保持稳定的更新习惯,以便及时发现百度蜘蛛爬行的规律,有必要定期发布新内容。网站收录问题一直是我们比较关注的,也是网站能够被人搜索到,能够有排名的前提,定时定量发布对搜索引擎优化是非常有用的,所以每天保持更新频率,今天发布了一篇文章,明天发布十篇文章,后天又不发了,这个是不可取的。因为它会给搜索引擎留下不好的印象,新站甚至容易进沙盒期。   二、创造高质量的内容是关键   作为搜索引擎评分网站的一个重要标准,需要引起重视。那么什么是质量内容呢?我们认为原创性和网站内容是两个重要的方面。无论你如何创作,你都应该注意发布的内容与站点主题之间的相关性。加强两者之间的联系有什么好处?首先,它有利于提高用户体验,第二,有利于吸引搜索引擎的喜爱,有 [阅读全文]

代理合作

电话/微信:18054233683

关闭
系统提示

登录密码错误!!!