- 综合排序
- 最热优先
- 最新优先
- 来自专栏原创分享
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 的优秀封装，希望对你有帮助。 实现固定渲染虚拟滚动创建自己实现组件的目录// src/react-window/index.jsexport {default as FixedSizeList} from '. createLstComponent({})export default FixedSizeList实现 FixedSizeList 组件时我们要注意我们没有直接写， react-window 提供了固定高度非固定高的等几种虚拟滚动场景 图片本小节我们实现了固定高度虚拟列表，代码不是很多，感兴趣的小伙伴可以自己动手实现自己的虚拟滚动库，下一小节我们继续实现其他场景下的滚动列表，如有问题欢迎留言讨论。
2.7K51编辑于 2022-09-25 - 来自专栏YP小站
K8S 滚动更新如何优雅停止 Pod
你可以把单个Pod想象成是运行独立应用的“逻辑主机”——其中运行着一个或者多个紧密耦合的应用容器——在有容器之前，这些应用都是运行在几个相同的物理机或者虚拟机上。 [1] 滚动更新会出现的问题 在 k8s 执行 Rolling-Update 的时，默认会向旧的 pod 发生一个 SIGTERM 信号，如果业务应用没有对 SIGTERM 信号做处理的话，有可能导致程序退出后也没有处理完请求 管理员更新完 Deployment 部署文件，触发 Rolling-Update 操作，根据 k8s 调度算法选出一个 Node ，在这台 Node上创建一个 紫色Pod ? 当第一个 紫色Pod 创建完开始服务，k8s 会继续停止一个 绿色Pod，并创建一个 紫色Pod ? 循环替换，直到把所有 绿色Pod 替换成 紫色Pod，紫色Pod 达到 Deployment 部署文件中定义的副本数，则滚动更新完成 ?
6.4K10发布于 2020-06-04 - 来自专栏老铁丁D
k8s滚动升级和扩缩容
一、扩缩容 手动扩容 k8s使用过kubectl scale命令进行扩容 假设原本的pod有3个，这个时候由于业务的增长，我们可以将pod增加到5个 kubectl scale rc blog --replicas HorizontalPodAutoscaler k8s提供HorizontalPodAutoscaler资源对象，让我们可以使用它进行配置扩缩容的规则。 Kubernetes提供了滚动升级功能来解决上述问题。 ，只需要保证新旧ReplicaSet 的Pod副本数之和不超过期望副本数的130%即可 kubectl rolling-update命令进行滚动升级 见篇另一篇博客 k8s初识的滚动升级 三、回滚 在实际发布项目中 默认情况下，k8s会将有deployment发布历史记录保存在系统中，方便我们回滚。
2.3K30编辑于 2022-08-12 - 来自专栏devops_k8s
k8s零中断滚动更新
今天我们来详细分析下这种架构为何在更新应用时会发生服务中断以及如何避免服务中断; 业务部署图 image.png 2 为何会发生服务中断 Deployment 滚动更新时会先创建新 pod，等待新
3.3K10发布于 2021-09-29 - 来自专栏喵喵侠的社区活动征文
Vue项目中的虚拟滚动：提升页面渲染性能的最佳实践
使用虚拟滚动技术，可以有效解决大数据量下的渲染性能问题。本篇文章将带你深入了解虚拟滚动的应用，帮助你在Vue项目中优化页面渲染性能。 什么是虚拟滚动虚拟滚动（Virtual Scrolling）是一种高效的渲染技术，主要用于处理大量数据的长列表或表格。其基本原理是只渲染当前视口内可见的元素，而对不可见的部分仅保留占位符。 这种方法大幅减少了DOM节点的数量，从而提升了渲染性能和滚动流畅度。虚拟滚动的核心有以下 4 点：渲染可见元素：虚拟滚动只会渲染当前视口内的元素，而不是整个列表或表格。 比方说，假设视口中只能显示10个元素，那么虚拟滚动技术只会渲染这10个元素，即使总数据量有上万个。动态更新视口内容：当用户进行滚动操作 时，使用虚拟滚动技术可以动态更新可视区域内的内容。 目前 Vue3 相关的 UI 框架，大部分组件都支持了虚拟滚动，可以直接用，但 Vue2 旧项目相关的虚拟滚动相对较少，可能部分业务场景，需要自己手动实现，比方说下拉选择框、表格等。
7.9K10编辑于 2024-06-25 - 来自专栏Czy‘s Blog
初探富文本之基于虚拟滚动的大型文档性能优化方案
初探富文本之基于虚拟滚动的大型文档性能优化方案 虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。 虚拟滚动 在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。 那么在研究了虚拟滚动的优势之后，我们就可以开始研究虚拟滚动的实现了，在进入到富文本编辑器的块级虚拟滚动之前，我们可以先来研究一下虚拟滚动都是怎么做的。 . */} /> 通过简单分析Arco的通用列表虚拟滚动，我们可以发现实现虚拟滚动似乎并没有那么难，然而在我们的在线文档场景中，实现虚拟滚动可能并不是简单的事情。 getBoundingClientRect https://arco.design/react/components/list#%E6%97%A0%E9%99%90%E9%95%BF%E5%88%97%E8%
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- 来自专栏日常技术分享
Barchart实现滚动标签跟随滚动
目前有功能比较强大的柱形图Charts，写这个demo的目的主要是产品要实现 滚动柱形图，标签要跟随滚动。所以重新写了一个简单的demo实现了功能, 具体使用看demo，很简单 ?
2.6K40发布于 2018-09-13 - 来自专栏容器化
详解k8s零停机滚动发布微服务 - kubernetes
3、k8s滚动更新机制 k8s创建副本应用程序的最佳方法就是部署(Deployment)，部署自动创建副本集(ReplicaSet)，副本集可以精确地控制每次替换的Pod数量，从而可以很好的实现滚动更新 到目前为止，整个滚动发布工作就圆满完成了！！！ 那么如果我们想回滚到指定版本呢？答案是k8s完美支持，并且还可以通过资源文件进行配置保留的历史版次量。 --to-revision=<版次> 5、原理 k8s精确地控制着整个发布过程，分批次有序地进行着滚动更新，直到把所有旧的副本全部更新到新版本。 实际上，k8s是通过两个参数来精确地控制着每次滚动的pod数量： maxSurge 滚动更新过程中运行操作期望副本数的最大pod数，可以为绝对数值(eg：5)，但不能为0；也可以为百分数(eg：10% 6、总结 本篇详解了k8s滚动更新机制，并通过实战演示了微服务的滚动更新，当然还可以加入健康检查和历史版次回滚，大家可以下去自己实践，在实战中学习和进步，基础打牢后，我们将结合实际情况，实战更多的例子，
3.3K10发布于 2018-09-27 - 来自专栏全栈程序员必看
纯滚动怎么理解_scrollview不滚动
，clientHeight返回可视区域大小，而scrollHeight返回元素内容大小 //firefox: 755 755 //chrome: 947 8(body元素的margin) //safari : 744 8(body元素的margin) //IE: 768 768 console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight clientHeight返回可视区域大小，而scrollHeight返回元素内容大小 <body style="height:1000px"> <script> //firefox: 755 1016(1000+8* 2) //chrome: 947 1016(1000+8*2) //safari: 744 1016(1000+8*2) //IE: 768 1016(1000+8*2) console.log [注意]IE8-浏览器不支持 <body style="height:1000px"> <button id='btn1' style="position:fixed;top:0;">点击</button
3K20编辑于 2022-09-20 - 来自专栏嵌入式ARM和Linux
ARMv8虚拟化基础知识
1 概述 2 虚拟化简介 3 AArch64虚拟化 4 `Stage-2`地址转换 5 指令的陷入和模拟 6 虚拟化异常 7 虚拟化通用定时器 8 虚拟化主机扩展 9 嵌套虚拟化 10 安全空间的虚拟化 11 虚拟化的成本 12 小测验 13 其它参考文章 14 接下来的计划 1 概述 本文描述了ARMv8-64的虚拟化支持。 为了使能这些机制，ARMv8架构支持虚拟中断：vIRQ、vFIQ和vSError。这些虚拟中断的行为与物理中断（IRQ、FIQ和SError类似，但只能在EL0或EL1上执行时发出信号。 （参考另一篇文章《GICv3-软件概述》的第8章） 让我们从机制1开始。HCR_EL2中，有3个标志位控制虚拟中断的产生： VI：设置该标志位注册一个vIRQ中断。 虽然，GICv2可以与ARMv8-A一起使用，但更常见的是使用GICv3或GICv4。 6.3 转发中断到vCPU的示例 到目前为止，我们已经看了虚拟中断是如何被使能和产生的。
3.3K41编辑于 2022-08-15 - 来自专栏cloudskyme
虚拟化平台cloudstack（8）——从UI开始
处理简单列举一下4.1中API的新特性 在VM中重新配置物理网络 支持IPV6 扩展VMX设置 重新设置SSH密钥来访问虚拟机 在4.1中改变的API命令： API Commands Description serviceOfferingId=1&diskOfferingId=1&templateId=2&zoneId=4&apiKey=miVr6X7u6bN_sdahOBpjNejPgEsT35eXq-jB8CG20YI3yaxXcgpyuaIRmFI_EJTVwZ0nUkkJbPmY3y2bciKwFQ &signature=Lxx1DM40AjcXU%2FcaiK8RAP0O1hU%3D 更容易读的方式： http://localhost:8080/client/api ? serviceOfferingId=1 &diskOfferingId=1 &templateId=2 &zoneId=4 &apiKey=miVr6X7u6bN_sdahOBpjNejPgEsT35eXqjB8CG20YI3yaxXcgpyuaIRmFI_EJTVwZ0nUkkJbPmY3y2bciKwFQ &signature=Lxx1DM40AjcXU%2FcaiK8RAP0O1hU%3D
1.3K60发布于 2018-03-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 - 来自专栏前端杂货铺-Gopal
大家都能看得懂的源码之 ahooks useVirtualList 封装虚拟滚动列表
简介 提供虚拟化列表能力的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。 详情可见官网[3]，文章源代码可以点击这里[4]。 具体实现 其监听滚动逻辑如下： // 当外部容器的 size 发生变化的时候，触发计算逻辑 useEffect(() => { if (!size?.width || !size?. calculateRange(); }, { // 外部容器 target: containerTarget, }, ); 其中 calculateRange 非常重要，它基本实现了虚拟滚动的主流程逻辑 = getDistanceTop(index); calculateRange(); } }; 思考与总结 对于高度相对比较确定的情况，我们做虚拟滚动还是相对简单的，但假如高度不确定呢 或者换另外一个角度，当我们的滚动不是纵向的时候，而是横向，该如何处理呢？
1.1K20编辑于 2022-09-23 - 来自专栏河湾欢儿的专栏
滚动title
DOCTYPE html> <html> <head> <meta charset="utf-<em>8</em>" /> <title>^_^欢迎浏览本网站</title>
4.9K20发布于 2018-09-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号