核心是将一次性渲染拆分为≤50ms的小块，用requestidlecallback或requestanimationframe分批插入dom，配合documentfragment批量操作；数据量大且高度固定时优先用虚拟滚动，并规避回流重绘陷阱。

核心是把一次性渲染拆成小块，让浏览器有空处理滚动、点击等交互，避免主线程被锁死。关键不在于“分多少页”，而在于“每块执行时间别超 50ms”。

用 requestIdleCallback 分批插入 DOM

这是最贴合浏览器调度机制的方式：只在空闲时干活，自动避开动画帧和用户输入。

• 每次最多创建并插入 20–50 条元素，用 DocumentFragment 批量操作，避免反复触发 layout
• 执行完一批后，调用 deadline.timeRemaining() > 1 判断是否还有空闲时间，有就继续，没有就交还控制权
• 适合数据量中等偏大（如单页 2000–10000 条）、需兼顾兼容性与流畅性的场景

用 requestAnimationFrame 控制渲染节奏

当需要更确定的帧级调度（比如配合滚动位置更新），或者 requestIdleCallback 在旧版 Safari 中不可用时，可用此替代。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• 每批渲染后调用 requestAnimationFrame，确保下一次渲染发生在下一帧开始前
• 比 setTimeout(, 0) 更精准，不会因任务队列拥堵而延迟
• 示例中常设 chunkSize = 40，既不过载，也不因太碎增加调度开销

高度固定时直接上虚拟滚动

如果列表项高度一致，且总数据量上万，长任务切片只是过渡方案——真正高效的解法是虚拟滚动。

• 外层容器设固定高 + overflow-y: auto，内部用一个高占位元素撑起总高度（totalHeight = itemHeight × data.length）
• 滚动时根据 scrollTop 实时算出可视区域起止索引，只渲染约 30–50 个节点（含缓冲区）
• 用 transform: translateY() 或 top/padding 定位内容，完全绕过重排

顺手清理其他性能陷阱

切片或虚拟滚动再好，也扛不住配套疏忽。

• 避免在滚动监听里做复杂计算或频繁读取 offsetHeight 等触发回流的属性
• 列表项内少用 inline-style 或强制重绘的 CSS（如 filter、box-shadow）
• 用 key 稳定节点（尤其 React/Vue），防止复用错乱导致重复渲染