HTML嵌套过深会拖慢首屏渲染，因浏览器流式解析时每层嵌套均增加DOM节点创建与样式计算开销，超6层需警惕；应优先用语义化标签替代冗余div，script须加defer/async或置于</body>前，首屏内容须前置以优化LCP。
为什么 div 套 div 会拖慢首屏渲染？
不是因为浏览器解析 div 慢，而是它迫使你额外写 CSS 定义结构角色，导致样式文件体积膨胀、重排重绘更频繁。语义化标签自带默认样式逻辑（比如 nav 有隐式 display: block，main 被浏览器赋予明确的可访问性角色），能减少 CSS 重置和 JS 补偿逻辑。
常见错误现象：
- 用
<div class="header">替代<header>，结果在无障碍测试中被屏幕阅读器忽略导航意图 - 多个
<section>嵌套却没配h2–h6，导致搜索引擎无法识别内容层级
实操建议：
- 页面级容器优先用
<header>、<main>、<footer>，不要嵌套在<div>里 -
<main>必须且只能出现一次，且应包裹全部主体内容（不含侧边栏、广告等） - 避免把
<article>当样式盒子用——它必须能独立分发、RSS 订阅或被搜索引擎单独索引
<time datetime="..."> 不只是格式好看，它影响 SEO 和缓存策略
纯文本 “2024年3月15日” 对机器毫无意义；加上 <time datetime="2024-03-15">2024年3月15日</time> 后，搜索引擎能提取时间戳用于排序，CDN 或 Service Worker 也能据此做内容新鲜度判断。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 博客文章发布时间、活动截止时间、新闻稿时效标识
- 配合
pubdate属性（已废弃）不如直接用datetime+ 结构位置来表达
容易踩的坑：
-
datetime值必须是机器可解析格式（如YYYY-MM-DD或YYYY-MM-DDThh:mm:ss），不能是"昨天"或"下周三" - 不要给非时间内容硬套
<time>，比如“第3章”或“用户ID：10086” - 同一页面多个
<time>标签，若语义不同（如发布 vs 更新），建议加class区分，但不要依赖 class 做机器识别
<button> 和 <div onclick> 的性能差异远不止键盘焦点
表面上是点击事件绑定方式不同，实质是浏览器对 <button> 有原生 focus/active 状态管理、默认表单提交行为、以及可被 form 自动收集的 value 属性。用 <div onclick> 模拟按钮，等于手动补全整套交互链路。
性能与兼容性影响：
- 每次模拟 focus 状态都要触发 layout → paint → composite 流程，而原生
<button>在 focus 时只更新合成层 - 移动端 Safari 对非
<button>元素的touchstart延迟 300ms，除非加touch-action: manipulation - 辅助技术（如 VoiceOver）默认跳过无 role 的
<div>，即使你写了role="button"，也缺失内置的 keyboard event 处理（Enter/Space）
实操建议：
- 所有可点击、有交互意图的控件，只要不涉及复杂布局，一律用
<button> - 需要自定义样式时，用
appearance: none重置，而不是放弃语义 - 表单内按钮必须带
type属性：type="submit"、type="reset"或type="button"，否则可能意外触发表单提交
语义化不是加标签越多越好，<aside> 和 <section> 的边界在哪？
关键看内容与主内容的关系是否“附属但相关”。<aside> 不是侧边栏容器，而是语义容器：它可以出现在 <article> 内部（如术语解释框），也可以在页面级（如相关推荐）。而 <section> 是逻辑分组，没有独立传播价值。
判断依据：
- 这段内容删掉，主内容是否依然完整、可理解？如果是，大概率是
<aside> - 这段内容能否被 RSS 抓取为独立条目？如果能，该用
<article>，不是<section> -
<section>必须有标题（<h2>–<h6>），否则它只是个无意义的分组，不如用<div>
容易被忽略的地方：
-
<aside>可以嵌套在<article>里，但不能替代<figure>—— 图片说明用<figure><figcaption>，不是<aside> - 多个
<section>并列时，它们的标题层级必须连续（h2→h3→h4），跳级会导致结构解析失败 - 浏览器对
<aside>的默认样式极弱，别指望它自动右浮动——那是 CSS 该干的事
