怎么在HTML中通过virtualizer库对万级数据列表实施窗口化只渲染可见行-html教程-PHP中文网

html5本身没有虚拟dom，它是react、vue等框架的js层实现机制；原生中可通过documentfragment、条件更新、classlist控制等减少重复渲染。

怎么在html中通过virtualizer库对万级数据列表实施窗口化只渲染可见行

virtualizer 库不直接支持 HTML 原生 DOM 渲染

你找不到官方叫 virtualizer 的通用库能“开箱即用”对接原生 <ul></ul> 或 <div> 列表——它通常是某个框架（如 React、Svelte）的内部机制或配套工具。比如 <code>react-virtual 是 React 生态的，svelte-virtual-list 是 Svelte 的；纯 HTML + JS 场景下，没有叫 virtualizer 的标准库可 npm install 后直接调用。

如果你在文档或示例里看到 virtualizer，大概率是某框架封装后的实例对象（例如 useVirtual 返回的 virtualizer），不是独立 DOM 操作工具。

浏览器原生不提供“虚拟滚动” API，必须手动监听 scroll、计算可视区域、动态更新 innerHTML 或 textContent
想用类 virtualizer 的逻辑，得自己实现核心三步：① 记录容器高度/滚动位置 ② 根据行高估算可见索引范围 ③ 只 appendChild 或 replaceChildren 当前页数据
直接对万级 <li> 全量渲染会导致强制同步布局、卡顿甚至内存溢出，这不是 CSS 能优化的问题

用 IntersectionObserver + requestIdleCallback 手动做轻量窗口化

不依赖框架时，最可控、兼容性好（Chrome 51+ / Firefox 55+）、且避免重排重绘的方法是组合使用 IntersectionObserver 和 requestIdleCallback。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

IntersectionObserver 监听“首屏上方/下方预留缓冲区”的占位 <div>，而非监听容器滚动——避免频繁触发、丢帧<li>只在空闲时段（<code>requestIdleCallback）批量更新 DOM，防止阻塞主线程
每行必须有固定高度（或预设最大高度），否则无法准确估算可视区间；动态高度需配合 ResizeObserver 缓存，复杂度陡增

示例关键逻辑：

const container = document.getElementById('list');
const rows = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
const rowHeight = 48; // 必须已知
<p>let start = 0;
let end = Math.min(20, rows.length);</p><p>function render() {
const fragment = document.createDocumentFragment();
for (let i = start; i ${rowHeight}px;
fragment.appendChild(el);
}
container.replaceChildren(fragment);
}</p><p>// 缓冲区上下各留 3 行
const topSpacer = document.createElement('div');
topSpacer.style.height = <code>${start * rowHeight}px</code>;
const bottomSpacer = document.createElement('div');
bottomSpacer.style.height = <code>${(rows.length - end) * rowHeight}px</code>;</p><p>container.replaceChildren(topSpacer, fragment, bottomSpacer);
</p>

为什么不用 MutationObserver 或 scroll 事件做监听

MutationObserver 对虚拟滚动完全无用——它监听 DOM 变更，而虚拟滚动恰恰要避免频繁变更；scroll 事件则太“勤快”，在快速滚动时每秒触发上百次，直接绑回调必然掉帧。

scroll 事件默认非被动，会阻塞滚动，加 { passive: true } 后又无法 preventDefault，但你本来也不该阻止原生滚动
靠 scrollTop + clientHeight 实时算范围看似简单，但滚动惯性、缩放、字体抗锯齿导致的亚像素偏移会让 start/end 算错，出现白屏或重复渲染
IntersectionObserver 内部由浏览器调度，天然防抖、节流，且能跨 iframe 工作，是目前唯一靠谱的“声明式可见性检测”手段

真实项目中容易被忽略的边界点

万级列表不是只要“渲染可见行”就完事——数据源变化、键盘导航、焦点管理、无障碍支持（a11y）全都会暴露手动虚拟化的短板。

用户按 PageDown 或用鼠标滚轮快速跳转时，IntersectionObserver 的回调可能延迟一两帧，需额外监听 keydown 对 ArrowDown/PageDown 做“预测性预加载”
屏幕阅读器依赖完整 DOM 结构，仅渲染可见行会导致 role="list" 下无子项，必须用 aria-live="polite" + 动态更新 aria-setsize/aria-posinset
如果后端分页返回的是“当前页数据”，而不是全量数组，那根本不需要前端虚拟滚动——应优先确认数据获取方式是否合理
行内有图片或异步组件时，不能只靠高度估算；得等内容加载完成再通知 virtualizer 重算，否则撑开高度导致后续行错位