万张图片,流畅体验——记一次 Vue 列表渲染

简介: ### 背景 团队目前的Web端产品中需要显示两个列表视图:卡片列表和条目列表,并且在点击切换按钮的时候,对两个列表进行切换显示。 卡片列表 ![条目列表](https://ata2-img.oss-cn-zh
背景
团队目前的Web端产品中需要显示两个列表视图:卡片列表和条目列表,并且在点击切换按钮的时候,对两个列表进行切换显示。

在开发完成进行简单性能测试时,发现列表数量达到数百条后,切换视图就会造成明显的页面卡顿,用户体验很差。于是着手进行性能优化。

第一次优化:解决已知问题
由于项目是使用 Vue.js (以下简称 “Vue”)来实现,所以首先查看 Vue 是否存在性能瓶颈,如果存在则考虑替换 Vue 进行优化。

通过查看官方给出的benchmark结果,我们可以得知 Vue 的列表渲染性能在高亮和交换列表元素的时候新能较差,在创建列表和新增列表元素的时候性能都是不错的,执行时间在毫秒级别。

既然 Vue 并没有给我们制定太低的性能天花板,那么我们可以在使用 Vue 的基础上继续进行性能优化。

再来看看代码,点击切换的时候到底发生了什么。

点击事件触发后会引起组件属性 cViewType 变化,然后两个视图的列表会根据 cViewType 的值进行渲染。部分代码如下:

......
......
这里通过 v-if 指令来实现列表切换,每次切换时都会销毁之前的视图列表,然后创建一个新的视图列表。在列表元素非常多时,会造成大量的 DOM 元素创建和销毁,性能开销是很昂贵的。

所以进行优化的最简单方式就是缓存已经渲染的列表。对应到代码也很简单,就是将 v-if 改为 v-show,这样就可以通过 CSS 来控制两个列表的显示/隐藏,从而避免 DOM 元素的重复创建。

改动之后效果确实也非常明显,事情似乎到此结束,但如果列表数量增加到一两个数量级,比如到达一万,是否仍旧流畅呢?

第二次优化:排查可能的问题
当我将列表元素数量增加到一万之后,卡顿问题果然再次出现了。

而浏览器页面卡顿无外乎两个原因,要么脚本引擎在执行 js 代码,要么渲染引擎在渲染页面。

由于前面已经对脚本引擎执行 js 代码的问题进行过优化,这一次我们将优化方向转向渲染引擎。

渲染引擎程序需要借助 CPU 来执行渲染操作,而 CPU 本身并不擅长于处理批量图形渲染,所以可以把这部分的渲染工作交给 GPU。

通过设置 CSS 样式就可以调用 GPU,下面是一种实现方式。

首先将两个视图列表都设置为绝对定位,脱离文档流。
然后在点击事件中动态修改视图列表的 z-index 属性,控制两个列表的层叠关系,通过让一个列表覆盖另一个列表来实现显示/隐藏效果。
这里需要注意的是,虽然只要让卡片列表脱离文档流就可以达到效果,但由于条目列表高度超过卡片列表,导致在显示卡片列表时底部仍然出现条目列表元素,所以将两个元素都设置为绝对定位,并且让其拥有各自独立的滚动条。

优化之后,万张图片可以实现毫秒级切换,非常顺滑。

第三次优化:思考方案的副作用
世上没有银弹,即使借用GPU来加速渲染仍会产生一些副作用。

由于 GPU 对渲染图形数量不敏感而对渲染次数敏感,而浏览器对请求的并发数(一次并发8~6个请求)又有限制,这在一定程度上会增加 GPU 的渲染次数,从而影响用户体验。

对于这个问题可以通过 HTTP/2 协议提升并发能力或者采用分批预加载的方式(等一批图片资源都预加载完再更新到卡片列表)。

由于这些方案还没有来得及实践,这里就不具体展开了~

