要设置正确的view属性，CListCtrl控件有很多的view属性，不同的属性对应不用的现实效果，如果在实际的使用过程中发现，设置的想过没有出来，很可能是这个view属性没有设置正确，常用的效果有：report、list、small Icon、big Icon。我只使用了view属性的report，所有第二条心得基于view为report的操作，首先需要插入列,可以使用这个函数 Inser
面试的时候面试官会问我这个问题，这个问题也是会被经常问到的所以更新在博客以备不时之需：虚拟列表的使用场景如果我想要在网页中放大量的列表项，纯渲染的话，对于浏览器性能将会是个极大的挑战，会造成滚动卡顿，整体体验非常不好，主要有以下问题：页面等待时间极长，用户体验差CPU计算能力不够，滑动会卡顿GPU渲染能力不够，页面会跳屏RAM内存容量不够，浏览器崩溃1. 传统做法对于长列表渲染，传统的方法是使用懒
转载
2024-03-27 13:56:20
152阅读
1、为什么会有虚拟列表？ 在前端开发中，有时候会出现一些不能使用分页来加载数据的情况，因此当我们需要渲染上万条数据的时候，就可能会出现卡顿的情况，这个时候我们就会提出虚拟列表的概念。2、什么是虚拟列表 虚拟列表就是按需显示的一种实现，即只对可见区域进行渲染，对不可见区域中的数据不渲染或者部分渲染的技术，从而
转载
2024-04-01 05:46:54
131阅读
场景因为项目中数据量有时候过于庞大，使用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阅读
当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的我们可以用虚拟列表解决这个问题一步步来首先看一下效果这是data中的数据data() {
return {
lis
转载
2024-04-22 23:42:47
520阅读
网上实现虚拟dom的文章也很多了，本项目代码结构、函数等完全按照vue@2.5.17源码思路实现，主要也是为了总结一下自己的学习。从图中可以看到，这个dom树改变了许多地方，但是只新建了一个div元素，这说明其余的元素只是做了移动和文本内容的修改，这比重新渲染整棵dom树要节省很多资源。不多解释了，下面直接看代码吧。因为vue是通过模版解析之后生成的虚拟dom，我主要为了学习虚拟dom，没有做模版
转载
2024-08-13 15:10:52
110阅读
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阅读
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阅读
Vue中如何进行虚拟滚动与大数据优化在Vue应用程序中，当需要渲染大量数据时，可能会遇到性能问题。这是因为浏览器需要渲染大量的DOM元素，而这会导致页面加载缓慢和内存消耗过高。为了解决这个问题，我们可以使用虚拟滚动和大数据优化技术来提高应用程序的性能和用户体验。什么是虚拟滚动？虚拟滚动是一种技术，它只渲染当前可见的部分DOM元素，而不是渲染整个数据集。这个技术可以大大减少页面加载时间和内存消耗，因
技术概述虚拟列表（VirtualList）是一种在展示大量数据（长列表）时使用的插件，通过只显示必要的DOM和无限滚动，提升页面的性能。在web环境中，我们可以使用vue-virtual-scroll-list之类的npm包。最近热门的小程序框架Taro3也提供了这个能力。从文档说明上看，其功能算是vue-virtual-scroll-list的一个子集。技术详述在Taro中使用VirtualLi
转载
2024-07-17 00:34:13
423阅读
虚拟列表什么是虚拟列表?为什么要使用虚拟列表虚拟列表如何实现 什么是虚拟列表?首先给出定义，什么是虚拟列表。 虚拟列表在开发者眼中并不能是一个真正的列表，它可以看作是可视区域中的几条数据，并且可以监听到用户的滚动事件来动态渲染可视区域的显示数据。 但是这个可滚动的可视区域在用户眼中，就是一个列表。为什么要使用虚拟列表如果有一个长达20w的数据需要渲染。可能由于业务需求或者是被万恶的产品经理压迫导
转载
2024-03-27 23:23:49
77阅读
当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的 我们可以用虚拟列表解决这个问题 一步步来 首先看一下效果这是data中的数据data() {
retur
转载
2023-08-24 13:30:44
511阅读
因为不理解 ：key(v-bind:key)，网上查了一些的资料，这篇写得非常不错，很简洁清楚。其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算
转载
2024-08-22 16:14:07
27阅读
为什么需要虚拟列表日常开发中，经常需要处理一个大数据量的列表，可能是需要展示、勾选等；如果我们用html原生的标签实现，性能到还好。但是现在大多都是用第三方组件库开发(例如element-ui)，以便提升开发效率；如果我们同时展示、勾选千条数据的时候，页面将会卡主，甚至崩掉；虚拟列表的方案正是为了解决这类前端大数据量展示、操作卡顿的问题；虚拟列表原理虚拟列表只对部分区域进行渲染，对区域外的DOM进
转载
2023-12-28 12:36:12
658阅读
Vue.js 2.0窥探之Virtual DOM到底是什么？Vue.js 2.0已经发布，并且在其中新添加如了一些新功能。其中一个功能就是“Virtual DOM”。 Virtual DOM是什么？在之前，React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了。 若想了解它是如何工作的，就要先认清这几个概念：1.更新DOM是非常昂贵的操作当我们使用Javascript来修改
转载
2024-07-23 17:01:25
0阅读
为什么需要使用
虚拟列表?参考：https://github.com/chenqf/vue-virtual-listview 假设我们的长
列表需要展示10000条记录，我们同时将10000条记录渲染到页面中，先来看看需要花费多长时间：<button id="button">button</button><br>
<ul id="container">&
转载
2024-04-10 13:26:51
57阅读
在前端开发中，列表的虚拟滚动是一种常见的优化手段，可以大大提升页面性能。在Vue3中，我们可以通过一些技巧来实现列表的虚拟滚动。本文将介绍如何使用Vue3实现列表的虚拟滚动，让你的页面加载更快、更流畅。1. 什么是虚拟滚动？虚拟滚动是一种技术，可以在大量数据的情况下，只渲染可视区域的内容，而不是将所有数据都直接加载到DOM中。通过动态地加载、卸载内容，可以减少页面渲染时的内存占用和提高页面性能。2
转载
2024-06-20 13:44:49
450阅读
前言今年随着Vue3的成为正式版本，我们的Element-plus也有了稳定版，那今天我们主要是讲一个功能。我们先来看一下Element-plus新出现的一个玩意: image.png
虚拟列表选择器？这是啥玩意，还能虚拟？大家都知道Vue的虚拟dom，我用简单的话讲述一下：大概就是一棵以 JavaScript 对象作为基础的树，每一个节点称为 VNode ，用对象属性来描述节点，实际
引言相信大家经常会遇到展示一堆数据的需求，几十条数据还好，要是几百上千条，甚至带上了图片。那就会卡得不行。这时候就需要按需加载。按需加载有懒加载和虚拟列表。懒加载：通过JS滚动或触底触发事件来加载更多的数据，类似分页。虚拟列表：只加载可视区域的数据，通过计算长度区间反推需要加载的数据来实现假滑动。二者异同很明显，懒加载虽然也有优化，可是当用户疯狂下拉刷新时候最后还是会卡，虽然很难有那种场景。懒加载
转载
2024-03-27 08:35:42
434阅读
