应使用语义化标签替代div堆叠，控制DOM嵌套不超过三层，单容器子元素≤50个，关键资源用preload/defer加载，清理冗余代码并开启Gzip压缩。
网页结构混乱，不是样式写得丑，而是 HTML 骨架没搭对——语义错位、嵌套过深、资源加载顺序反直觉，这些问题直接导致 SEO 掉坑、首屏卡顿、辅助设备读不出来。
如何用语义化标签替代 div 堆叠
把 <div class="header"> 换成 <code><header></header> 不是“更时髦”，是让浏览器和爬虫立刻知道“这是页眉”，而不是靠 class 名猜；<article></article> 和 <section></section> 更不能混用：前者必须能独立存在（比如一篇博客、一条新闻），后者只是主题分组（比如“前端工具推荐”下并列几个工具介绍）。
-
<main></main>必须且只能出现一次，包裹页面核心内容，不可嵌套在<article></article>或<section></section>内 -
<aside></aside>不等于“右边栏”，而是与当前内容相关但可剥离的补充信息（如侧边引用、作者简介），若只是广告位，用<div role="complementary"> 更准确 <li>避免 <code><div><div><div> <p> 这类纯样式驱动的嵌套，先问自己：“这个容器有没有独立语义？”没有就删 </p> <h3>为什么 DOM 层级超过 4 层就会拖慢渲染</h3> <p>浏览器构建 DOM 树是深度优先遍历，每多一层嵌套，不仅解析耗时增加，CSS 选择器匹配成本也指数上升（比如 <code>.a .b .c .d p要逐层回溯）。实测中，单个<section></section>下子元素超 50 个，滚动时重排明显卡顿。- 用开发者工具的 Elements 面板按
Ctrl+Shift+C定位深层节点，重点查<div> 套 <code><div> 的区域 <li>Flex/Grid 布局能直接替代 2–3 层包裹容器，例如用 <code>display: grid实现三栏布局，无需外层<div class="row"> + 三个 <code><div class="col"> <li>动态列表用 <code>DocumentFragment批量插入，避免每加一项都触发一次 DOM 重排 - CSS 必须放
，但禁止在 CSS 文件里写@import：它强制串行加载，main.css里的@import "theme.css"会让浏览器等 main 下完再发 theme 请求 - 关键 JS（如首屏交互逻辑）用
<script defer></script>，非关键（统计、埋点）用<script async></script>；内联脚本（<script>init();</script>）默认阻塞，务必加defer - 字体、首屏图片用
<link rel="preload" as="font">提前拉取，但别对所有 JS preload——它不控制执行时机，反而可能挤占带宽 - 用
html-minifier-terser工具压缩，配置removeComments: true、collapseWhitespace: true，但禁用removeAttributeQuotes（IE/旧 Safari 兼容风险） - 手动检查：搜索
<div></div>、class=""、重复的id、未闭合的<meta>标签 - 服务端开启 Gzip/Brotli 压缩比 HTML 自身精简更有效，优先配 Nginx 的
gzip on而非死磕 HTML 字符数
script 和 link 的位置错误比代码写错更致命
一个没加
defer的<script src="app.js"></script>放在里，会立刻中断 HTML 解析，等 JS 下载执行完才继续——此时连都没生成，用户看到白屏。立即学习“前端免费学习笔记（深入）”；
HTML 压缩和冗余清理的实操边界
删空格换行确实减体积，但过度压缩（比如移除所有属性引号、合并布尔属性）可能破坏解析，尤其当值含空格或特殊字符时；而保留无用注释和空
class=""属性，才是真正该砍的。最常被忽略的是：语义化不是贴标签，而是理解内容关系；DOM 层级不是数嵌套，而是看浏览器是否要反复回溯；资源加载顺序不是“放哪儿”，而是“什么时候真正需要”。这些判断没法靠工具自动修复，得盯着 Network 和 Rendering 面板动手验证。
- 用开发者工具的 Elements 面板按