总结
针对不同性能问题的场景,优化的手段很多,总体上我们只需要抓住两条线索就能找到合适的解决方案,分别是:做减法和做除法。

做减法就是直接减少操作步骤或资源大小,比如第一次优化中通过 v-show 来进行缓存,就是减少创建列表的操作。
做除法就是对耗时的操作进行拆分。比如第二次优化中,耗时的渲染操作转交给 GPU 来执行。
原文链接
本文为阿里云原创内容,未经允许不得转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/514551.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

可动态调节参数的线程池实现

背景 线程池是一种基于池化思想管理线程的工具,使用线程池可以减少创建销毁线程的开销,避免线程过多导致系统资源耗尽。在高并发的任务处理场景,线程池的使用是必不可少的。在双11主图价格表达项目中为了提升处理性能,很多地方使用…

我的世界服务器linux加mod,在Linux下搭建带MOD 我的世界(Minecraft)服务器

在Linux下搭建带MOD 我的世界(Minecraft)服务器系统要求官方服务器推荐配置要求如下:CPU:Intel Core-Based CPUs or AMD K8-Based CPUs IBM 970 2.0 GHz and better内存:5 GiB硬盘空间:16 GiB上行宽带:8 Mbit/s下行宽带…

2020-12-17

集团关于Blink的相关使用文档已经十分齐全,这里不准备再过多赘述。这篇文章准备对Blink所基于的Apache社区开源产品–Flink的架构做一些浅显分析。 一:Flink历史、基本架构及分布式部署 历史 Flink项目最早开始于2010年由柏林技术大学、柏林洪堡大学、…

分布式、云原生技术之后,分布式云或成数字化转型新利器

编辑 | 宋 慧 出品 | CSDN云计算 头图 | 2021可信云大会现场 7月27日,2021年可信云大会在京顺利开幕。本届大会以“数字裂变,可信发展”为主题,云计算行业专家学者、众多国内一线云计算厂商、头部客户同台论道,围绕云计算行业趋势…

linux磁盘配额edquota,Linux磁盘配额(Quota)

开启磁盘的 quota 功能:由于 quota 需要在 ext 的 Linux 延伸格式档案才可以启动,所以你就必须要将准备开启quota 的磁盘启动参数,写进入 quota 的磁盘设定才行 ( /etc/fstab )!以我的例子而言,我想要在/home 底下进行…

图文存储常识:单机、集中、分布式、云、云原生存储

背景 本文主要对杨传辉(日照)《大规模分布式存储系统原理解析与架构实战》、大话存储、网络资源(具体参考文末链接)及个人理解进行整理,意在构建出存储发展基本轨迹和一些基本常识,让更多像我一样的初入者有个宏观上的认知。 存储…

年终盘点 | 七年零故障支撑 双11 的消息中间件 RocketMQ,怎么做到的?

作者 | 愈安 来源|阿里巴巴云原生公众号 2020 年双十一交易峰值达到 58.3W 笔/秒,消息中间件 RocketMQ 继续数年 0 故障丝般顺滑地完美支持了整个集团大促的各类业务平稳。今年双十一大促中,消息中间件 RocketMQ 发生了以下几个方面的变化: …

2021 ISC会上山石网科重磅发布智能下一代防火墙A系列,重新定义边界安全防御

勒索病毒频繁、威胁隐匿于加密流量、高级威胁藏于内部、物联网安全盲区众多,数字化发展及其带来的网络威胁态势正在发生着质的变化,网络安全所要求的防护能力不断提高。防火墙作为企业安全基础架构最重要的基石之一,其辐射到企业的边界、内网…

十年,他们在云上修了一条“高速公路”

简介: 阿里云网络的工程师们希望,通过这个平台,帮助企业更加智能地运维自己的网络、更加便捷地配置自己的网络,让上云的企业在“云高速”中实现“自动驾驶”。他们说,把路修的更好,让网络更简单&#xff0c…

linux可平通网关但不能上网,redhat问题:能ping通网关和本网段的IP,但是不能ping通DNS,也不能上网...

