位置: IT常识 - 正文

一篇文章理解虚拟滚动原理(本文虚构)

编辑:rootadmin
一篇文章理解虚拟滚动原理 1.为什么使用虚拟滚动?

推荐整理分享一篇文章理解虚拟滚动原理(本文虚构),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:怎样读懂一篇虚实结合的散文,一篇文章理解虚构的意思,一篇文章理解虚实的意思,文章的虚实,一篇文章理解虚词的意思,文章的虚实,文章的虚与实,一篇文章理解虚构的意思,内容如对您有帮助,希望把文章链接给更多的朋友!

首先提到一个现象,前端的性能瓶颈那就是页面的卡顿,当然这种页面的卡顿包含了多种原因。例如HTTP请求过多导致数据加载国漫,下载的静态文件非常大导致页面加载时间很长,js中一些算法响应的时间过长等。很多前端工程师都花费很多的精力在dom渲染上来优化页面加载。

2.浏览器渲染原理

在我们讨论今天的这个虚拟滚动原理之前需要了解一下浏览器的渲染原理。

浏览器渲染页面的过程分为以下几步:

解析html文件并生成 Dom Tree。

CSS解析生成CSS Rule Tree。

在渲染阶段,浏览器会把DOM Tree 和 CSS Rule Tree 给DOM Tree上的每个节点添加样式,并生成Render Tree。

Render Tree(layout/reflow),绘制元素尺寸、位置计算。

将计算好的信息发给GPU并显示在页面。

具体的浏览器原理在这篇文章不做过多的介绍,有兴趣的话可以去看我的另一篇文章《一篇文章理解浏览器渲染原理和机制》。

3.浏览器渲染瓶颈

首先大家要明重绘和回流(重排)的概念:

重绘(repaint):当Render Tree 中的一些元素需要更新元素本身的属性,只影响外观样式和颜色等,不影响整个布局。

回流(reflow):当Render Tree 中的某些元素因为规模、尺寸、位置等改变时,会影响整个布局。

回流必定发生重绘,重绘不一定发生回流,所以大家可以知道,回流所造成的影响是比较大的,如果页面中频繁的触发回流的操作,那么最终造成页面卡顿也是肯定的。

造成回流和重绘的操作有以下类别:

页面初始化

添加或者删除页面上的可视区DOM元素

元素位置发生改变,定位和浮动,盒模型

页面文本内容发生变化,影响输入框的大小改变。

图片显示加载,如果没有加载图片又会被替换成相应提示文字信息。

浏览器窗口尺寸大小变化(回流是根据视口大小来计算页面元素的位置和大小)。

一篇文章理解虚拟滚动原理(本文虚构)

其实对于这些需要考虑的因素,一些浏览器也是做出了相应的处理,因为每次回流可能会造成巨大的影响,浏览器本身会实现一个队列记录每次回流时操作,当存放的操作数量达到一定值或者达到一定时间后会对队列中的操作进行清空,并一次性进行一次回流,让多次回流操作压缩成一次回流操作执行,提高效率。

本文章将着重讲述关于滚动事件scroll event造成的影响。滚动事件本身不会造成太多的性能消耗,而是因为滚动事件伴随有大量的元素参与进来一起进行回流的操作才会影响浏览器的性能。例如一个表格有上万行数据,如果一次性展示在页面中,并且在滚动时显示对应偏移的数据,那么每一次滚动都会对这几万个元素进行回流,那么性能肯定会很差。

浏览器的瓶颈主要在于:

1.无法一次性渲染太多的DOM元素。

2.每次滚动事件将会让对应的DOM中所有元素重新渲染。

针对于浏览器的瓶颈问题,有三种解决办法:数据分页、无限滚动、虚拟滚动。

4.数据分页

许多网页和应用程序都会用到这样的方,对需要展示的大量数据进行分割分页,后端已经做好了分页,前端只需要调用后端的接口传入相应的第几页的参数就能获取到,减少了一次性需要渲染的行数,但是如果查询的表列数非常多,还是可能会渲染很多元素,不是一个很稳定的方法。

5.无限滚动

