HTML语义化标签应替代冗余div/span，正确使用header/nav/main等标签并注意section需有标题、article需可独立分发、aside需附属但可独立；需减少DOM深度与冗余属性，内联关键CSS、异步加载JS，图片须加loading="lazy"、srcset及宽高属性。
HTML 语义化标签要替掉一堆 <div> 和 <span>
用错或滥用 <div> 是 HTML 性能与可维护性的隐形杀手。它不传递任何结构或含义，导致屏幕阅读器难理解、SEO 抓取弱、CSS 选择器耦合高。
该用 <header>、<nav>、<main>、<article>、<section>、<footer> 的地方，别硬塞 <div class="header">。
注意几个易错点：
-
<section>不等于“一个视觉区块”，它必须有标题（<h1>–<h6>），否则语义失效 -
<article>适合能独立分发的内容（如博客正文、新闻条目），不是所有卡片都该套它 -
<aside>不是侧边栏容器，而是与主内容“附属但可独立存在”的内容（如引用、术语解释）
减少 DOM 深度和冗余属性，特别是 id 和 class
DOM 节点过多、嵌套过深（>6 层）会拖慢渲染和 JS 查询速度。常见诱因是模板引擎盲目展开、手写重复结构、或为每个元素加 id 方便调试。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 删掉没被 JS 或 CSS 引用的
id—— 它们只增加解析负担，且可能引发全局命名冲突 - 避免“过度类名”：比如
class="btn btn-primary btn-lg btn-block"中，btn-block很可能只是临时样式，应由父容器控制宽度 - 用 CSS 自定义属性（
--size-sm）替代大量尺寸类，减少类名爆炸 - JS 操作优先用
data-*属性（如data-track-id="search-submit"），而非依赖id或无意义的class
内联关键 CSS，延迟非关键 JS，禁用 render-blocking 资源
浏览器遇到 <link rel="stylesheet"> 或 <script>（无 async/defer）会暂停 HTML 解析，造成白屏延迟。这是首屏加载最常被忽视的瓶颈。
关键动作：
- 提取首屏必需的 CSS（比如 header、hero 区样式），用
<style>内联在<head>中；其余 CSS 放<link rel="preload" as="style" href="…">+<link rel="stylesheet" media="print" onload="this.media='all'">异步加载 -
<script>标签必须带async（第三方分析脚本）或defer（模块化业务逻辑），禁止放在<head>里直接执行 - 移除已废弃的
language、type="text/javascript"等冗余属性 —— 它们不提供功能，只占字节
<head> <style> /* 首屏关键 CSS */ </style> <link rel="preload" as="style" href="main.css"> <link rel="stylesheet" media="print" onload="this.media='all'" href="main.css"> </head> <body> <script src="analytics.js" async></script> <script src="app.js" defer></script> </body>
图片与资源路径必须带 loading="lazy" 和有效 srcset
未优化的图片是 HTML 页面体积最大头号来源，而 <img> 默认同步加载、无响应式适配，极易触发 CLS（布局偏移）和长任务阻塞。
务必检查并修正：
- 所有
<img>必须含loading="lazy"（除首屏核心图），否则滚动前就拉取全部图片 - 必须提供
width和height属性（哪怕用 CSS 覆盖），防止重排；现代做法是用aspect-ratioCSS 替代，但 HTML 属性仍是 fallback -
srcset要覆盖主流设备像素比（1x,2x）和视口宽度（320w,768w,1200w），配合sizes告诉浏览器如何选 - 避免
<img src="placeholder.jpg">这类“先占位再 JS 替换”的写法 —— 它破坏预加载器，且 JS 失败时图片永远空白
<img
src="photo-320.jpg"
srcset="photo-320.jpg 320w,
photo-768.jpg 768w,
photo-1200.jpg 1200w"
sizes="(max-width: 320px) 280px,
(max-width: 768px) 720px,
1140px"
width="1140"
height="640"
loading="lazy"
alt="描述性文字">HTML 优化真正的难点不在语法，而在「克制」—— 克制加 class 的冲动、克制嵌套的惯性、克制把 JS 当万能胶的依赖。每次写标签前多问一句：这个节点是否真有必要？它的语义是否准确？它的资源是否真的现在就要？
