HTML质量优化关键在语义化结构、非首屏内容用template延迟加载、首屏内联CSS限1.5KB且带media属性、脚本按defer/async/module分类加载。
大型 SaaS 平台的 HTML 代码质量，直接决定首屏渲染耗时、JS 执行阻塞程度和 DOM 构建稳定性；单纯压缩或删空格收效甚微，关键在结构语义、资源加载节奏和组件边界控制。
HTML 结构必须用语义化标签替代 div 堆叠
大量 <div class="card"> 或嵌套 <div><div><div> 不仅增加解析开销，还会干扰辅助技术与搜索引擎对功能区块的识别。浏览器需额外计算样式继承链，尤其在动态插入数百个卡片时，DOM diff 效率明显下降。
- 用
<article>包裹独立业务单元（如客户列表项、仪表盘卡片） - 导航区域统一用
<nav>，侧边栏用<aside>，主内容区强制<main>—— 这些标签自带隐式 ARIA role，减少 JS 补充无障碍属性的负担 - 避免
<div id="header">，改用<header>；同理<footer>、<section>替代 class-based 布局容器 - 构建工具中启用 HTML 验证插件（如
html-validate），配置规则强制禁止无语义的div深度 > 3
非首屏内容必须用 <template> 而非 display: none
很多团队用 display: none 隐藏设置页、日志详情等二级页面内容，但这类 DOM 仍参与 CSSOM 构建、样式计算和 layout 触发 —— 对含 50+ 表格列的审计日志页，首屏解析时间可能多出 120ms。
- 把整块非首屏 HTML 移入
<template id="audit-log">...</template> - 配合
IntersectionObserver监听进入视口后，再调用document.getElementById('audit-log').content.cloneNode(true)插入 DOM - 禁用所有该
<template>内部的<script>和自动播放<video>，防止预解析阶段触发副作用 - 注意：不要在
<template>中写内联样式，CSS 必须由外部文件或全局 style scope 控制
内联 CSS 仅限首屏关键样式，且必须声明 media 属性
本地大 HTML 文件（如离线报表页）用内联 CSS 确实能跳过请求，但若把整套组件库 CSS 塞进 <style>，HTML 体积飙升至 2MB+，反而拖慢 gzip 解压和 parser blocking。
立即学习“前端免费学习笔记（深入）”；
- 提取真正影响首屏渲染的样式：字体加载 fallback、按钮 loading 状态、骨架屏尺寸 —— 通常不超过 1.5KB
-
<style>标签必须带media="screen"（或更细粒度如media="(min-width: 768px)"），否则会阻塞打印样式等其他媒体类型解析 - 所有非关键 CSS 必须走
<link rel="stylesheet" href="...">，并启用preload：<link rel="preload" href="non-critical.css" as="style"> - 禁用
<style>里的@import，它会引发额外的串行请求
script 加载必须区分 defer / async / module 三类场景
SaaS 平台常因脚本加载策略混乱导致白屏、重复初始化或竞态错误。比如权限校验脚本被 async 加载，却在 DOM 尚未就绪时执行，报错 Cannot read property 'querySelector' of null。
- 框架入口脚本（如 React root render）用
defer：保证按顺序执行，且不阻塞 HTML 解析 - 埋点、监控等不影响 UI 的脚本用
async：允许并行下载，但执行时机不可控，需自行处理 DOM ready 判断 - ESM 模块化业务逻辑（如表单校验器）用
type="module"：天然支持defer行为，且具备顶层 await 和作用域隔离 - 绝对禁止在
<head>里放无defer/async的<script>—— 它会完全中断 HTML 解析
最易被忽略的是 <template> 内容的 JS 初始化时机：它不在初始 HTML 流中，所以任何依赖 DOMContentLoaded 的逻辑都不会触发，必须显式监听其挂载后的事件或使用 MutationObserver。
