- 综合排序
- 最热优先
- 最新优先
- 来自专栏原创分享
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虚拟滚动的配置还有很多，在这里就不完整展开了。 那么动态高度的虚拟滚动与最开始我们实现的固定高度的虚拟滚动区别在哪，首先是滚动容器的高度，我们在最开始不能够知道滚动容器实际有多高，而是在不断渲染的过程中才能知道实际高度；其次我们不能直接根据滚动的高度计算出当前需要渲染的节点
73710编辑于 2025-05-22 - 来自专栏一Li小麦
虚拟滚动之原理及其封装
虚拟滚动之原理及其封装 这仍然是笔者正在进行中某个前端基础项目的一项基础研究。 可视区渲染有个更出名的名字，叫做虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的完全不渲染，在滚动条滚动时动态更新列表项。 相比较于懒渲染，虚拟滚动要求一次性全部拿到数据，但是滚动条能够完全正确地反映当前页面在全部数据的位置。滚动无非是对几十个dom进行操作，可以达到极高的后续渲染性能。 实现 实现虚拟滚动就是处理滚动条滚动后的可见区域的变更，其中具体步骤如下： 1.计算当前可见区域起始数据的 startIndex2.计算当前可见区域结束数据的 endIndex3.计算当前可见区域的数据 小结 在虚拟dom成为主流的今日，如果不亲自去调查了解，你发现不了这么一个事实：习惯于从视图层取数据的前端原来还大有人在。 视图层依赖dom，而dom成为一种负担不得控制的时候，你会发现很多人技穷了。
10.4K20发布于 2020-07-10 - 来自专栏前端技术江湖
虚拟滚动的 3 种实现方式！
元素固定高度的虚拟列表 元素不定高度的虚拟列表 元素动态高度的虚拟列表 虚拟列表核心原理 我们先来看一下整个虚拟列表元素的表现。 当我们滚动到一个元素离开可视区范围内时，就去掉上缓冲区顶上的一个元素，然后再下缓冲区增加一个元素。这就是虚拟列表的核心原理了。 我们可以采用这种解决方案，那就是每次只需要计算上缓冲区到下缓冲区之间的元素，并记录他们，并且记录下最底下的那个元素的索引，当用户进行滚动时，如果我们是向上滚动，就可以直接从已经计算好的记录里取，如果向下滚动 结果 结果还是挺满意的了，这里提一下上文提到的小bug，那就是在向下拉动滚动条时，鼠标和滚动条时脱节的。 ，最后一种虚拟列表是在别的虚拟列表库中有，借鉴了一下各路大佬的思路实现的，总得来说三种虚拟列表虽然表现和实现都不同，但只要掌握了核心原理，手撸出来虚拟列表还是手到擒来的。
3.2K10编辑于 2023-09-11 - 来自专栏与前端沾边
mini react-window(一) 实现固定高度虚拟滚动
，可视区域有限，看到的数据有限，在用户滚动时，指渲染可是区域内的内容即可，dom 少，渲染少在 github 上也有很多针对 react 的虚拟滚动的库，我们这里对 react-window 的使用和实现 ，进行一下简单的学习分享，了解不同虚拟滚动场景下的使用方式和 react 的优秀封装，希望对你有帮助。 实现固定渲染虚拟滚动创建自己实现组件的目录// src/react-window/index.jsexport {default as FixedSizeList} from '. createLstComponent({})export default FixedSizeList实现 FixedSizeList 组件时我们要注意我们没有直接写， react-window 提供了固定高度非固定高的等几种虚拟滚动场景 图片本小节我们实现了固定高度虚拟列表，代码不是很多，感兴趣的小伙伴可以自己动手实现自己的虚拟滚动库，下一小节我们继续实现其他场景下的滚动列表，如有问题欢迎留言讨论。
2.7K51编辑于 2022-09-25 - 来自专栏从零学习云计算
kubernetes学习记录（7）——弹性伸缩与滚动升级
滚动升级 滚动升级采用逐步替换的策略。 通过一个例子进行演示，演示应用从V1版本升到V2版本。 创建V1版本的RC。 192.168.121.143:5000/busybox:v2 imagePullPolicy: IfNotPresent restartPolicy: Always 开始滚动升级
1.2K00发布于 2017-12-28 - 来自专栏小手冰凉
centos 7虚拟用户访问FTP
cent OS7搭建基于虚拟用户的FTP服务 1、创建文本格式的用户名/密码列表 文本中奇数行为用户名，偶数行为上一行中用户所对应的密码。 cent OS7搭建基于虚拟用户的FTP服务 输入用户名和密码： ? cent OS7搭建基于虚拟用户的FTP服务 3、添加虚拟用户的映射账号、创建FTP根目录： 如以下操作添加了一个名为 “test” 的系统用户账号（此账号无须设置密码及登录shell），并结合实际情况更改目录权限 cent OS7搭建基于虚拟用户的FTP服务 cent OS7搭建基于虚拟用户的FTP服务 以上内容，通过 “ db=/etc/vsftpd/vusers”参数指定了要使用的虚拟用户数据库文件位置（省略了 cent OS7搭建基于虚拟用户的FTP服务 打开后写入相应权限 ? cent OS7搭建基于虚拟用户的FTP服务 保存退出后，并以同样的方式建立其他用户的独立的配置文件。
3.7K40发布于 2019-09-10 - 来自专栏Cloud-DIY
创建Linux虚拟机（CentOS 7）
创建Linux虚拟机（CentOS 7） 上传ISO镜像文件 版本：CentOS-7-x86_64-DVD-1908.iso 右击主机，选择新建虚拟机 选择iso镜像文件进行安装 选择centos7-1908版本的镜像文件 自定义硬件 检查相关配置信息 点击“仍然连接” 使用“↑↓键”选择“Install CentOS 7”,敲击“回车键
1.3K20编辑于 2022-12-13 - 来自专栏老高的技术博客
Centos7 虚拟机配置
一些注意的地方，留坑待填 # 配置主机名 hostnamectl set-hostname kube-master hostnamectl set-hostname kube-minion1 hostnamectl set-hostname kube-minion2 hostnamectl set-hostname mater hostnamectl set-hostname slaver1 hostnamectl set-hostname slaver2 hostnamectl set-hostname
39620编辑于 2022-12-28 - 来自专栏yuezhimi
centos7-httpd虚拟主机
Apache虚拟主机： 一台WEB服务器发布单个网站会非常浪费资源，所以一台WEB服务器上会发布多个网站， 在一台服务器上发布多网站，也称之为部署多个虚拟主机，WEB虚拟主机配置方法有三种： 基于单 基于一个端口不同域名配置： 1）创建虚拟主机配置文件httpd-vhosts.conf，该文件默认已存在，只需去掉httpd.conf主配置文件中#号即可 [root@localhost ~]# vim 2)配置虚拟主机： [root@localhost ~]# vim /usr/local/apache/conf/extra/httpd-vhosts.conf 3）创建虚拟主机发布目录： [root@ 7）测试www2访问权限： ? Certificate X509v3 Subject Key Identifier: 47:68:63:A8:C4:51:9E:E5:33:7A
68750发布于 2020-09-30 - 来自专栏summerking的专栏
docker虚拟化多个Centos7
由于测试环境不够，于是想用docker虚拟几个centos系统出来 # 安装docker 略 # 1.运行一个基础镜像 [root@summer ~]# docker run --rm -d -i @summer ~]# docker attach 4ba3c5252384 [root@4ba3c5252384 /]# ll total 0 lrwxrwxrwx 1 root root 7 root 66 Nov 19 07:12 etc drwxr-xr-x 2 root root 6 Apr 11 2018 home lrwxrwxrwx 1 root root 7 4ba3c5252384 /]# yum install -y net-tools.x86_64 wget vim-enhanced passwd openssl openssh-server # 3.修改虚拟出来的 root 66 Nov 19 08:01 etc drwxr-xr-x 2 root root 6 Apr 11 2018 home lrwxrwxrwx 1 root root 7
61820编辑于 2022-09-19 - 来自专栏Java开发者
Linux CentOS 7 虚拟机克隆
Linux CentOS 7 虚拟机克隆 1. 将原虚拟机进行备份 选中虚拟机，右键点击快照，然后拍摄快照。 ? 1.png 2. 开始克隆 选中虚拟机，右键点击管理，然后点击克隆。 ? 6.png 克隆完成后进入虚拟机，设置ip 执行命令(ifcfg-后面加的根据自己情况来)： vim /etc/sysconfig/network-scripts/ifcfg-ethxxx ? 7.png 相关介绍（按自己实际情况来）: DEVICE=eth0 HWADDR=00:0C:29:EB:72:FA TYPE=Ethernet UUID=af9a3043-12d7-4dd3-9948 可以ping一下百度试试网络怎么样，再ping一下自己之前的虚拟机， ping baidu.com ---- 如果ping失败，可以尝试以下操作。
2.5K20发布于 2019-04-11 - 来自专栏Cloud-DIY
【VMware vSphere 7】虚拟化概述（一）
虚拟机文件 虚拟机包含若干个文件，这些文件存储在存储设备上。关键文件包括配置文件、虚拟磁盘文件、NVRAM 设置文件和日志文件。 虚拟机和虚拟基础架构 支持虚拟机的基础架构至少包含两个软件层：虚拟化层和管理层。在 vSphere 中，ESXi提供虚拟化功能，用于将主机硬件作为一组标准化资源进行聚合并将其提供给虚拟机。 服务器虚拟化 平台虚拟化 桌面虚拟化 网络虚拟化 存储虚拟化 四、CPU虚拟化 CPU作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元。 六、网络虚拟化 在虚拟环境中，能够通过虚拟化的方式，构建虚拟以太网适配器和虚拟交换机。 网络虚拟化旨在在一个共享的物理网络资源之上创建多个虚拟网络 七、存储虚拟化 共享物理存储资源，通过存储虚拟化利用本地磁盘创建虚拟机的本地虚拟磁盘。
2.7K11编辑于 2022-12-13 - 来自专栏新码农博客
Python虚拟环境：Centos7
1.系统环境 Centos7 2.安装和配置虚拟环境 升级pip3 pip3 install --upgrade pip 安装虚拟环境 pip3 install virtualenv pip3 install 配置虚拟环境 1.创建虚拟环境管理目录 mkdir ~/.envs 2.打开.bashrc vim ~/.bashrc 3.在.bashrc的末尾增加下面内容 export VIRTUALENVWRAPPER_PYTHON 1.创建虚拟环境 env_name为你要创建的虚拟环境的名字，需要联网 mkvirtualenv env_name 2.创建指定python版本的虚拟环境 mkvirtualenv -p /usr /bin/python3 python36_ mkvirtualenv -p /usr/bin/python2 python27_ 3.查看安装的所有虚拟环境 workon 4.进入虚拟环境 workon env_nam 5.退出虚拟环境 deactivate 6.删除虚拟环境 rmvirtualenv env_nam 4.在Python环境下安装Django框架和所需第三方包 导出安装的库到list.txt
66420发布于 2020-03-27 - 来自专栏Java后端开发博客
CentOS7 KVM虚拟化技术
# CentOS7 KVM虚拟化技术 虚拟化介绍 KVM介绍 KVM实际操作 KVM配置网络 图形操作 结果 参考资料 # 虚拟化介绍 虚拟化：是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机。 虚拟化层层种类：完全虚拟化、准虚拟化、系统虚拟化、桌面虚拟化 # KVM介绍 kVM 全称是 Kernel-Based Virtual Machine。 KVM有一个内核模块叫 kvm.ko，只用于管理虚拟 CPU 和内存。 那 IO 的虚拟化，比如存储和网络设备则是由 Linux 内核与Qemu来实现。 KVM 目前已成为学术界的主 流 VMM(虚拟机监控器)之一。KVM的虚拟化需要硬件支持（如 Intel VT技术戒者 AMD V技术)。是基于硬件的完全虚拟化。 virt-manager： KVM图形化管理工具 libvirt： 虚拟化服务 libguestfs-tools : 虚拟机的系统管理工具 virt-install ： 安装虚拟机的实用工具 。
85720编辑于 2022-12-25 - 来自专栏喵喵侠的社区活动征文
Vue项目中的虚拟滚动：提升页面渲染性能的最佳实践
使用虚拟滚动技术，可以有效解决大数据量下的渲染性能问题。本篇文章将带你深入了解虚拟滚动的应用，帮助你在Vue项目中优化页面渲染性能。 什么是虚拟滚动虚拟滚动（Virtual Scrolling）是一种高效的渲染技术，主要用于处理大量数据的长列表或表格。其基本原理是只渲染当前视口内可见的元素，而对不可见的部分仅保留占位符。 这种方法大幅减少了DOM节点的数量，从而提升了渲染性能和滚动流畅度。虚拟滚动的核心有以下 4 点：渲染可见元素：虚拟滚动只会渲染当前视口内的元素，而不是整个列表或表格。 比方说，假设视口中只能显示10个元素，那么虚拟滚动技术只会渲染这10个元素，即使总数据量有上万个。动态更新视口内容：当用户进行滚动操作 时，使用虚拟滚动技术可以动态更新可视区域内的内容。 目前 Vue3 相关的 UI 框架，大部分组件都支持了虚拟滚动，可以直接用，但 Vue2 旧项目相关的虚拟滚动相对较少，可能部分业务场景，需要自己手动实现，比方说下拉选择框、表格等。
8K10编辑于 2024-06-25 - 来自专栏Czy‘s Blog
初探富文本之基于虚拟滚动的大型文档性能优化方案
初探富文本之基于虚拟滚动的大型文档性能优化方案 虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。 虚拟滚动 在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。 那么在研究了虚拟滚动的优势之后，我们就可以开始研究虚拟滚动的实现了，在进入到富文本编辑器的块级虚拟滚动之前，我们可以先来研究一下虚拟滚动都是怎么做的。 . */} /> 通过简单分析Arco的通用列表虚拟滚动，我们可以发现实现虚拟滚动似乎并没有那么难，然而在我们的在线文档场景中，实现虚拟滚动可能并不是简单的事情。 Set Top 100 | [ 50, 25, 13, 7, 5 ] | Promise.all | Next Task
1.3K10编辑于 2024-06-04 优化长列表性能：虚拟滚动在React中的实践与思考
问题分析传统渲染方式的问题在于：一次性创建大量DOM节点，占用大量内存每个节点都需要样式计算和布局渲染滚动时频繁重绘，导致界面卡顿解决方案：虚拟滚动虚拟滚动通过只渲染可视区域内的内容来解决这个问题。 基础组件结构首先创建虚拟滚动组件的基本框架：import React, { useState, useRef, useMemo } from 'react';const VirtualScroll = ，性能得到显著提升：指标传统渲染虚拟滚动提升初始加载时间1200ms150ms8倍内存占用85MB12MB7倍滚动FPS10-1555-604-6倍实践中的挑战与解决方案1. ，但需要注意：适用场景：最适合相同或相似高度的项目，动态高度会增加复杂性权衡考虑：虚拟滚动增加了代码复杂度，应在真正需要时使用渐进增强：可以先实现固定高度版本，再扩展支持动态高度在CodeBuddy项目中 ，虚拟滚动不仅解决了性能问题，还为用户提供了流畅的代码浏览体验。
69510编辑于 2025-09-04- 来自专栏小狐狸说事
7b2美化-手机菜单页底部添加滚动播报
7b2美化-手机菜单页底部添加滚动播报 ---- 以下代码放到b2/Modules/Templates/Header.php 搜索
'.self::logo71810编辑于 2022-11-17来自专栏日常技术分享Barchart实现滚动标签跟随滚动
目前有功能比较强大的柱形图Charts，写这个demo的目的主要是产品要实现 滚动柱形图，标签要跟随滚动。所以重新写了一个简单的demo实现了功能, 具体使用看demo，很简单 ?
2.6K40发布于 2018-09-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号