- 综合排序
- 最热优先
- 最新优先
- 来自专栏原创分享
react虚拟滚动的实现
(i++)) } return arr } const data = getData() const itemHeight = 21 const itemLength = 10 // 是否开启虚拟滚动
1.9K30发布于 2019-12-23 - 来自专栏Czy‘s Blog
基于React的虚拟滚动方案
而此时我们通常就需要虚拟滚动来实现性能优化，当我们拥有大量数据需要在用户界面中以列表或表格的形式展示时，这种性能优化方式可以大幅改善用户体验和应用性能，那么在本文中就以固定高度和非固定高度两种场景展开虚拟滚动的实现 描述 实现虚拟滚动通常并不是非常复杂的事情，但是我们需要考虑到很多细节问题。在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。 固定高度 实际上关于虚拟滚动的方案在社区有很多参考，特别是固定高度的虚拟滚动实际上可以做成非常通用的解决方案。那么在这里我们以ArcoDesign的List组件为例来研究一下通用的虚拟滚动实现。 当然实际上关于Arco虚拟滚动的配置还有很多，在这里就不完整展开了。 那么动态高度的虚拟滚动与最开始我们实现的固定高度的虚拟滚动区别在哪，首先是滚动容器的高度，我们在最开始不能够知道滚动容器实际有多高，而是在不断渲染的过程中才能知道实际高度；其次我们不能直接根据滚动的高度计算出当前需要渲染的节点
70210编辑于 2025-05-22 - 来自专栏一Li小麦
虚拟滚动之原理及其封装
虚拟滚动之原理及其封装 这仍然是笔者正在进行中某个前端基础项目的一项基础研究。 可视区渲染有个更出名的名字，叫做虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的完全不渲染，在滚动条滚动时动态更新列表项。 相比较于懒渲染，虚拟滚动要求一次性全部拿到数据，但是滚动条能够完全正确地反映当前页面在全部数据的位置。滚动无非是对几十个dom进行操作，可以达到极高的后续渲染性能。 实现 实现虚拟滚动就是处理滚动条滚动后的可见区域的变更，其中具体步骤如下： 1.计算当前可见区域起始数据的 startIndex2.计算当前可见区域结束数据的 endIndex3.计算当前可见区域的数据 小结 在虚拟dom成为主流的今日，如果不亲自去调查了解，你发现不了这么一个事实：习惯于从视图层取数据的前端原来还大有人在。 视图层依赖dom，而dom成为一种负担不得控制的时候，你会发现很多人技穷了。
10.4K20发布于 2020-07-10 - 来自专栏前端技术江湖
虚拟滚动的 3 种实现方式！
元素固定高度的虚拟列表 元素不定高度的虚拟列表 元素动态高度的虚拟列表 虚拟列表核心原理 我们先来看一下整个虚拟列表元素的表现。 动画 看右边的元素个数，会发现起初只有6个，之后无论怎么滚动，他都保持着8个元素，由此我们可以得出他的静态原理图是这样的。 static-height 当我们进行了滚动后。 当我们滚动到一个元素离开可视区范围内时，就去掉上缓冲区顶上的一个元素，然后再下缓冲区增加一个元素。这就是虚拟列表的核心原理了。 我们可以采用这种解决方案，那就是每次只需要计算上缓冲区到下缓冲区之间的元素，并记录他们，并且记录下最底下的那个元素的索引，当用户进行滚动时，如果我们是向上滚动，就可以直接从已经计算好的记录里取，如果向下滚动 结果 结果还是挺满意的了，这里提一下上文提到的小bug，那就是在向下拉动滚动条时，鼠标和滚动条时脱节的。
3.1K10编辑于 2023-09-11 - 来自专栏与前端沾边
mini react-window(一) 实现固定高度虚拟滚动
，可视区域有限，看到的数据有限，在用户滚动时，指渲染可是区域内的内容即可，dom 少，渲染少在 github 上也有很多针对 react 的虚拟滚动的库，我们这里对 react-window 的使用和实现 ，进行一下简单的学习分享，了解不同虚拟滚动场景下的使用方式和 react 的优秀封装，希望对你有帮助。 background-color: pink;}.even { background-color: antiquewhite;}我们使用官方库效果如下：图片我们可以看到可视区内展示 4 项，但是 dom 结构中展示了 6 实现固定渲染虚拟滚动创建自己实现组件的目录// src/react-window/index.jsexport {default as FixedSizeList} from '. 图片本小节我们实现了固定高度虚拟列表，代码不是很多，感兴趣的小伙伴可以自己动手实现自己的虚拟滚动库，下一小节我们继续实现其他场景下的滚动列表，如有问题欢迎留言讨论。
2.7K51编辑于 2022-09-25 - 来自专栏Java架构师必看
CentOS 6虚拟机安装
这篇博客已经被合并到这里了： 虚拟机安装CentOS以及SecureCRT设置【完美无错版】 ====================== 下面不用看了，看上面即可 =============== technetwork/server-storage/virtualbox/downloads/index.html 不过有个单独域名主页：http://www.virtualbox.org/ 2.下载CentOS6镜像 如果觉得虚拟机分辨率很小，那么可以点击“设备”--“安装增强功能”解决。 USB和光驱 在虚拟主机VirtualBox的菜单中选择设备，分配USB设备，找到对应的USB接口即可，安装好驱动。 ======================== VirtualBox虚拟机和主机拷贝文件 主机windows要和VirtualBox拷贝文件，需要设用数据空间功能。
66720发布于 2021-03-22 - 来自专栏前端说吧
滚动穿透的6种解决方案【已自测】
赠送一套自定义手势滚动效果的代码哦~ 一、body无滚动 + 弹层无滚动[css-超出隐藏] 适用场景需满足以下条件： 1、body最好是一屏、无滚动 2、虽然body内容超出一屏需滚动 二、body无滚动 + 弹层内部滚动[css-弹框超出滚动|真机有bug] 适用场景需满足以下条件： 1、body最好是一屏、无滚动 2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中 真正的问题是当我们滑动弹窗可滚动区域，把可滚动区域的内容上滑到底部或下拉到顶部后，再触发弹窗可滚动区域准备滑动，此时的背景页面就会跟随滚动。真是恐怖。 但是同样的问题是，需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则，就和第二条一样，触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动。 6、最后把本次移动到的点y2替换给y1，根据手势移动实时更新当前手势的地址。
14.7K31发布于 2019-03-22 - 来自专栏CMS建站教程
CentOS 6 配置FTP虚拟用户
.* -rw-r--r-- 1 root root 12288 6月 9 08:29 user.db ##用户数据库文件 -rw-r--r-- 1 root root 18 6月 9 08:21 user.txt [root@c vsftpd]# chmod 600 user.* 2、创建vsftpd用于存储文件的目录以及虚拟用户映射的系统本地用户 [root@c vsftpd]# useradd 参数 作用 anonymous_enable=NO 禁止匿名开放模式 local_enable=YES 允许本地用户模式 guest_enable=YES 开启虚拟用户模式 guest_username =virtual 指定虚拟用户账户 pam_service_name=vsftpd.u 指定PAM文件 user_config_dir=/etc/vsftpd/vuser 虚拟用户配置文件存放的目录 设置开机自启 [root@c ~]# service vsftpd start 为 vsftpd 启动 vsftpd： [确定] [root@c ~]# chkconfig vsftpd on 6、
2.6K60编辑于 2022-03-07 - 来自专栏萌海无涯
Python之pygame学习绘制文字制作滚动文字（6）
这里还演示了获取文本宽高，让文本在屏幕居中滚动的效果。 2/1屏幕的高度 - 2/1字体的高度 向上移动是减 # 设置游戏时钟 clock = pygame.time.Clock() while True: # 文字滚动的频率
4.8K30发布于 2019-08-19 - 来自专栏c++
【Linux】进程（6）虚拟地址空间
> 2 #include <unistd.h> 3 #include <stdlib.h> 4 int g_unval; 5 int g_val = 100; 6 之所以会有这样的矛盾，这是因为之前学习的东西并不完整，接下来我们来了解进程/虚拟地址空间。 1.1虚拟地址 进程/虚拟地址空间一定离不开虚拟地址，那进程/虚拟地址是什么呢？ 我们通过实验认识来认识它: //实验代码 int num = 100; 6 int main() 7 { 8 pid_t id = fork(); 9 if (id == 0) 之后再将代码和数据加载到这个进程虚拟空间对应的虚拟分区。 这个虚拟地址空间并不是真正用来存储数据的地方，存储数据的地方依然是物理内存。不过虚拟地址会通过页表与物理地址建立联系。 由于每个进程都拥有一个虚拟地址空间，那么OS要不要对这些虚拟地址空间进行管理呢？
20410编辑于 2026-01-14 - 来自专栏喵喵侠的社区活动征文
Vue项目中的虚拟滚动：提升页面渲染性能的最佳实践
使用虚拟滚动技术，可以有效解决大数据量下的渲染性能问题。本篇文章将带你深入了解虚拟滚动的应用，帮助你在Vue项目中优化页面渲染性能。 什么是虚拟滚动虚拟滚动（Virtual Scrolling）是一种高效的渲染技术，主要用于处理大量数据的长列表或表格。其基本原理是只渲染当前视口内可见的元素，而对不可见的部分仅保留占位符。 这种方法大幅减少了DOM节点的数量，从而提升了渲染性能和滚动流畅度。虚拟滚动的核心有以下 4 点：渲染可见元素：虚拟滚动只会渲染当前视口内的元素，而不是整个列表或表格。 比方说，假设视口中只能显示10个元素，那么虚拟滚动技术只会渲染这10个元素，即使总数据量有上万个。动态更新视口内容：当用户进行滚动操作 时，使用虚拟滚动技术可以动态更新可视区域内的内容。 15px; background: linear-gradient(180deg, #dee9ff 0%, #ffffff 100%); box-shadow: 1px 1px 6px
7.9K10编辑于 2024-06-25 - 来自专栏Czy‘s Blog
初探富文本之基于虚拟滚动的大型文档性能优化方案
初探富文本之基于虚拟滚动的大型文档性能优化方案 虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。 虚拟滚动 在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。 那么在研究了虚拟滚动的优势之后，我们就可以开始研究虚拟滚动的实现了，在进入到富文本编辑器的块级虚拟滚动之前，我们可以先来研究一下虚拟滚动都是怎么做的。 . */} /> 通过简单分析Arco的通用列表虚拟滚动，我们可以发现实现虚拟滚动似乎并没有那么难，然而在我们的在线文档场景中，实现虚拟滚动可能并不是简单的事情。 developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect https://arco.design/react/components/list#%E6%
1.3K10编辑于 2024-06-04 优化长列表性能：虚拟滚动在React中的实践与思考
问题分析传统渲染方式的问题在于：一次性创建大量DOM节点，占用大量内存每个节点都需要样式计算和布局渲染滚动时频繁重绘，导致界面卡顿解决方案：虚拟滚动虚拟滚动通过只渲染可视区域内的内容来解决这个问题。 基础组件结构首先创建虚拟滚动组件的基本框架：import React, { useState, useRef, useMemo } from 'react';const VirtualScroll = ，性能得到显著提升：指标传统渲染虚拟滚动提升初始加载时间1200ms150ms8倍内存占用85MB12MB7倍滚动FPS10-1555-604-6倍实践中的挑战与解决方案1. ，但需要注意：适用场景：最适合相同或相似高度的项目，动态高度会增加复杂性权衡考虑：虚拟滚动增加了代码复杂度，应在真正需要时使用渐进增强：可以先实现固定高度版本，再扩展支持动态高度在CodeBuddy项目中 ，虚拟滚动不仅解决了性能问题，还为用户提供了流畅的代码浏览体验。
67010编辑于 2025-09-04- 来自专栏微信公众号【Java技术江湖】
后端技术杂谈6：白话虚拟化技术
当你使用虚拟机软件的时候，和你的excel一样，都是在你的任务栏里面并排的放着，是一个普通的应用。 当你进入虚拟机的时候，虚拟机里面的excel也是一个普通的应用。 虚拟化软件：我代他跑，终于跑完了，出来结果了 虚拟化软件转头给虚拟机内核：哥们，跑完了，结果是这个，我说你是内核吧，绝对有权限，没问题，下次跑指令找我啊。 虚拟机内核：看来我真的是内核呢。 虚拟化软件转头给物理机内核：报告，管家，我启动了一个虚拟机，需要4G内存，给我4个房间呗。 物理机内核：怎么又一个虚拟机啊，好吧，给你90,91,92,93四个房间。 于是虚拟化软件想，我能不能不当传话筒，还是要让虚拟机内核正视自己的身份，别说你是内核，你还真喘上了，你不是物理机，你是虚拟机。 但是怎么解决权限等级的问题呢？ 这叫做类虚拟化或者半虚拟化。 如果您想更技术的了解本文背后的原理，请看书《系统虚拟化——原理与实现》
73410发布于 2019-12-09 - 来自专栏小俊博客
CentOS 6下如何安装KVM虚拟化
昨天，小编讲述了在CentOS上安装OpenVZ虚拟框架的方式。应公众号里部分读者的要求，今天再给大家讲讲如何在CentOS上安装KVM虚拟框架。 检测网络转发是否开启 # cat /etc/sysctl.conf |grep ip_forward ** 若无，请自行编辑/etc/sysctl.conf文件，将ip转发功能打开后sysctl -p 6. # service iptables save # service iptables restart # chkconfig iptables on 通过以上步骤，您已经成功地在CentOS 6中安装 KVM虚拟化框架。 地址：传送门>> 本文转载自X-osadmin的小红帽的CentOS 6下如何安装KVM虚拟化
1.3K40发布于 2018-06-04 - 来自专栏iSharkFly
在虚拟环境下运行 Confluence 6
这个页面针对运行在虚拟硬件环境下的 Confluence 提供一些信息。 Atlassian 能够支持 Confluence 和 Confluence 数据中心环境在虚拟机环境下运行，但是不能对虚拟环境自身环境的维护提供支持。 建议 下面的一些建议来自于我们将 Confluence 部署到虚拟环境下运行的一些经验。这些虚拟环境包括如 VMWare 和 KVM，同时也来自于我们对这些环境下运行用户提供支持后获得一些经验。 请确定你选择的虚拟环境具有足够的弹性和能力来处理峰值运行，而不是仅仅是等待运行。 https://www.cwiki.us/display/CONF6ZH/Running+Confluence+in+a+Virtualized+Environment
67530发布于 2019-03-14 - 来自专栏日常技术分享
Barchart实现滚动标签跟随滚动
目前有功能比较强大的柱形图Charts，写这个demo的目的主要是产品要实现 滚动柱形图，标签要跟随滚动。所以重新写了一个简单的demo实现了功能, 具体使用看demo，很简单 ?
2.6K40发布于 2018-09-13 - 来自专栏全栈程序员必看
纯滚动怎么理解_scrollview不滚动
本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scrollWidth 元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度 当滚动条滚动到内容底部时，符合以下等式 scrollHeight ;} </script> scrollBy(x,y) scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量 <body style="height:1000px"> 如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。 scroll的知识，基本上囊括了关于滚动现有的所有属性和方法。
3K20编辑于 2022-09-20 - 来自专栏solate 杂货铺
子元素滚动，父元素不滚动
这个是为了处理在bootstrap框架中的iframe 滚动条的问题，查找到的解决方案 小tip: 子元素scroll父元素容器不跟随滚动JS实现 演示页面 代码 CSS代码： .test { delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动 ，因此，临界时候手动边界滚动定位 this.scrollTop = delta > 0?
5.1K30发布于 2019-07-22 - 来自专栏青梅煮码
vue计算滚动条滚动速度
计算页面滚动效果如下 思路：利用滚动条监听事件和定时器，来计算滚动速度；监听事件是只要你滚动条在动就会触发的所以需要定时器来计算滚动速度。 || document.body.scrollTop; //如何计算滚动速度??? //利用定时器，来计算滚动速度(滚动条在timeScale没有被连续滚动则结束间隔) let distance = 0, startTimer = null, beginTime = 0, speed = 0; const timeScale = 100; //检测滚动停止的时间 window.onscroll = () 间隔时间内滑动的距离（+向下，-向上） console.log('distance',distance) scrollTop = tempScrollTop; //下一次滚动开始时滚动条初始位置
2.3K10编辑于 2023-03-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号