虚拟列表方案实现

虚拟列表

长列表优化的2种思路:

  1. 分片渲染
  2. 只渲染可视区域

基本概念

进程:这个概念比较大。每开一个应用程序都会分配一个独立的进程,等于每个应用都是一个进程(当然也有一个应用有很多进程),进程是一个更大的概念一个进程会包含很多线程

微任务和宏任务&eventloop

强调的一点:UI渲染的时机——在微任务清空之后 下一个宏任务执行之前,都会进行一次渲染

浏览器:会把所有dom都存起来,再一次性append

分片加载:缺点是最终页面上还是有很多元素。页面元素过多时还是会造成卡顿

实现方案*

使页面上的dom尽可能地少

列表的每一项高度已知:

size:高度

items:总的个数

remain:仅展示的个数

html结构分解:

最外层:视口区域的高度。仅m个的高度

里面scroll-bar:整个所有的高度

scroll-list:仅m个的展示内容

核心功能就是操作dom:就是计算

扩展:

有一个css点:absolute元素,当父元素出现滚动条的时候,依然会跟随滚动;因为是跟随着内容的顶部

position:absolute + scrolling_scroll absolute_呀呀夫斯基的博客-CSDN博客

html - Position Absolute + Scrolling - Stack Overflow

子元素绝对定位position: absolute跟随父元素overflowscroll滚动了 - 墨天轮

优化-前后填充*

填补:扩大start&end的范围

如何一次性加载10万条数据(虚拟长列表) - 知乎

虚拟列表是一次性拿到所有数据的业务背景

高度不固定*

:variable=true

:size=30 依然需要

因为预估的高度是不准确的,所以每次渲染完之后 动态重新计算滚动条多高

实际的宽高

动态计算滚动条的高度

整体思路:

动态高度。先存储一个预估的高度列表

update时用真实高度替换

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

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

相关文章

每天一点python——day61

#第61天 #字符串的驻留机制字符串:python中基本数据类型,是一个不可变的序列【目前我们学了两个:元组、字符串】 可以使用单引号,双引号,三引号来定义#定义字符串 apython#用单引号,双引号,三引…

10 DETR 论文精读【论文精读】End-to-End Object Detection with Transformers

目录 DETR 这篇论文,大家为什么喜欢它?为什么大家说它是一个目标检测里的里程碑式的工作?而且为什么说它是一个全新的架构? 1 题目 2摘要 2.1新的任务定义:把这个目标检测这个任务直接看成是一个集合预测的问题 2.…

MoeCTF 2023 Reverse题解

Reverse入门指北 搜索main函数跟进 双击跟进aMoectfF1rstSt3 得到flag base_64 python反编译 - Online Tools 使用在线软件反编译 就是一个变换编码表的base64加密 直接用现有的工具解密 UPX! 查壳,加了UPX壳,直接用官网工具脱壳 打开字符串窗口&am…

腾讯云CVM服务器标准型S5、SA3、S6详细介绍

腾讯云CVM服务器标准型实例的各项性能参数平衡,标准型云服务器适用于大多数常规业务,例如:web网站及中间件等,常见的标准型云服务器有CVM标准型S5、S6、SA3、SR1、S5se等规格,腾讯云服务器网txyfwq.com来详细说下云服务…

前端工程化(vue2)

一、环境准备 1.依赖环境:NodeJS 官网:Node.js 2.脚手架:Vue-cli 参考网址:安装 | Vue CLI 介绍:Vue-cli用于快速的生成一个Vue的项目模板。主要功能有:统一的目录结构,本地调试&#xff0…

前端框架Vue学习 ——(六)Vue组件库Element

文章目录 Element 介绍快速入门常见组件表格分页Dialog 对话框组件表单 Container 布局容器 Element 介绍 Element:是饿了么团队研发的,一套为开发者、 设计师和产品经理准备的基于Vue 2.0的桌面端组件库。 组件:组成网页的部件,…

【图像分类】【深度学习】【Pytorch版本】AlexNet模型算法详解

【图像分类】【深度学习】【Pytorch版本】AlexNet模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】AlexNet模型算法详解前言AlexNet讲解卷积层的作用卷积过程特征图的大小计算公式Dropout的作用AlexNet模型结构 AlexNet Pytorch代码完整代码总结 前言 AlexNet是…

Vue-SplitPane可拖拽分隔面板(随意拖动div)

npm install vue-splitpane一、使用 (1)局部使用: 在vue文件中 import splitPane from vue-splitpane export default {componnets: { splitPane } }(2)全局使用: 在main.js文件注册 import splitPane…

银河E8,吉利版Model 3:5米大车身、45寸大屏、首批8295座舱芯

作者 | Amy 编辑 | 德新 吉利银河E8在曝光后多次引爆热搜,李书福更是赞誉有加,称其为「买了就直接享受」。这款备受瞩目的车型于 10月30日晚首次亮相。 虽然新车外观在今年上海车展上早已曝光,但这次的发布会却带来了不少惊喜。新车架构以及…

【mongoose】mongoose 基本使用

1. 连接数据库 // 1. 安装 mongoose // 2. 导入 mongoose const mongoose require(mongoose) // 3. 连接 mongodb 服务 mongoose.connect(mongodb://127.0.0.1:27017/xx_project) // 4. 设置回调 .on 一直重复连接 .once 只连接一次 mongoose.connection.on(open, () >…

STM32F4X SDIO(六) 例程讲解-SD_PowerON

STM32F4X SDIO(六) 例程讲解-SD_PowerON 例程讲解-SD_PowerONSDIO引脚初始化和时钟初始化SDIO初始化(单线模式)CMD0:GO_IDLE_STATE命令发送程序命令响应程序 CMD8:SEND_IF_CONDCMD8参数命令发送程序命令响应程序 CMD55:APP_CMDCMD55命令参数命令发送命令…

jQuery类库

文章目录 jQuery介绍jQuery优势jQuery内容jQuery版本jQuery对象知识补充js代码与jQuery代码对比标签对象与jQuery对象 jQuery 查找标签1.基本选择器2.组合选择器3.层级选择器4.属性选择器5.基本筛选器6.表单筛选器7.筛选器方法 jQuery的链式操作Python链式操作的本质 操作标签1…