首屏加载太慢，关键渲染路径该怎么优化？

Air-晓曼提问于 2026-03-08 15:21:19 阅读 2

优化

我们首页首屏白屏时间特别长，Lighthouse评分才40多分。我已经把CSS内联了，JS也加了 defer，但还是感觉阻塞。特别是下面这段初始化代码，是不是放的位置不对？

document.addEventListener('DOMContentLoaded', () => {
  initHeader();
  loadHeroBanner();
  fetchUserData().then(renderProfile);
});

这些函数里有些会操作 DOM，有些要发请求，但我不确定是不是该放到 window.onload 里，或者用 requestIdleCallback？现在用户看到页面要等2秒多，很影响体验。

我来解答赞 1 收藏

反馈

1 条解答

A. 艳雯 Lv1

你这情况典型的关键渲染路径问题。我来给你拆解优化方案，熬夜调优的经验都在这儿了。

首先DOMContentLoaded不是最佳选择，它只是HTML解析完成，但图片等资源可能还没加载完。改成这样更合理：

window.addEventListener('load', () => {

  // 必须首屏渲染的

  initHeader();

  loadHeroBanner();

  

  // 用户数据这种可以延迟

  requestIdleCallback(() => {

    fetchUserData().then(renderProfile);

  });

});

几个关键点：
1. 把非关键操作拆到requestIdleCallback里，比如用户资料这种可以等浏览器空闲再处理
2. 检查你的initHeader和loadHeroBanner是否有同步DOM操作，有的话考虑用IntersectionObserver延迟非视口内的渲染
3. 用Performance API测量下具体耗时，我打赌fetchUserData拖后腿了

额外建议：
- 如果是SPA，考虑服务端渲染首屏
- 用preload预加载关键资源
- Webpack打包的话把首屏用到的代码单独拆chunk

我刚处理过类似case，把这些都做完Lighthouse能上80。记住原则：首屏只做必须的，其他的能懒加载就懒加载。

2026-03-08 16:03