浏览器空闲回调 requestIdleCallback 在长列表渲染中的取舍
原创
浏览器空闲回调 requestIdleCallback 在长列表渲染中的取舍
超哥前端记录
发布于 2026-10-08 09:23:32
发布于 2026-10-08 09:23:32
概述
有个后台管理系统需要一次性展示 2000 多条订单记录，每条包含状态、金额、操作按钮和一段备注。直接 mount 全部 DOM 后，页面在低端设备上会出现明显的点击延迟，输入框打字也会卡顿。最开始用 setTimeout 分片渲染，每 16ms 插入 50 条，但定时器并不感知主线程是否真的空闲，反而和用户输入争抢执行时间。后来尝试 requestIdleCallback，它在浏览器每帧末尾的空闲
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号