vue中下拉树树形结构的虚拟列表优化优化下拉树产生的场景优化下拉树的具体实现改变数据源，实现dom元素的减少下拉树列表数据做虚拟列表实现封装的下拉树组件代码 优化下拉树产生的场景最近在跟一个中烟的项目，我们单位是中烟的承接单位，碰到了一个树形结构的下拉框，卡顿比较严重，还有树形结构的穿梭框也是，这个树形结构是后端一次性给前端了，经过ant-design-vue中的树形组件渲染后，页面的dom元素
转载
2023-11-20 13:38:38
258阅读
长列表： 前端开发中会遇到一些数据量较大且无法使用分页方式来加载列表，这种列表就叫做长列表。 完整渲染的长列表基本上很难达到业务上的要求，非完整渲染的长列表一般有两种方式：
懒渲染：这个就是常见的无线滚动的，每次只渲染一部分（比如10条），等剩余部分滚到可见区域，就再渲染一部分。
可视区域渲染：只渲染可见部分，不可见部分不渲染。虚拟列表就是采用的可视区渲染方式优化思路参
转载
2023-09-04 14:37:13
115阅读
面试的时候面试官会问我这个问题，这个问题也是会被经常问到的所以更新在博客以备不时之需：虚拟列表的使用场景如果我想要在网页中放大量的列表项，纯渲染的话，对于浏览器性能将会是个极大的挑战，会造成滚动卡顿，整体体验非常不好，主要有以下问题：页面等待时间极长，用户体验差CPU计算能力不够，滑动会卡顿GPU渲染能力不够，页面会跳屏RAM内存容量不够，浏览器崩溃1. 传统做法对于长列表渲染，传统的方法是使用懒
转载
2024-03-27 13:56:20
152阅读
在前端的场景中，有很多数据无限的下拉列表，比如商品列表和或者聊天记录列表等等。随着数据的不断加载，页面中可能会渲染出几千几万个相同的元素，这样对性能的损耗是非常大的。 为了解决这一问题，就出现了切片渲染和虚拟列表的概念，这里就来说一下虚拟列表。虚拟列表是使用技术手段实现长列表渲染的一种方法，操作的原理就好比，就好比电梯和楼层的关系，通过索引来显示需要显示数据，只不过虚拟列表中的电梯是一段，可能同时
转载
2023-12-07 02:28:16
662阅读
我下列的所有代码都在该 Gitee 仓库中：https://gitee.com/ls1551724864/vue2-3-virtual-scroll-list 文章目录1、概述2、计时3、JavaScript线程4、分片加载5、vue-virtual-scroll-list6、自己实现vue虚拟列表① vue2Ⅰ. 项目搭建Ⅱ. 虚拟列表制作② vue3Ⅰ. 项目搭建Ⅱ. 虚拟列表制作 1、概述一
转载
2024-01-04 15:30:32
1542阅读
需求背景应对socket返回的大量数据，前端做展示上性能的优化，所以做了虚拟列表。附加一些其他优化虚拟列表基本实现内存释放(防止栈溢出)加锁，解锁概念虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。假设有1万条记录需要同时渲染，我们屏幕的可见区域的高度为500px，而列表项的高度为50px，则此时我们在屏幕中最多只能看到
转载
2023-08-07 13:48:45
122阅读
前言书接前文。继续学习Vue，距离上一篇笔记又有十几天了，因为最近实在是工作太忙了，但还是应该努力坚持。正文创建Vue实例如何创建一个Vue的实例呢？var vm = new Vue({
// options
})Vue参考了MVVM模型，这里的vm指代ViewModel。
当你创建一个Vue实例的时候，你可以创建一个options对象给它，这个将来会再具体讨论。数据和方法当一个Vue实例被创
实现目标效果1 使用虚拟列表加载大量数据，防止滚动卡顿 2 处理不定高列表场景，适用于常规业务复杂场景设计思路实现思路： 定高的虚拟列表很好实现，如果要考虑不定高的场景则需要采取其他解决方案 1 比如现有数据1000条，先假定每行数据占用100px，也就是总列表高度为100*1000px。通过这样推算来的高度可以先假定滚动条容器的高度，并维护号一个每个元素高度等数据的数组对象 2 在我们知道高度之
转载
2024-02-02 19:35:31
277阅读
vue虚拟DOM原理了解一、什么是虚拟DOM？二、为什么要使用虚拟 DOM？三、虚拟DOM的作用四、虚拟DOM的实现原理1、snabbdom2、snabbdom模块3、snabbdom源码概述4、Snabbdom 源码实现 一、什么是虚拟DOM？虚拟 DOM(Virtual DOM) 是由普通的 JavaScript 对象来描述 DOM对象状态的变化首先作用于虚拟 DOM，最终映射到真实的DOM
转载
2024-06-29 20:44:26
193阅读
一、前言前端的性能瓶颈那就是页面的卡顿，当然这种页面的卡顿包含了多种原因。 例如HTTP请求过多导致数据加载变慢，下载的静态文件非常大导致页面加载时间很长，js中一些算法响应的时间过长等。很多前端工程师都花费很多的精力在dom渲染上来优化页面加载。二、浏览器渲染瓶颈首先大家要明重绘和回流(重排)的概念：重绘(repaint)：当Render Tree 中的一些元素需要更新元素本身的属性，只影响外观
转载
2024-06-03 14:58:18
656阅读
key的原理一、虚拟DOM中key的作用二、对比的规则1.旧虚拟DOM中找到了与新虚拟DOM相同的key:2.旧虚拟DOM中没有找到了与新虚拟DOM相同的key:三、用index作为key1.实例讲解2.总结（用index作为key可能会引发的问题）四、用id作为key1.实例讲解2.总结（开发中如何选择key？） 一、虚拟DOM中key的作用key是虚拟对象的标识,当数据发生变化时，Vue会根
转载
2024-07-17 10:10:59
105阅读
当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的我们可以用虚拟列表解决这个问题一步步来首先看一下效果这是data中的数据data() {
return {
lis
转载
2024-04-22 23:42:47
520阅读
场景因为项目中数据量有时候过于庞大，使用elementui的select组件时，会导致下拉框加载数据蛮并且卡顿甚至于卡死，为解决这个问题，发现vue-virtual-scroll-list这个插件，地址 https://www.npmjs.com/package/vue-virtual-scroll-list ，用来模拟虚拟滚动，从而解决问题。安装npm install vue-virtual-s
转载
2024-04-03 14:35:32
2445阅读
网上实现虚拟dom的文章也很多了，本项目代码结构、函数等完全按照vue@2.5.17源码思路实现，主要也是为了总结一下自己的学习。从图中可以看到，这个dom树改变了许多地方，但是只新建了一个div元素，这说明其余的元素只是做了移动和文本内容的修改，这比重新渲染整棵dom树要节省很多资源。不多解释了，下面直接看代码吧。因为vue是通过模版解析之后生成的虚拟dom，我主要为了学习虚拟dom，没有做模版
转载
2024-08-13 15:10:52
110阅读
虚拟列表：按需显示的一种实现，即只对可视区域进行渲染，对非可见区域中的数据不渲染或者部分渲染。虚拟列表原理： 仅加载可视区域内的列表项，当发生滚动时计算应展示列表项的startIndex,endIndex，并计算对应的数据在整个列表中的偏移量（为了让列表项展示在可视区域内）获取元素的scrollTop,然后依此计算在可视区域内展示的列表数据项的前
Vue 虚拟列表是一种用于优化大型列表的渲染性能的技术。它通过只渲染可见部分的列表项，以及通过动态添加和删除DOM元素的方式来减少DOM操作，从而提高应用程序的响应速度和性能。Vue 虚拟列表的实现依赖于一些关键技术，包括虚拟滚动、缓存池和动态渲染。
虚拟滚动是 Vue 虚拟列表的核心技术之一。它通过仅在屏幕上显示可见部分的列表项，而不是整个列表来减少渲染所需的时间和资源。虚拟滚动的实现涉及到计算
原创
精选
2024-02-02 14:34:48
962阅读
vue 中数据改变 -> 虚拟DOM（计算变更）-> 操作DOM -> 视图更新虚拟DOM： js执行速度比较快什么是虚拟DOM？用JS模拟DOM结构为什么需要虚拟DOM？vue中 数据驱动视图，需要用高效方法来控制DOM操作的次数diff算法： 虚拟DOM的核心patch函数两个使用场景：首次渲染时，判断第一个参数是否是一个真实dom元素，是的话就创建空vnode，并且关联一个
在经过初始化阶段之后，即将开始组件的挂载，在挂载之前有必要了解下虚拟Dom 的概念。我们知道vue@2.0 开始引入了虚拟dom， 主要解决的问题是， 大部分情况下可以降低使用Javascript 去操作跨线程的庞大dom所需要的昂贵性能，让dom 操作的性能更高效； 以及虚拟Dom可以用于SSR以及跨端使用。 虚拟Dom, 顾明思议并不是真实的Dom, 而是使用javascript 的对象来对真
转载
2023-12-29 19:45:02
118阅读
前提:在我负责一个模块中，有一个是日志管理模块，它会输出很多很多的操作的日志，起初与后台对接对接的时候并没有考虑到性能渲染问题，只是简单的用v-for把所有的数据都渲染出来，那么这样导致的后果就是页面卡顿，这个原因是你的模块中渲染出太多的DOM节点导致，为了避免这样的问题我采取了虚拟列表来进行渲染。什么是虚拟列表虚拟列表就是一个按需渲染的过程，简单来说就是渲染你所看到的内容，对于你非可视的内容不进
转载
2024-03-11 15:12:12
228阅读
引言相信大家经常会遇到展示一堆数据的需求，几十条数据还好，要是几百上千条，甚至带上了图片。那就会卡得不行。这时候就需要按需加载。按需加载有懒加载和虚拟列表。懒加载：通过JS滚动或触底触发事件来加载更多的数据，类似分页。虚拟列表：只加载可视区域的数据，通过计算长度区间反推需要加载的数据来实现假滑动。二者异同很明显，懒加载虽然也有优化，可是当用户疯狂下拉刷新时候最后还是会卡，虽然很难有那种场景。懒加载
转载
2024-03-27 08:35:42
434阅读