该方法是在页面渲染一次性所能成手最大范围的数据量,当滚动条快接近底部时,再去追加渲染下一批需要渲染的元素,但是该方法的明显缺血在于,如果数据量过大,无限滚动下去那么最终所造成渲染的元素越来越多,性能也不会很好。

6.虚拟滚动

虚拟滚动其实就是综合数据分页和无限滚动的方法,在有限的视口中只渲染我们所能看到的数据,超出视口之外的数据就不进行渲染,可以通过计算可视范围内的但单元格,保证每一次滚动渲染的DOM元素都是可以控制的,不会担心像数据分页一样一次性渲染过多,也不会发生像无限滚动方案那样会存在数据堆积,是一种很好的解决办法。

假设实际开发中服务端一次响应20万条列表数据,此时设备屏幕只允许容纳20条,那么用户理论上只可以看见20条数据,其他的数据不会进行渲染加载。如果前端将20万条数据全部渲染成DOM元素,可能造成程序卡顿,占用较大资源,非常影响用户体验,那么虚拟滚动技术就完美的解决了这一问题。

如图所示,当我们进行滚动时,可视区域大小不变,渲染的元素数量也是可以控制的,合理的减少了不必要的DOM渲染,提高浏览器的性能。

可以计算:卷入行数 = scrollTop(卷入高度) / 每行的高度(itemH)

黄色边框内为可视区域,可视区域内的红色行表示在页面能展示的数据,每次滚动时,计算scrollTop的值,可视区域内的红色渲染部分高度可以略大于黄色边框可是高度,避免滚动的时候直接替换。

如何计算可视区域渲染的元素以及实现虚拟滚动,步骤如下:

统一设置每一行的高度需要相同,方便计算。

需要计算渲染数据数量(数组的长度),根据每行的高度以及元素的总量计算整个DOM渲染容器的高度。

获取可视区域的高度

触发滚动事件后,计算偏移量(滚动条据顶距离),再根据可视区域高度计算本次偏移的截止量,得到需要渲染的具体数据。

对于与表格的列来说,需要做虚拟滚动的话,在x轴同样可以根据以上步骤执行,实现横向虚拟滚动。

7.自定义封装一个虚拟滚动组件:

子组件:

