应使用 requestIdleCallback 在主线程空闲时执行非关键任务，不支持时降级为 setTimeout；避免 DOMContentLoaded 前同步脚本阻塞；用 IntersectionObserver 替代 scroll 懒加载；关键 CSS 需内联，非关键异步加载。
用 requestIdleCallback 延迟非关键 JS 执行
浏览器主线程空闲时才执行低优先级任务，避免阻塞渲染。适合处理日志上报、预加载非首屏资源、DOM 渲染后微调等场景。
-
requestIdleCallback不是所有环境都支持（如 Safari 旧版本），需用setTimeout降级 - 回调中必须检查
deadline.timeRemaining() > 0，不能假设能跑完全部逻辑 - 不要在其中修改 DOM 或触发重排，否则可能引发布局抖动
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
// 非关键逻辑，比如埋点采集
sendAnalytics();
}, { timeout: 2000 });
} else {
setTimeout(sendAnalytics, 0);
}
避免在 DOMContentLoaded 前执行大量同步脚本
HTML 解析遇到 <script> 标签会暂停构建 DOM 树，直到脚本下载、解析、执行完成。这是首屏延迟的常见元凶。
- 把
<script>放在</body>前，或加defer属性（推荐） - 绝对不用
document.write，它会清空整个文档流 - 第三方 SDK（如统计、客服）务必用异步加载 + 动态插入方式，而非内联 script
用 IntersectionObserver 替代滚动监听做懒加载
传统 scroll 事件频繁触发 + getBoundingClientRect() 强制同步布局，极易导致卡顿；IntersectionObserver 是异步、低开销的替代方案。
- 不支持 IE，需引入 polyfill（如
intersection-observernpm 包） - 设置
rootMargin提前触发加载，比如'100px'可让图片在进入视口前就准备 - 观察器实例应复用，避免为每个图片创建新实例
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
io.unobserve(img);
}
});
}, { rootMargin: '100px' });
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));
压缩并提前加载关键 CSS，内联首屏样式
CSS 是渲染阻塞资源。浏览器必须解析完 CSSOM 才能绘制首屏，所以关键样式不能靠外部文件异步加载。
立即学习“Java免费学习笔记（深入）”；
- 用工具（如
critters或mini-css-extract-plugin+critical）提取首屏 CSS 并内联到<head> - 剩余 CSS 用
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">异步加载 - 禁用
@import：它会串行加载，破坏并行下载能力
defer 后加载，影响远小于一个 2KB 的内联脚本里反复调用 offsetHeight 触发强制同步布局。 
