html嵌套过深会拖慢首屏渲染，因浏览器流式解析时每层嵌套均增加dom节点创建与样式计算开销，超6层需警惕；应优先用语义化标签替代冗余div，script须加defer/async或置于前，首屏内容须前置以优化lcp。

为什么 div 套 div 会拖慢首屏渲染？

不是因为浏览器解析 div 慢，而是它迫使你额外写 CSS 定义结构角色，导致样式文件体积膨胀、重排重绘更频繁。语义化标签自带默认样式逻辑（比如 nav 有隐式 display: block，main 被浏览器赋予明确的可访问性角色），能减少 CSS 重置和 JS 补偿逻辑。

常见错误现象：

• 用 <div class="header"> 替代 <code><header></header>，结果在无障碍测试中被屏幕阅读器忽略导航意图
• 多个 <section></section> 嵌套却没配 h2–h6，导致搜索引擎无法识别内容层级

实操建议：

• 页面级容器优先用 <header></header>、<main></main>、<footer></footer>，不要嵌套在 <div> 里 <li> <code><main></main> 必须且只能出现一次，且应包裹全部主体内容（不含侧边栏、广告等）
• 避免把 <article></article> 当样式盒子用——它必须能独立分发、RSS 订阅或被搜索引擎单独索引

<time datetime="..."></time> 不只是格式好看，它影响 SEO 和缓存策略

纯文本 “2024年3月15日” 对机器毫无意义；加上 <time datetime="2024-03-15">2024年3月15日</time> 后，搜索引擎能提取时间戳用于排序，CDN 或 Service Worker 也能据此做内容新鲜度判断。

使用场景：

• 博客文章发布时间、活动截止时间、新闻稿时效标识
• 配合 pubdate 属性（已废弃）不如直接用 datetime + 结构位置来表达

容易踩的坑：


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• datetime 值必须是机器可解析格式（如 YYYY-MM-DD 或 YYYY-MM-DDThh:mm:ss），不能是 "昨天" 或 "下周三"
• 不要给非时间内容硬套 <time></time>，比如“第3章”或“用户ID：10086”
• 同一页面多个 <time></time> 标签，若语义不同（如发布 vs 更新），建议加 class 区分，但不要依赖 class 做机器识别

<button></button> 和 <div onclick> 的性能差异远不止键盘焦点 <p>表面上是点击事件绑定方式不同，实质是浏览器对 <code><button></button> 有原生 focus/active 状态管理、默认表单提交行为、以及可被 form 自动收集的 value 属性。用 <div onclick> 模拟按钮，等于手动补全整套交互链路。 <p>性能与兼容性影响：</p> <ul> <li>每次模拟 focus 状态都要触发 layout → paint → composite 流程，而原生 <code><button></button> 在 focus 时只更新合成层

移动端 Safari 对非 <button></button> 元素的 touchstart 延迟 300ms，除非加 touch-action: manipulation

辅助技术（如 VoiceOver）默认跳过无 role 的 <div>，即使你写了 <code>role="button"，也缺失内置的 keyboard event 处理（Enter/Space）

实操建议：

• 所有可点击、有交互意图的控件，只要不涉及复杂布局，一律用 <button></button>
• 需要自定义样式时，用 appearance: none 重置，而不是放弃语义
• 表单内按钮必须带 type 属性：type="submit"、type="reset" 或 type="button"，否则可能意外触发表单提交

语义化不是加标签越多越好，<aside></aside> 和 <section></section> 的边界在哪？

关键看内容与主内容的关系是否“附属但相关”。<aside></aside> 不是侧边栏容器，而是语义容器：它可以出现在 <article></article> 内部（如术语解释框），也可以在页面级（如相关推荐）。而 <section></section> 是逻辑分组，没有独立传播价值。

判断依据：

• 这段内容删掉，主内容是否依然完整、可理解？如果是，大概率是 <aside></aside>
• 这段内容能否被 RSS 抓取为独立条目？如果能，该用 <article></article>，不是 <section></section>
• <section></section> 必须有标题（<h2></h2>–<h6></h6>），否则它只是个无意义的分组，不如用 <div> <p>容易被忽略的地方：</p> <ul> <li> <code><aside></aside> 可以嵌套在 <article></article> 里，但不能替代 <figure></figure> —— 图片说明用 <figure><figcaption></figcaption></figure>，不是 <aside></aside>
• 多个 <section></section> 并列时，它们的标题层级必须连续（h2 → h3 → h4），跳级会导致结构解析失败
• 浏览器对 <aside></aside> 的默认样式极弱，别指望它自动右浮动——那是 CSS 该干的事