浏览器和爬虫不读class名，只认语义标签，因此用div class="header"代替header会导致SEO丢权重、屏幕阅读器误读、querySelector失效；必须用语义化标签如header、main、nav、article替代纯div容器。

为什么 <div class="header"> 这类写法会让解析器“猜谜”<p>浏览器和爬虫不读 class 名，只认语义标签。写 <code><div class="header"> 等于把“这是页眉”藏在 CSS 类里，解析器只能跳过、等待 JS 补充或直接忽略——SEO 丢权重、屏幕阅读器读成“一堆 div”，连 <code>document.querySelector('header') 都找不到。

• 必须用 <header></header> 替代 <div class="header">，同理 <code><nav></nav>、<main></main>、<footer></footer> 不可替换为带 class 的 <div> <li> <code><main></main> 全局只能出现一次，且不能嵌套在 <section></section> 或 <article></article> 内；若误写成 <section><main>...</main></section>，部分辅助技术会直接跳过该 <main></main>
• 纯布局容器（如三栏 wrapper）优先用 display: grid 或 display: flex，删掉中间两层 <div class="row"><div class="col"></div></div>

<script></script> 放错位置导致白屏的三种典型场景

不是脚本本身慢，是它强行中断 HTML 解析流。一个没加 defer 的外链脚本放在 里，DOM 树建到一半就卡住，用户看到空白页面，而资源监控里可能只显示“JS 下载慢”——实际是阻塞逻辑被掩盖了。

• 内联脚本（<script>console.log(1)</script>）默认阻塞，必须加 defer 或改用事件监听（如 DOMContentLoaded）
• 外链脚本：需要保证执行顺序（如依赖库 → 业务代码），用 defer；独立模块（统计、埋点）用 async
• <script src="a.js" defer></script> 和 <script src="b.js" defer></script> 按书写顺序执行；但 async 不保证，b.js 可能先下载完先跑

清理无效标签时最容易被忽略的四个“隐形坑”

删 <script></script> 和 <style></style> 很直观，但以下结构残留会继续干扰解析和渲染：

• <!-- 注释 --> 虽不执行，但仍在字节流中，影响首屏前 1024 字节关键内容加载（尤其 Safari 对 <meta charset> 位置敏感）
• <div><div><div> <p>...</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a> <p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div></div></div> 这类嵌套，即使删掉最外层 <div>，剩下两层仍构成深度 >4 的 DOM，CSS 选择器匹配成本翻倍<li> <code><ul><div>...</div></ul> 违反 HTML 规范：列表子元素只能是 <li>，<div> 会被浏览器自动闭合并重建 DOM，引发不可预测的重排<li> <code><section><main>...</main></section> 中的 <main></main> 在多数浏览器中失效，不会被识别为主要内容区，document.querySelector('main') 返回 null

<link rel="preload"> 和 <link rel="stylesheet"> 的加载队列差异

preload 是高优提示，stylesheet 是阻塞指令——两者混用时顺序错位，会导致样式表延迟应用甚至 FOUC（闪白）。

• 关键 CSS 必须用 <link rel="preload" as="style" href="https://www.php.cn/link/f3e6975bb3f68258d54f8d9c3bc06204"> + 后续 <link rel="stylesheet" href="https://www.php.cn/link/f3e6975bb3f68258d54f8d9c3bc06204"> 配合，否则 preload 无效
• <link rel="stylesheet"> 默认阻塞渲染，哪怕它在 底部，浏览器仍会暂停绘制直到样式表加载并解析完成
• 图标、字体等非阻塞资源可用 rel="preload" 提前拉取，但别对 JS 用 as="script" 后又漏掉 defer，否则可能提前执行破坏依赖

真正卡顿往往不在 JS 执行时间，而在 HTML 解析中途被截断、DOM 树反复重建、或语义缺失迫使浏览器做额外推断。这些细节不报错，但会在 Lighthouse 的 “Avoid an excessive DOM size” 和 “Document uses outdated techniques” 里持续亮黄灯。