第一行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 完”。



















