HTML模板优化核心是精准使用语义化标签（如<nav>、<main>、<section>需配标题）、避免冗余<div>、控制脚本加载（defer/async）、消除幽灵嵌套，并合理预加载关键资源。
HTML模板的代码结构优化，核心是让浏览器更快解析、开发者更易维护、辅助技术更准识别——不是堆砌新标签，而是用对标签、管住嵌套、压平逻辑。
怎么选语义化标签而不是一堆 <div>
用错标签会让 DOM 树变“胖”，还拖慢可访问性检测和 SEO 解析。比如把导航栏写成 <div class="nav">，屏幕阅读器就无法识别这是导航区块；而换成 <nav>，它会主动 announce “navigation”。
-
<main>只能出现一次，且必须包裹页面主体内容（非页头/页脚/侧边栏） -
<section>要有明确标题（<h2>或带aria-labelledby），否则不如用<div> -
<aside>不等于“右边栏”，而是指与主内容相关但可独立存在的补充信息（如文章侧边引用、作者简介） - 避免嵌套
<header>里再套<header>：子模块用<h2>～<h6>表达层级，不是靠标签堆叠
为什么 <script> 放 <body> 底部还不够
放底部只是历史妥协方案，现代 HTML 模板必须明确控制执行时机。没加 defer 或 async 的外部脚本，哪怕在 </body> 前，也会阻塞 DOM 构建——尤其当它前面有 <link rel="stylesheet"> 时，CSSOM 构建会被卡住，首屏白屏时间直接拉长。
- 核心业务逻辑 JS（如路由、状态初始化）必须加
defer，确保按顺序执行且不阻塞 - 统计、埋点、广告等无依赖脚本用
async，但别指望它们加载完成后再操作 DOM - 内联脚本（
<script>xxx</script>）默认阻塞，除非你明确写了type="module"（此时自动 defer） - 别在
<head>里混写 CSS<link>和没加defer的<script>，这是首屏性能杀手
如何避免模板中出现“幽灵嵌套”和冗余 wrapper
很多模板引擎（如 EJS、Nunjucks）或组件框架（如 Alpine.js）会诱导开发者多套一层 <div> 来承载条件逻辑或循环，结果生成大量无语义、无样式的空容器，DOM 节点数暴增，CSS 选择器匹配也变慢。
立即学习“前端免费学习笔记（深入）”；
- 用
<template>包裹条件渲染块（v-if/ngIf/{% if %}），它不会出现在最终 DOM 中 - 循环列表优先用
<ul>+<li>，而非<div>+<div>；若真不需要语义，至少用<ol>或<dl>明确意图 - 移除所有仅用于
class或id的“占位<div>”，改用伪类（::before）、CSS 容器查询或直接给父元素加样式 - 警惕构建工具自动注入的 wrapper（如 Webpack 的
html-webpack-plugin默认加<div id="app">），确认是否真有必要
<link rel="preload"> 该不该加、加在哪
预加载不是“越多越好”，它是向浏览器发出强提示：“这个资源我马上就要”。错用会导致带宽争抢、关键资源被挤掉，反而更慢。
- 只对
DOMContentLoaded前必须就绪的资源 preload：比如首屏字体（as="font"）、关键 CSS（as="style"）、首屏 hero 图（as="image"） -
<link rel="preload">必须放在<head>里，且在对应资源的实际<link>或<script>标签之前 - 字体 preload 必须加
crossorigin属性，否则 Chrome 会拒绝使用（即使同域） - 别对 JS 模块 preload ——
defer已经处理了下载时机，preload 只会提前下载，不改变执行顺序，还可能干扰 HTTP/2 流优先级
真正难的不是记住哪些标签该用，而是每次写模板时下意识问一句：这个节点有没有独立语义？它的存在是否让 DOM 更清晰、更轻、更容易被机器和人同时理解？
