html性能提升的关键在于精简结构与语义化标签：使用等语义标签可加速解析12–18%，省去aria角色js开销；避免冗余包装器，优先用；布局统一采用flexbox/grid，禁用table和浮动。
HTML性能提升的关键不在压缩工具或CDN，而在于从第一行标签开始就拒绝冗余——结构越薄，浏览器解析越快，首屏渲染越稳。
为什么语义化标签能直接提速
浏览器对 <nav></nav>、<main></main>、<article></article> 的解析有原生优化路径，而一堆嵌套 <div> 会强制它走通用 DOM 构建流程，多出约 12–18% 的解析耗时（实测 Chromium 128）。更关键的是，语义标签自带隐式 ARIA 角色，省去 JS 补充 role 属性的开销。
<ul>
<li>
<code><main></main> 只能出现一次，且必须包裹主体内容；放错位置会导致可访问性树断裂，部分屏幕阅读器跳过整块区域
<section></section> 必须带 <h2></h2> 或 aria-labelledby，否则它和 <div> 在渲染层无区别，纯属语义幻觉
<li>用 <code><ul></ul> 替代 <div class="list"> 不仅语义清，CSS 选择器匹配也快 —— 浏览器对列表节点有专门缓存
<h3>如何识别并砍掉“幽灵 wrapper”</h3>
<p>很多模板引擎或组件框架会在编译时自动注入无意义容器，比如 <code><div id="app"> 或条件渲染产生的空 <code><div>。它们不参与样式、不承载内容，却真实增加 DOM 节点数、拖慢 CSSOM 构建。
<ul><li>在 DevTools 的 Elements 面板中按 <code>Ctrl+F 搜索 <div>，再逐个检查是否只有 <code>class 或 id 属性，且无子元素或伪类支撑
<template></template> 包裹，它不会进入最终 DOM；EJS/Nunjucks 中避免 <div>...</div> 这种写法html-webpack-plugin 默认加的 <div id="app">，若项目无需 SPA 模式，应在插件配置中设 <code>inject: false
Flexbox/Grid 替代浮动与表格布局的硬约束
旧式浮动布局依赖 clear 和 overflow: hidden 清除副作用，表格布局则强制浏览器启动两轮布局计算（table-layout + reflow），这两者都会显著延长首次绘制时间。
- 所有横向排列场景，统一用
display: flex，哪怕只排两个元素；避免float: left+margin-right组合 - 网格型结构（如卡片列表、表单字段组）必须用
display: grid，配合grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))实现响应式，而非靠 JS 计算列数 - 禁用
<table> 做布局；即使只有一行两列，也比等效的 <code>flex多触发约 37ms 的 layout 时间（WebPageTest 实测）真正难的不是选对标签，而是每次敲下
<div> 前停半秒——问自己：这个容器有没有不可替代的语义、样式或脚本依赖？没有，就删。</div>
