首屏预读机制是在首屏渲染完成、用户可交互后，利用主线程空闲时机按需加载非首屏必需但复用率高的数据，通过requestIdleCallback节制执行、状态标记防重复，并在DOM就绪后延迟启动。
首屏按需“预读”（Pre-read）机制的核心，不是提前把所有数据从本地存储（如 IndexedDB 或 localStorage）一股脑读出来，而是在首屏渲染完成、用户可交互之后，利用主线程空闲时机，悄悄加载后续可能用到的数据，避免阻塞关键渲染路径。关键在于“不抢资源、不打断、有节制”。
明确哪些数据属于“预读”范围
预读的数据必须满足两个条件：非首屏必需、有较高复用概率。例如：
- 用户个人设置（主题、语言、通知偏好）——虽不参与首屏渲染，但几乎每个页面都会用到
- 常用下拉选项列表（城市、分类、标签）——首屏没展示，但用户点击后 2 秒内大概率要查
- 离线缓存的最近几条消息摘要——首页只显示头像和未读数，详情页才需完整内容
不要预读全量历史记录、用户全部好友列表这类低频或体积过大的数据。
用 RequestIdleCallback 触发轻量级读取
RequestIdleCallback 是浏览器提供的空闲调度 API，它会在主线程空闲时执行回调，且自动中断长任务，适合做低优先级 I/O。注意三点：
- 必须检查
deadline.timeRemaining() > 1，只在还有足够空闲时间时才执行读取逻辑 - 每次只读一条或一个小批次（如最多 3 条记录），避免单次操作耗时过长导致被中断后重试失败
- 带上超时兜底：
setTimeout作为 fallback，防止极端空闲不足时数据永远不加载
示例伪代码：
const preloadUserData = () => {
requestIdleCallback((deadline) => {
if (deadline.timeRemaining() > 1) {
// 安全读取用户设置
readFromIndexedDB('user_settings').then(data => cacheInMemory(data));
} else {
// 时间不够，延后重试一次
setTimeout(preloadUserData, 100);
}
}, { timeout: 2000 });
};
配合状态标记与防重复机制
预读是后台行为，需避免多次触发或重复加载。建议：
- 用全局布尔标志（如
window.__preReadDone = { user_settings: true }）记录已完成项 - 在预读前先检查 IndexedDB 中对应 store 是否已存在有效缓存（比如加个
last_updated时间戳） - 如果组件挂载时发现所需数据尚未预读完，可主动降级为同步读取（仅限首次必要场景），并标记“已触发预读”，避免二次发起
首屏完成后才启动预读链路
不能一进页面就调 requestIdleCallback。正确时机是：
-
DOMContentLoaded后等待requestAnimationFrame+setTimeout(..., 0)确保样式布局完成 - 更稳妥的做法：监听
performance.getEntriesByType('navigation')[0].domContentLoadedEventEnd，再延迟 50–100ms 启动 - 若使用框架（如 React），可在
useEffect(() => { ... }, [])里启动，但需确保该 effect 在真实 DOM 挂载后执行
目标是让预读真正发生在“用户已经看到界面、开始滚动或点击之前”的间隙，而不是和首屏 JS 执行争抢资源。
