首屏加载

首屏加载指用户打开页面后，到首屏内容显示出来所经过的过程，涵盖浏览器拿到 HTML、构建样式与文档结构、完成首次绘制这几步^[1]。站长关心它，因为首屏是用户看到的第一屏内容，慢一点就会流失；百度也把首屏速度纳入移动落地页的体验考察^[2]。它与抓取是两回事，抓取看服务器响应，首屏看浏览器渲染。

关键渲染路径

浏览器渲染要依次经过：构建 DOM、构建 CSSOM、执行改动 DOM 或样式的脚本、合并成渲染树、计算布局、绘制、合成^[2]。这一串步骤叫关键渲染路径，首屏时间基本由它决定。

HTML 是流式处理的，浏览器拿到一部分就能开始解析。它通常不必等全部 HTML，也不必等图片与字体^[2]。会挡住首次绘制的，是 <head> 里阻塞渲染的样式与脚本。

阻塞资源

• 样式表阻塞渲染：浏览器要等样式模型建好才画第一帧，否则会先闪一下无样式内容；
• 脚本没有 async 或 defer 时会阻塞解析：解析器遇到它就停下来，等下载并执行完才继续；
• 图片与字体不阻塞首次绘制，它们晚到时会出现空位或者文字跳动。

首屏的衡量

Google 用 LCP 衡量主要内容出现得早不早，用 FCP 衡量第一次画出内容的时刻^[1]。国内侧的重点不同，百度移动落地页体验把首屏加载列入体验规范。两套口径要分开看，不要互相替代。行业数据方面，HTTP Archive 长期统计页面资源与渲染耗时，可用于对照自家站点^[4]。

改善办法

1. 内联首屏用到的关键样式，其余样式延后加载；
2. 给脚本加 defer，或者把脚本放到 </body> 之前；
3. 去掉没用的样式与脚本；
4. 压缩并缓存 HTML、CSS、JS；
5. 给字体加 font-display，减少文字等待。

改动带来的代价

内联关键样式会让 HTML 变大，重复访问时这部分缓存不到。改脚本加载方式可能改变执行顺序，依赖文档结构的代码要重新确认时机。把样式与脚本拆开维护，会增加后续每次改版的成本。

与抓取和收录的关系

首屏渲染发生在浏览器里，爬虫拿到的是服务器返回的 HTML。若首屏内容由脚本渲染，爬虫能否看到要看渲染结果，这属于渲染与收录的问题。百度把搜索分成抓取、建立索引、展现三步^[3]，这三步都发生在服务器与应用侧。

附录

参见

• LCP
• 图片优化
• 资源优先级
• 渲染

参考资料

官方（境外）

1. 《PerformancePaintTiming》，MDN Web Docs。
2. 《了解关键路径》，web.dev。

官方（国内）

3. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

第三方

4. 《Web Almanac》，HTTP Archive，2025。

外部链接

无。