redhat问题:能ping通网关和本网段的IP,但是不能ping通DNS,也不能上网(2011-12-20 06:11:51)标签:上网杂谈redhat问题:能ping通网关和本网段的IP,但是不能ping通DNS,也不能上网查看路由的信息如下…

阿里云超算异构Spot集群,助力深势科技30%成本驱动MDaaS海量算力

本文主要介绍药物研发算法科技公司深势科技是如何实现低成本在阿里云上构建分子模拟MDaaS (Molecular Dynamics as a Service)超算集群。 客户简介 公司名称:深势科技 公司网址:http://dptech.deepmd.net/ 公司介绍&#xff1a…

一文读懂DataOps

作者:彭锋 宋文欣等来源:智领云科技大部分企业的数据平台建设要想顺利过渡到第三阶段,则离不开一个关键方法论—DataOps(数据运维)的帮助。DataOps 与 DevOps 十分形似,也有着与 DevOps 类似的软件开发角色…

Python 命令行库的大乱

当你想实现一个命令行程序时,或许第一个想到的是用 Python 来实现。比如 CentOS 上大名鼎鼎的包管理工具 yum 就是基于 Python 实现的。 而 Python 的世界中有很多命令行库,每个库都各具特色。但我们往往不知道其背后的设计理念,也因此在选择…

Linux系统初学者指南,观点|Linux 系统调用的初学者指南

在过去的几年中,我一直在做大量容器相关的工作。先前,我看到 Julien Friedman 的一个很棒的演讲,它用几行 Go 语言写了一个容器框架。这让我突然了解到容器只是一个受限的 Linux 进程中的机器。构建这个受限视图涉及到 Golang 系统调用包中的…

我在阿里云做前端代码智能化

作为一个整天以代码为伴的码农,避免不了会接触到各种代码提示工具,但是呢,用久了之后会发现他们都有个共同点,那就是 模型巨大,动辄几百兆;并且模型大必然需要更多的计算,同样会导致电脑内存占用…

英特尔携手百度全方位深化合作 共筑智能生态

2021年7月29日,英特尔公司今日出席智能经济高峰论坛暨百度云智峰会2021并分享了一系列与百度在人工智能、云计算、智能边缘等方面的最新合作进展。在智能技术方面,百度基于第三代英特尔至强可扩展处理器,打造全功能AI开发平台Baidu Machine L…

决策树之 GBDT 算法 - 回归部分

GBDT(Gradient Boosting Decision Tree)是被工业界广泛使用的机器学习算法之一,它既可以解决回归问题,又可以应用在分类场景中,该算法由斯坦福统计学教授 Jerome H. Friedman 在 1999 年发表。本文中,我们主…

广技师17专插本c语言答案,广东技术师范学院2017年专插本C语言程序设计(1)

1、广东技术师范学院2017 年专插本 C语言程序设计注意:请将答案写在答题纸上,否则无效!一、判断题: (12 分每题 2 分)1、 C 语言规定 :在一个源程序中 ,main 函数的位置必须在最开始。2、假设所有变量均为整型,则表达式 (a2,b5,b,…

深度强化学习在时序数据压缩中的应用--ICDE 2020收录论文

彼节者有间,而刀刃者无厚;以无厚入有间,恢恢乎其于游刃必有余地矣 ----- 庖丁解牛 前言:随着移动互联网、IoT、5G等的应用和普及,一步一步地我们走进了数字经济时代。随之而来的海量数据将是一种客观的存在&#xff0…

技术干货 | mPaaS 框架下如何使用 Crash SDK 对闪退进行分析?

简介: Android Native Crash 处理案例分享 目前 mPaaS Android 是使用的是 Crash SDK 对闪退进行的处理,Crash SDK 是 Android 平台上一款功能强大的崩溃日志收集 SDK,有着极高的崩溃收集率和完整、全面的崩溃日志信息,生成的日志…