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