第一行html必须是且紧贴文件开头，任何前置字符（含bom、空格、注释）都会触发怪异模式，导致cssom构建延迟及首帧延迟100ms+；中仅保留、、≤10kb内联关键css和字体预加载，禁用@import、砍掉非关键样式、删冗余属性与注释；开头三行须裸写首屏文案，不依赖js或容器；图片按需设loading="lazy"，脚本统一用defer（async仅限分析类），dom层级应精简至3层内、节点数控制在2000以内。
怎么写第一行HTML才不拖慢解析
DOCTYPE 必须是 ，且紧贴文件开头——任何字符（包括空格、BOM、注释）前置都会触发怪异模式，让浏览器降级解析，连带影响 CSSOM 构建和渲染流水线。Chrome 和 Safari 在弱网下尤其敏感，哪怕一个 UTF-8 BOM（<code>EF BB BF）都可能导致首帧延迟 100ms+。
只留真正影响首屏的标签：一个 <meta charset="utf-8">、一个 <meta name="viewport">、内联关键 CSS（<style></style>，体积 ≤10KB）、预加载字体（<link rel="preload" as="font">）。其余全砍：
-
@import语句禁止出现在任何<style></style>块里——它会阻塞后续 CSS 解析 -
<link rel="stylesheet">非关键样式改用<link rel="stylesheet" media="print" onload="this.media='all'">异步加载 -
type="text/css"、type="text/javascript"这类冗余属性直接删，HTML5 已默认 - 所有
<!-- comment -->注释删光，它们不渲染但占解析内存
首屏文案必须裸写在 最开头，不套容器、不依赖 JS：
<main><h1>欢迎来到首页</h1> <p>这是用户第一眼看到的内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </main>
别用 <div class="loading"> 包着等 JS 渲染；别用 <code><template></template> 或 v-if 控制显示；CMS 导出时优先选“静态 HTML 片段”，不是 JSON 占位符。弱网下 JS 可能超时，但这段 HTML 一定能出来。
图片和脚本的加载顺序怎么写才不抢带宽
首屏 <img> 去掉 loading 属性（默认 eager），非首屏一律加 loading="lazy"；所有外部脚本加 defer，放 里即可：
<script src="app.js" defer></script><script src="analytics.js" async></script>
注意：async 脚本不能访问 document.getElementById，因为执行时机不可控；defer 脚本按书写顺序执行，适合初始化逻辑；<script>console.log()</script> 内联脚本除非极小且必须同步（如 CSP nonce 注入），否则一律转外链 + defer。
实际项目中最容易被忽略的，是 DOM 层级本身——首屏结构超过 3 层嵌套、document.querySelectorAll('*').length 超过 2000，浏览器解析成本就不是线性增长了。优化不只在资源加载，更在 HTML 是否“轻得能一口气 parse 完”。
