虚拟滚动技术

简介: 插入数万个DOM时,为避免页面卡顿,可采用虚拟滚动技术,仅渲染可视区域内的元素,滚动时动态更新内容,大幅减少DOM数量。相比一次性渲染,性能显著提升,是前端优化的面试加分项。如react-virtualized即为此类解决方案。
  1. 插入几万个 DOM,如何实现页面不卡顿?(面试加分项)
    肯定不能一次性把几万个 DOM 全部插入,这样肯定会造成卡顿,所以解决问题的重点应该是如何分批次部分渲染 DOM。部分人应该可以想到通过 requestAnimationFrame 的方式去循环的插入 DOM,其实还有种方式去解决这个问题:虚拟滚动(virtualized scroller)。
    这种技术的原理就是只渲染可视区域内的内容,非可见区域的那就完全不渲染了,当用户在滚动的时候就实时去替换渲染的内容。
    从上图中我们可以发现,即使列表很长,但是渲染的 DOM 元素永远只有那么几个,当我们滚动页面的时候就会实时去更新 DOM,这个技术就能顺利解决这发问题。如果你想了解更多的内容可以了解下这个 react-virtualized。
相关文章
|
5月前
|
缓存 前端开发 JavaScript
雅虎14条Web性能优化规则
雅虎14条Web性能优化规则,涵盖减少HTTP请求、使用CDN、压缩资源、合理缓存、优化CSS/JS加载、图片处理、Cookie管理及移动端适配等,全面提升网页加载速度与用户体验。
|
4月前
|
监控 Cloud Native Java
阿里云可观测联合 Datadog 发布 OpenTelemetry Go 自动插桩工具
阿里云联合社区推出 OpenTelemetry Go 编译时自动插桩方案,基于 -toolexec 实现零代码修改的链路追踪与监控,支持 HTTP、gRPC 等常用框架,低开销、高兼容,助力 Go 应用无缝接入可观测体系。
393 2
|
4月前
|
Web App开发 人工智能 运维
2025年主流Web自动化测试工具功能与适用场景对比
文章围绕2025年主流Web自动化测试工具展开,介绍行业发展趋势与痛点,对比优测、Selenium等工具的功能、优势、劣势及适用场景。指出不同工具呈差异化路径,企业应依团队技术、业务需求和预算选适配方案,还解答了工具选择、协同使用等常见问题。
|
4月前
|
存储 缓存 前端开发
HTTP 缓存详解
HTTP缓存是提升网页性能的核心机制,通过“强制缓存”和“协商缓存”减少请求、节省带宽。强制缓存由浏览器判断是否过期(如Cache-Control),未过期则直接使用本地资源;过期后进入协商缓存,服务器通过Etag或Last-Modified判定资源是否变更,可复用则返回304。合理配置缓存策略,能显著提升加载速度与用户体验。
414 3
|
4月前
|
SQL XML JavaScript
【RuoYi-Eggjs】:将若依带入 Node.js 世界的企业级后台管理系统
RuoYi-Eggjs 是基于 Egg.js 的企业级后台系统,100% 复刻若依功能,支持 MyBatis XML 风格 SQL、多数据库、JWT 认证、权限控制与代码自动生成,完美对接 RuoYi-Vue3 前端,助力 Node.js 开发者高效构建管理系统。
412 5
|
4月前
|
JavaScript 前端开发
如何实现前端大量的DOM数据加载而页面不卡顿
为避免大量DOM导致页面卡顿,可采用分批渲染或虚拟滚动技术,仅渲染可视区域内容。
284 3
|
4月前
|
人工智能 数据可视化 物联网
大模型微调技术入门:从核心概念到实战落地全攻略
本课程系统讲解大模型微调核心技术,涵盖LoRA、QLoRA等高效方法,结合ComfyUI与主流工具实战,从数据准备到模型部署全流程落地,助力开发者低成本定制专属AI模型。
|
11月前
|
移动开发 Dart 前端开发
【HarmonyOS 5】鸿蒙跨平台开发方案详解(二)
作为最早实现鸿蒙适配的跨平台框架,Flutter在社区推动下已形成较完整的技术方案。当前鸿蒙版Flutter已发布3.22.0-ohos版本,该版本基于Flutter 3.22.0核心。
1082 0
|
算法 安全 Java
Hutool-crypto 加密、解密详解!
Hutool-crypto 加密、解密详解!
1531 0
|
前端开发
进来!手把手教用css动画写loading效果
进来!手把手教用css动画写loading效果