fcp超1秒主因是关键资源未抢占html解析“首发位”，需将内联css紧贴后、禁用@import等阻塞语法、非首屏html改用暂存，并确保置于所有css之后。
首屏渲染阻塞不是因为用了
还是，而是关键资源没抢到解析顺序的“首发位”——关键CSS内联必须紧贴
非首屏HTML别用
<style></style>放错位置、<link rel="stylesheet">没隔离、非首屏HTML提前构建，这三件事做错任意一个，FCP就稳超1秒。
关键CSS内联必须紧贴<meta charset>之后
浏览器按顺序解析HTML，<style></style>标签的位置决定它能否参与初始渲染树构建。如果它被<title></title>、<meta name="viewport">甚至一个空行隔开，浏览器就会先去加载后面那个<link rel="stylesheet" href="main.css">，导致白屏卡住。
-
<style></style>必须是中第一个非<meta charset>的标签，顺序只能是：<meta charset="utf-8">→<style></style>→ 其他 - 内联内容里禁止出现
@import、@font-face、url()——这些仍会触发额外请求，退化为阻塞源 - 体积控制在1KB以内（gzip后），实测超过2KB，在3G网络下TTFB延迟明显上升
- 提取不能靠人工截取，要用
critters或critical驱动Puppeteer模拟iPhone SE（375×667）视口捕获真实首屏DOM所用规则
非首屏HTML别用display: none包裹
display: none只是不绘制，但DOM节点照常构建、CSSOM照常匹配、内存照常占用——它根本没减少关键渲染路径负担，反而让浏览器多做无用功。
- 轮播图下方的商品列表、评论区、侧边栏等，应改用
<template></template>暂存，滚动触达或tab切换时再动态innerHTML插入 - Tab类组件初始只保留激活态HTML，其余用
data-html属性存字符串，避免解析和样式计算 - 服务端渲染（SSR）场景下，对非首屏区块返回空
<div id="comments"></div>，由前端JS按需fetch并挂载 - Chrome DevTools → Rendering → Layers面板可直观看到首屏区域是否混入大量不可见节点
<script></script>加defer≠解决所有问题
加了defer确实不阻塞HTML解析，但它会在DOM构建完成后、DOMContentLoaded前执行——如果脚本依赖某个尚未注入的内联<style></style>或未完成hydration的React节点，照样报错或失效。
-
<script src="app.js" defer></script>必须放在所有<link rel="stylesheet">之后，否则可能执行时CSSOM还没就绪 - 现代项目优先用
<script type="module"></script>，它天然defer且支持import按需，避免竞态 - 统计类脚本（如GA、Sentry）用
async更合适，它们不操作DOM，下载完立刻执行不影响主流程 - 内联小逻辑（如
console.log）若不操作DOM，可加defer；若必须同步，就拆成外部文件再加defer，别留在顶部
<link rel="preload">只对浏览器无法自动发现的资源有效
浏览器能自动发现<img src>、<script src></script>、<link rel="stylesheet">里的资源，preload只该用于它“看不见但你马上就要”的情况。
- 首屏背景图：用
<link rel="preload" href="hero.jpg" as="image">+<img src="hero.jpg" fetchpriority="high" loading="eager"> - 关键Web字体：必须带
crossorigin，否则会被拒绝加载，例如<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> - 不要
preload所有<script></script>——它不改变执行时机，反而抢占带宽，挤掉真正关键的图片或字体 - 判断标准很简单：这个资源是否在
DOMContentLoaded前就必须就位？如果不是，preload就是干扰项
最容易被忽略的是：内联<style></style>没有缓存，每次HTML变更都得重传全部样式；而<template></template>里存的HTML字符串，一旦服务端没做哈希校验，前端JS注入时可能匹配不到对应节点——结构优化不是改几个标签的事，是整条构建链路的协同校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
