首屏白屏超1秒主因是关键渲染路径阻塞：关键CSS必须内联（≤14KB）以避免阻塞DOM构建，非关键CSS用media="print" onload延迟加载，非首屏HTML应“零渲染”（template或动态插入），preload仅用于浏览器无法自动发现的关键资源。
首屏白屏超1秒，八成不是后端慢，而是HTML结构和样式加载顺序没理清——关键渲染路径被阻塞了。
关键CSS为什么必须内联、且不能超14KB
浏览器解析到时会暂停 DOM 构建，直到 CSSOM 完成；而内联
- 只内联首屏必需的样式（如
header、.hero、按钮基础态），通常占原始 CSS 体积的 10%–30% - 内联内容建议控制在 ~14KB（gzip 后约 4–8KB），避免跨 TCP 包影响 TTFB
- 禁止在
<style>中使用@import或@font-face——它们仍会触发额外请求并阻塞 - 若启用 CSP，需加
nonce（如<style nonce="abc123">）并在响应头中同步配置
非关键CSS怎么延迟加载才不拖慢首屏
@import 是串行阻塞式加载，实测拖慢 FCP 300ms+；用 media="print" + onload 是更轻量、兼容性更好的异步方案。
- 推荐写法：
<link rel="stylesheet" media="print" onload="this.media='all'" href="non-critical.css"> - IE 不支持
onload，需降级 fallback（如用document.addEventListener('DOMContentLoaded', ...)） - 条件加载优先用
media属性，比如media="(prefers-color-scheme: dark)"或media="(min-width: 1024px)" - 慎用
<link rel="preload" as="style">：它只提前下载，不改变应用时机，必须配对真实rel="stylesheet"，且两个href字符串必须完全一致
非首屏HTML结构怎么做到“零渲染”
所谓“非首屏”，是指用户滚动前不可见、且不参与初始布局计算的内容。强行渲染它们会延长 DOM 构建时间、增加内存占用，并可能触发无谓重排。
立即学习“前端免费学习笔记（深入）”；
- 轮播图下方的推荐列表、评论区、侧边栏等，改用
<template>或纯 JS 动态插入（innerHTML或document.createElement） - tab 切换类内容，初始只保留激活 tab 的 HTML，其余用
data-html属性暂存字符串，切换时再解析挂载 - 慎用
display: none包裹非首屏区块——它仍会参与 CSSOM 计算和 DOM 构建，只是不绘制；真正要的是“不创建” - Chrome DevTools 的 Rendering > FPS Meter 和 Layers 面板可帮你确认首屏区域是否包含大量隐藏/折叠节点
preload 加错反而拖慢首屏
<link rel="preload"> 不是“越多越好”，滥用会抢占带宽、挤掉真正关键的资源。它只对当前导航中「确定马上要用」的资源有效。
- 只预加载首屏强依赖、且浏览器无法自动发现的资源：如首屏背景图、跨域字体（必须加
crossorigin）、as="font"或as="image" - 别对
main.js这类已用defer的脚本再preload——属于冗余调度 - 别对所有
<img loading="lazy">都加preload——浏览器可能先加载src，再触发懒加载，造成重复请求 - 验证是否生效：Chrome DevTools → Network 面板，看预加载资源的
Priority是否为high
最容易被忽略的是：内联关键 CSS 里混入了 @font-face 或未压缩的 base64 图片，表面看“没发请求”，实际仍会触发阻塞；还有人把整个 main.css 塞进 <style>，结果 HTML 变大、TTFB 拉长，白屏更久。