<template><!-- 可视区盒子 --><div :style="`height:${viewH}px;overflow-y:scroll`"@scroll="handleScroll"class="container"><div :style="`height:${scrollH}px`"class="list"><div class="item_box":style="`transform:translateY(${offsetY}px)`"><div class="item":style="`height:${itemH}px`"v-for="(item,index) in list":key="index">{{ item }}</div></div></div></div></template><script>export default {name: 'ScrollComponent',props: {data: Array, // 列表总数据viewH: Number, // 外部高度itemH: Number, // 单项高度},data () {return {scrollH: '', // 整个滚动列表高度(总高度)list: [], // 每次显示的数据showNum: '', // 页面需要显示的数量offsetY: '',// 动态偏移量- 外层的盒子进行滚动设置lastTime: '', //最新的时间}},mounted () {// 初始化计算this.scrollH = this.data.length * this.itemH// 计算可视化高度中能存几个列表,可以略多余可视化高度能存放的列表数量避免滚动时被替换this.showNum = Math.floor(this.viewH / this.itemH) + 1// 默认展示的几个数据this.list = this.data.slice(0, this.showNum)this.lastTime = new Date().getTime()},methods: {// handleScroll 滚动时候触发回调handleScroll (e) {// 控制滚动时间间隔if (new Date().getTime() - this.lastTime > 10) {let scrollTop = e.target.scrollTop //滚动条高度// 每一次滚动后 根据scrollTop值获取一个可以整除itemH结果进行偏移// 例如:scrollTop = 1220,1220 % this.itemH = 20 offsetY = 1220-20 = 1200this.offsetY = scrollTop - (scrollTop % this.itemH)console.log('卷入scrollTop值:', scrollTop, '卷入的行数:', scrollTop % this.itemH);this.list = this.data.slice(Math.floor(scrollTop / this.itemH), // 计算卷入了多少行Math.floor(scrollTop / this.itemH) + this.showNum)this.lastTime = new Date().getTime() //更新最新时间}}}}</script><style scoped>.container {position: relative;top: 200px;left: 500px;border: 1px solid red;width: 500px;}.item {border: 1px solid pink;}</style>

父组件:

<template><div id="app"><ScrollComponent :data="dataList":viewH="viewH":itemH="itemH" /></div></template><script>import ScrollComponent from './components/ScrollComponent.vue'export default {name: 'App',components: {ScrollComponent},data () {return {dataList: [1, 1, 11, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 11, 1, 1, 1, 1, 11, 1, 1, 1, 1, 1],viewH: 200,itemH: 40}},mounted () {}}</script><style>* {margin: 0;padding: 0;}</style>

浏览器显示结果:

本文链接地址:https://www.jiuchutong.com/zhishi/290756.html 转载请保留说明!

上一篇:vue 项目使用 vite工具,开发服务器配置 server.proxy 简要介绍(包含跨域配置)(vue项目使用rem)

下一篇:南佛罗里达的一只穴小鸮雏鸟和一只成年穴小鸮,美国 (© Carlos Carreno/Getty Images)(佛罗里达naples)

  • 做好微信运营需要具备的能力(微信运营需要做什么)

    做好微信运营需要具备的能力(微信运营需要做什么)

  • ios14 iphone7可以用吗(iphone7ios14还能带起来吗)

    ios14 iphone7可以用吗(iphone7ios14还能带起来吗)

  • 华为不显示可用运存了(华为没有可用的移动网络是怎么回事)

    华为不显示可用运存了(华为没有可用的移动网络是怎么回事)

  • ipad收不到短信验证码(ipad收不到短信电话)

    ipad收不到短信验证码(ipad收不到短信电话)

  • iphonex闹钟铃声怎么设置(iphonex闹钟声音)

    iphonex闹钟铃声怎么设置(iphonex闹钟声音)

  • 陌陌互相关注多久可以视频聊天(陌陌互相关注多久可以语音聊天)

    陌陌互相关注多久可以视频聊天(陌陌互相关注多久可以语音聊天)

  • 开启了群主确认怎么还能进群(开启了群主确认怎么拉人)

    开启了群主确认怎么还能进群(开启了群主确认怎么拉人)

  • ID移除对方还能正常使用吗(id移除对方还能定位吗)

    ID移除对方还能正常使用吗(id移除对方还能定位吗)

  • 华为荣耀9x怎么打开悬浮按钮(华为荣耀9x怎么看电池健康)

    华为荣耀9x怎么打开悬浮按钮(华为荣耀9x怎么看电池健康)

  • oppo手机开关机键失灵怎么办(oppo手机开关机键失灵是怎么回事)

    oppo手机开关机键失灵怎么办(oppo手机开关机键失灵是怎么回事)

  • word2010分页符在哪(word2010分页符在哪里)

    word2010分页符在哪(word2010分页符在哪里)

  • 华为智能遥控在哪下载(华为智能遥控在哪)

    华为智能遥控在哪下载(华为智能遥控在哪)

  • 家里wifi总提示风险怎么关闭提醒(家里wifi总提示拒绝接入)

    家里wifi总提示风险怎么关闭提醒(家里wifi总提示拒绝接入)

  • 图片怎么重命名发送(手机图片怎么重命名)

    图片怎么重命名发送(手机图片怎么重命名)

  • 华为屏幕上有个圈圈怎么开(华为屏幕上有个小房子的图标怎么关闭)

    华为屏幕上有个圈圈怎么开(华为屏幕上有个小房子的图标怎么关闭)

  • 拼多退款可申请几次(拼多退款可申请吗)

    拼多退款可申请几次(拼多退款可申请吗)

  • 荣耀9xpro支持快充吗(荣耀x9pro是不是不支持快充)

    荣耀9xpro支持快充吗(荣耀x9pro是不是不支持快充)

  • 联想g410拆机除尘教程(联想g405怎么拆)

    联想g410拆机除尘教程(联想g405怎么拆)

  • vivo手机计时器在哪(vivo手机计时器怎么用)

    vivo手机计时器在哪(vivo手机计时器怎么用)

  • 小米cc9和小米cc9e有什么区别(小米cc9和小米cc9美图定制版区别)

    小米cc9和小米cc9e有什么区别(小米cc9和小米cc9美图定制版区别)

  • 华为p30处理器是多少(华为nove10处理器)

    华为p30处理器是多少(华为nove10处理器)

  • qq怎么绑定基友(qq怎样绑定基友)

    qq怎么绑定基友(qq怎样绑定基友)

  • gapps各版本区别(gapps12.5)

    gapps各版本区别(gapps12.5)

  • pinia报错:getActivePinia was called with no active Pinia. Did you forget to install pinia?(getparameter报错)

    pinia报错:getActivePinia was called with no active Pinia. Did you forget to install pinia?(getparameter报错)

  • 电脑systeminfo命令打不开提示systeminfo.exe丢失怎么办?(system 命令)

    电脑systeminfo命令打不开提示systeminfo.exe丢失怎么办?(system 命令)

  • 企业汇算清缴时允许税前扣除的工资是
  • 非关联企业借款利息扣除
  • 如何进行个人所得税认定
  • 小规模纳税人专票税率是多少
  • 一般纳税人工会经费可以零申报吗
  • 上一会计年度什么意思
  • 财付通转账手续费多少
  • 合同租金总收入怎么填
  • 股本溢价如何计税
  • 设备维修劳务费税率
  • 购买的车位是否有产权证
  • 借用另一家公司名义
  • 公司人事怎么办公积金提取流程?
  • 付给其他公司的服务费怎么记账
  • 外购低值易耗品可以抵扣进项税额吗
  • 地税按季报还是月报
  • 小规模附加税怎么计提分录
  • 企业买卖股票应注意事项
  • 怎么知道是不是强制执行
  • 增值税附加税包含哪些税
  • 企业筹办期多久
  • 建筑行业项目部会计要做什么
  • 应收账款坏账准备计提比例
  • macbookpro提醒事项
  • 工程筹建期间发票怎么开
  • 其他收入工会经费计税依据
  • 工会经费使用具体办法
  • 为什么iphone手机闹钟定了不响
  • 小规模纳税人免征增值税的账务处理
  • 第三方开发是什么意思
  • 银行的贷款怎么发放
  • 在途物资属于什么科目借贷方向
  • uni-app怎么样
  • 事业单位自营
  • 蒙特勒和日内瓦的关系
  • PHP:mdecrypt_generic()的用法_Mcrypt函数
  • thinkphp设置伪静态
  • laravel注入
  • apache修改默认路径
  • zendstudio怎么创建php项目
  • 一般纳税人企业所得税如何计算
  • php数组函数面试题
  • 企业年产值与年收入比例
  • 对附属单位补助的资金性质是财政预算资金
  • 固定资产清理的金额怎么算
  • MSSQL output使用
  • 原来的预提费用取消后放哪里
  • 基建拨款在新政府会计制度对应什么科目
  • 小规模纳税人认定标准500万
  • 核定征收和查账征收报税有区别吗
  • 现金回收率怎么计算
  • 企业汇算清缴必须要做审计吗
  • 免抵税额下个月还能退吗
  • 电商企业银行账户是什么
  • 应收账款周转率计算公式
  • 购配件组装机器多少钱
  • 借分公司的款收据怎么开
  • 地方教育附加申报
  • 工会经费交纳
  • 企业流动负债比率多少算正常
  • mysqldump命令在哪里执行
  • distinct 多个
  • fedora修改ip地址
  • windows更改图标大小
  • 卸载win+r
  • 自定义winre
  • 安装fedora33
  • 本地磁盘安装
  • win7怎么设置禁止安装软件
  • Linux httpd(apache)启动失败 解决办法
  • openfiledialog怎么用
  • window8系统桌面啥样的
  • win8.1 操作中心
  • Win10 Mobile RedStone 14283已修复与已知问题汇总
  • cocos 2d x
  • 杀掉进程windows
  • javascript的简介
  • 工程咨询服务税需要每月缴纳吗
  • 为什么需要报税
  • 创业板中签钱不能转出吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设