告别页面卡顿！用空闲进程渲染打造高性能图片加载体验
有以下工作场景？
- 打开一个图片密集型页面时，浏览器像被按下了慢放键
- 滚动页面时，图像加载导致页面抖动卡顿
- 想要快速操作页面，但因为图片在后台疯狂加载而反应迟缓
这些问题的根源往往是主线程被阻塞。当我们的代码一次性执行大量DOM操作或资源加载时，浏览器无法及时响应用户交互，导致体验极差，使用requestIdleCallback可以解决这个问题，在此基础上做了代码优化。
// 封装的requestIdleWork函数
function requestIdleWork(workFn, timeout = 100) {
if (typeof requestIdleCallback === 'function') {
requestIdleCallback(nonEssentialWork, { timeout })
} else {
// 降级为setTimeout
setTimeout(workFn, timeout)
}
function nonEssentialWork(deadline) {
// 如果帧内有富余的时间，或者超时
if ((deadline?.timeRemaining && deadline.timeRemaining() > 0) || (timeout && deadline?.didTimeout)) {
workFn()
} else {
requestIdleCallback(nonEssentialWork, { timeout })
}
}
}
// 调用方法
requestIdleWork(loadImages, 1000);
