和不能互换，因前者需有标题且表逻辑区块，用于结构化数据提取与辅助技术识别；后者无语义，仅作样式或交互容器。

现代HTML标签优化不是换几个新标签就完事，而是让每个标签承担明确语义、触发恰当渲染行为、并配合浏览器机制减少隐性开销。

为什么

和

不能随便互换

语义错误不会报错，但会干扰浏览器解析节奏和辅助技术理解。比如用

替代

，会导致：屏幕阅读器无法识别内容区块边界；搜索引擎无法提取结构化数据（如 FAQ 或文章章节）；document.querySelectorAll("section") 拿不到你“以为”的节区。

• 必须有显式标题（
  –
  ），否则语义不成立
• 纯样式容器（如 flex 包裹器、栅格父级）仍该用
  ，强行语义化反而误导
• 在整个文档中只能出现一次，且不应嵌套在
  或
  内

loading="lazy" 配合 width/height 才真正防抖动

只加 loading="lazy" 而不设尺寸，图片加载完成瞬间会重排布局——文字上跳、按钮位移、CTA 按钮突然下移都是常见现象。浏览器根本不知道该预留多大空间。

• 推荐写法：
• CSS aspect-ratio 可替代宽高属性，但 Safari 15.4+ 才稳定支持，老版本需回退到内联 width/height
• decoding="async" 必须与 loading="lazy" 同时使用，否则解码仍可能阻塞主线程

加 loading="lazy" 仍可能触发预连接开销

即使设置了 loading="lazy"，浏览器仍可能在解析 HTML 时提前发起 DNS 查询或 TCP 预连接（尤其当 src 是完整 URL）。这对第三方嵌入（如地图、评论框）很危险——用户根本没滚动到那里，资源已开始消耗。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 更稳妥做法：初始 src 设为空字符串或占位 about:blank，滚动进入视口后再用 JS 赋值真实地址
• 若必须用静态 src，务必搭配 referrerpolicy="no-referrer" 和 sandbox 属性限制权限
• 避免在首屏区域放多个 ，哪怕都 lazy，DOM 构建阶段的解析成本也不低

的三个易踩坑点

这个标签本意是“告诉浏览器：这个资源我马上就要，别等 CSS/JS 解析完再下载”，但用错反而拖慢首屏。

• 只预加载关键资源（如首屏字体、 背景图），不要预加载整页 JS
• 必须指定 as 属性，否则浏览器无法判断资源类型，可能错误地复用缓存或应用错误优先级：
• crossorigin 属性不能省——字体、部分 SVG 等跨域资源不加它，预加载会失败且无提示

最常被忽略的是：语义化标签本身不提升性能，但它是所有后续优化（如自动提取结构化数据、服务端流式渲染分块、无障碍工具识别）的前提。写对一个

，比硬塞十个 class 更影响长期可维护性。