- 综合排序
- 最热优先
- 最新优先
- 来自专栏原创分享
react虚拟滚动的实现
arr.push(String(i++)) } return arr } const data = getData() const itemHeight = 21 const itemLength = 10 // 是否开启虚拟滚动 const enableVirtualScroll = true export default function App() { let [list, setList] itemHeight}px`, overflowY: 'scroll', border: '1px solid black', marginTop: '10px
1.9K30发布于 2019-12-23 - 来自专栏Czy‘s Blog
基于React的虚拟滚动方案
描述 实现虚拟滚动通常并不是非常复杂的事情，但是我们需要考虑到很多细节问题。在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。 固定高度 实际上关于虚拟滚动的方案在社区有很多参考，特别是固定高度的虚拟滚动实际上可以做成非常通用的解决方案。那么在这里我们以ArcoDesign的List组件为例来研究一下通用的虚拟滚动实现。 所以为了配合IntersectionObserver的概念，我们需要渲染实际的占位符，例如10k个列表的节点，我们首先就需要渲染10k个占位符，实际上这也是一件合理的事，除非我们最开始就注意到列表的性能问题 那么动态高度的虚拟滚动与最开始我们实现的固定高度的虚拟滚动区别在哪，首先是滚动容器的高度，我们在最开始不能够知道滚动容器实际有多高，而是在不断渲染的过程中才能知道实际高度；其次我们不能直接根据滚动的高度计算出当前需要渲染的节点 height: 10 20 30 40 50 60 ... cache: 10 30 60 100 150 210 ...
70210编辑于 2025-05-22 - 来自专栏一Li小麦
虚拟滚动之原理及其封装
虚拟滚动之原理及其封装 这仍然是笔者正在进行中某个前端基础项目的一项基础研究。 斟酌 非完整渲染的长列表一般有两种方式： •懒渲染：这个就是常见的无限滚动的，每次只渲染一部分（比如 10 条），等剩余部分滚动到可见区域，就再渲染另一部分。 可视区渲染有个更出名的名字，叫做虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的完全不渲染，在滚动条滚动时动态更新列表项。 相比较于懒渲染，虚拟滚动要求一次性全部拿到数据，但是滚动条能够完全正确地反映当前页面在全部数据的位置。滚动无非是对几十个dom进行操作，可以达到极高的后续渲染性能。 实现 实现虚拟滚动就是处理滚动条滚动后的可见区域的变更，其中具体步骤如下： 1.计算当前可见区域起始数据的 startIndex2.计算当前可见区域结束数据的 endIndex3.计算当前可见区域的数据
10.4K20发布于 2020-07-10 - 来自专栏前端技术江湖
虚拟滚动的 3 种实现方式！
元素固定高度的虚拟列表 元素不定高度的虚拟列表 元素动态高度的虚拟列表 虚拟列表核心原理 我们先来看一下整个虚拟列表元素的表现。 当我们滚动到一个元素离开可视区范围内时，就去掉上缓冲区顶上的一个元素，然后再下缓冲区增加一个元素。这就是虚拟列表的核心原理了。 我们可以采用这种解决方案，那就是每次只需要计算上缓冲区到下缓冲区之间的元素，并记录他们，并且记录下最底下的那个元素的索引，当用户进行滚动时，如果我们是向上滚动，就可以直接从已经计算好的记录里取，如果向下滚动 （2）如果记录中（由上图得知我们只记录了item1-item10的数据）没有，我们就拿到记录中最后一个元素的数据（item10）进行累加，先计算并记录item11的，再计算并记录item12的，再计算并记录 结果 结果还是挺满意的了，这里提一下上文提到的小bug，那就是在向下拉动滚动条时，鼠标和滚动条时脱节的。
3.1K10编辑于 2023-09-11 - 来自专栏大猫的R语言课堂
10行代码搞定【滚动回归】
如果数据一共有N天，那么就会得到N - n个数据点 这就是滚动回归，一个非常容易理解而且在研究中常常遇见，然而实现起来却不是那么容易的问题。在今天的大猫课堂中，大猫教大家用10行代码搞定它！ 解 题思路 解决的思路并不复杂，假设我们现在要处理的是第t行，自变量和因变量分别是x和y，滚动窗口是n天，那么我们只要能够取到x[t-n, t]以及y[t-n,t]两个向量，把他放到lm函数中就可以进行回归得到结果 步 骤分解 大猫先把代码放上来： # 设定滚动窗口期，这里为100天 n <- 100 # 计算滚动回归！ 其实要完成滚动回归并不止这一种方法，stackoverflow上有很多相关的帖子，但是大猫在比较几种方法之后，发现自己写的这个版本是代码最短、最容易理解、并且效率最高的！ 但是，这个滚动回归的代码也不是完美的，最大的劣势就在于我们的滚动窗口是用“期”而不是用“天”来定义的，也就是说，程序在每次滚动的时候都会固定找前面n期的观测，而不管这n期之间可能间隔的是10天，20天还是一个月
2.4K20发布于 2020-10-23 - 来自专栏分布式｜微服务｜性能优化｜并发编程｜源码分析
10.ES滚动索引如何使用
索引滚动是一种管理索引的策略，用于优化性能和资源利用，特别是在处理大量数据时。当索引数据量逐渐增大时，可能会出现性能下降或资源压力过大的情况。 为了避免这些问题，可以使用索引滚动策略来定期创建新的索引，并将数据从旧索引滚动（移动）到新索引。 后面必须是整数，这样ES才会给你递增 PUT lglbc_rollover_log-0001 { "aliases": { "lglbc_rollover_log": {} } } 为别名添加滚动条件 rollover { "conditions": { "max_age": "7d", "max_docs": 2, "max_size": "5gb" } } 当前滚动的规则如下
95430编辑于 2023-11-08 - 来自专栏与前端沾边
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 - 来自专栏明天依旧可好的专栏
win10的虚拟桌面
虚拟桌面是什么？ 每个虚拟桌面可以被看成是一个独立的工作空间。 每创建一个虚拟桌面，就像打开了一个新的工作空间。 ---- 虚拟桌面可以干嘛？ 假设这样一个情景：你在正用电脑处理事情窗口开得特别多，中途你有另外一件事情需要用电脑去处理。你不想中断手上的工作，关闭现在的电脑窗口。 这个时候就可以考虑虚拟桌面了，它可以干嘛呢，我们来看效果图，回到第一个桌面 ---- 相关快捷键： Win 键-Tab：打开「任务视图」，相当于点击「可视化入口」。 Win 键-Ctrl-D：创建新的虚拟桌面。 Win 键-Ctrl-F4：删除当前虚拟桌面。 Win 键-Ctrl-左键：切换到相邻左侧的虚拟桌面。 Win 键-Ctrl-右键：切换到相邻右侧的虚拟桌面。
1.9K10发布于 2019-01-22 - 来自专栏运维小白
WIN10创建虚拟桌面
1.win+Tab时间轴，可查看任务视图 时间轴可以看到这几天执行过的任务，查找比较方便 win+Ctrl+D 新建虚拟桌面-----win+Ctrl+F4关闭虚拟桌面 一个电脑桌面有时打开多个文档会看着眼花缭乱 ，这时就可以使用win+Ctrl+D来创建多个虚拟桌面 Win+Ctrl+←/→（左右方向键）切换虚拟桌面
1.6K10编辑于 2021-12-28 - 来自专栏喵喵侠的社区活动征文
Vue项目中的虚拟滚动：提升页面渲染性能的最佳实践
使用虚拟滚动技术，可以有效解决大数据量下的渲染性能问题。本篇文章将带你深入了解虚拟滚动的应用，帮助你在Vue项目中优化页面渲染性能。 什么是虚拟滚动虚拟滚动（Virtual Scrolling）是一种高效的渲染技术，主要用于处理大量数据的长列表或表格。其基本原理是只渲染当前视口内可见的元素，而对不可见的部分仅保留占位符。 这种方法大幅减少了DOM节点的数量，从而提升了渲染性能和滚动流畅度。虚拟滚动的核心有以下 4 点：渲染可见元素：虚拟滚动只会渲染当前视口内的元素，而不是整个列表或表格。 比方说，假设视口中只能显示10个元素，那么虚拟滚动技术只会渲染这10个元素，即使总数据量有上万个。动态更新视口内容：当用户进行滚动操作 时，使用虚拟滚动技术可以动态更新可视区域内的内容。 目前 Vue3 相关的 UI 框架，大部分组件都支持了虚拟滚动，可以直接用，但 Vue2 旧项目相关的虚拟滚动相对较少，可能部分业务场景，需要自己手动实现，比方说下拉选择框、表格等。
7.9K10编辑于 2024-06-25 - 来自专栏新码农博客
Python：虚拟环境 - Windows10
导读 Windows10系统下Python虚拟环境的安装使用。 1、系统环境 Windows10 2、安装虚拟环境 升级pip python -m pip install --upgrade pip 安装虚拟环境 pip install virtualenv==16.1 3、配置虚拟环境 默认创建的虚拟环境的路径在 C:\Users\Administrator\Envs 4、虚拟环境操作 mkvirtualenv env_name # env_name为你要创建的虚拟环境的名字 \AppData\Local\Programs\Python\Python36\python.exe python36_ 查看安装的所有虚拟环境 workon 进入虚拟环境 workon env_nam 退出虚拟环境 deactivate 删除虚拟环境 rmvirtualenv env_nam
58920发布于 2020-04-17 - 来自专栏微信公众号：小白课代表
虚拟机：VMware 10 安装教程。
虚拟机（Virtual Machine）指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统。 VMware是虚拟机软件中的佼佼者。 虚拟机的特性： 1、不需要分区或重开机就能在同一台计算机上使用两种以上的操作系统。 2、完全隔离了另外的操作系统, 并且保护不同类型的操作系统的操作环境以及所有安装在操作系统上面的应用软件和资料。
2.1K20发布于 2018-11-08 - 来自专栏新码农博客
Python虚拟环境：Windows10
1.系统环境 Windows10 2.安装和配置虚拟环境 升级pip python -m pip install --upgrade pip 安装虚拟环境 pip install virtualenv pip install virtualenvwrapper-win virtualenvwrapper 是virtualenv的扩展管理包，可以将所有的虚拟环境整合在一个目录下。 配置虚拟环境 默认创建的虚拟环境的路径在 C:\Users\Administrator\Envs 3.虚拟环境操作 1.创建虚拟环境 env_name为你要创建的虚拟环境的名字，需要联网 mkvirtualenv \Administrator\AppData\Local\Programs\Python\Python36\python.exe python36_ 3.查看安装的所有虚拟环境 workon 4.进入虚拟环境 workon env_nam 5.退出虚拟环境 deactivate 6.删除虚拟环境 rmvirtualenv env_nam 4.在Python环境下安装Django框架和所需第三方包 导出安装的库到
74910发布于 2020-03-27 - 来自专栏腾讯云原生团队
10月，TKE 节点滚动重装升级 kubernetes 版本内测发布
10月份，腾讯云容器服务更新发布了如下功能： 1. TKE 节点滚动重装升级 kubernetes 版本内测发布 2. TKE 支持 GPU 监控指标 3. TKE 节点滚动重装升级 kubernetes 版本内测发布 腾讯云容器服务支持节点升级，提供将一批集群的节点从较低版本升级到高版本的功能。通过节点滚动重装升级，能够帮助用户快速批量升级集群的节点。 【适用场景】：适用于升级 kubernetes版本过低、 集群内的节点未做相关自定义配置的集群， 节点滚动重装升级后自定义的配置将会不生效。
79131发布于 2020-02-14 - 来自专栏Czy‘s Blog
初探富文本之基于虚拟滚动的大型文档性能优化方案
初探富文本之基于虚拟滚动的大型文档性能优化方案 虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。 虚拟滚动 在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。 那么在研究了虚拟滚动的优势之后，我们就可以开始研究虚拟滚动的实现了，在进入到富文本编辑器的块级虚拟滚动之前，我们可以先来研究一下虚拟滚动都是怎么做的。 height: 10 20 30 40 50 60 ... cache: 10 30 60 100 150 210 ... 所以为了配合IntersectionObserver的概念，我们需要渲染实际的占位节点，例如10k个列表的节点，我们首先就需要渲染10k个占位节点，实际上这也是一件合理的事，除非我们最开始就注意到文档的性能问题
1.3K10编辑于 2024-06-04 - 来自专栏Rattenking
Python ---- windows 10 虚拟环境搭建
虚拟环境 VirtualEnv VirtualEnv 用于在一台机器上创建多个独立的Python虚拟运行环境，多个Python环境互相独立，互不影响。 VirtualEnv 中文文档 优点 没有权限的情况下安装新套件 不同应用可以使用不同的套件版本 套件升级不影响其他应用 缺点 只能应用于Python Windows10 环境操作 安装python3 虚拟环境保护 pip install virtualenv 创建虚拟环境 创建一个独立的Python运行环境，命名为v1。 使用虚拟环境（激活虚拟环境） 新建的Python环境被放到当前目录下的v1目录。有了v1这个Python环境，可以用source进入该环境。 Docker 快速部署 多环境应用虚拟环境
2.2K20发布于 2021-01-30 优化长列表性能：虚拟滚动在React中的实践与思考
问题分析传统渲染方式的问题在于：一次性创建大量DOM节点，占用大量内存每个节点都需要样式计算和布局渲染滚动时频繁重绘，导致界面卡顿解决方案：虚拟滚动虚拟滚动通过只渲染可视区域内的内容来解决这个问题。 基础组件结构首先创建虚拟滚动组件的基本框架：import React, { useState, useRef, useMemo } from 'react';const VirtualScroll = ，性能得到显著提升：指标传统渲染虚拟滚动提升初始加载时间1200ms150ms8倍内存占用85MB12MB7倍滚动FPS10-1555-604-6倍实践中的挑战与解决方案1. ，但需要注意：适用场景：最适合相同或相似高度的项目，动态高度会增加复杂性权衡考虑：虚拟滚动增加了代码复杂度，应在真正需要时使用渐进增强：可以先实现固定高度版本，再扩展支持动态高度在CodeBuddy项目中 ，虚拟滚动不仅解决了性能问题，还为用户提供了流畅的代码浏览体验。
67010编辑于 2025-09-04- 来自专栏日常技术分享
Barchart实现滚动标签跟随滚动
目前有功能比较强大的柱形图Charts，写这个demo的目的主要是产品要实现 滚动柱形图，标签要跟随滚动。所以重新写了一个简单的demo实现了功能, 具体使用看demo，很简单 ?
2.6K40发布于 2018-09-13 - 来自专栏算法之美
每日一问10 虚拟内存
什么是虚拟内存？ 虚拟内存是对内存抽象，在逻辑上让进程认为拥有一片连续完 虚拟地址空间，在通过虚拟地址访问时候，物理内存被认为磁盘的一个缓存，用来储活跃页数据，如果不存在 缺页中断从磁盘（swap文件）加载一页vm页进行替换物理内存一页 进程的虚拟内存如何管理的 主要有堆 栈 栈是 函数调用/协程切换必须空间，在创建线程时候中需要提前分配 堆申请mmap和brk2个方式，后者出现内存碎片 内存分配三个状态 我们可以写一个程序，来创建很多个线程 我的笔记本内存只有8G，虚拟内存为什么能用出80G呢？ 遗留问题： 当内存不够时候，出现ooM，这是时候不是swap交互吗？ 之间什么关系，
41550发布于 2021-01-05 - 来自专栏全栈程序员必看
纯滚动怎么理解_scrollview不滚动
，scroll和client属性的结果相等
<div id="result" style="position:fixed;top:<em>10</em>px3K20编辑于 2022-09-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号