和不能互换，因前者需有标题且表逻辑区块，用于结构化数据提取与辅助技术识别；后者无语义，仅作样式或交互容器。
现代HTML标签优化不是换几个新标签就完事，而是让每个标签承担明确语义、触发恰当渲染行为、并配合浏览器机制减少隐性开销。
为什么 <section></section> 和 <div> 不能随便互换
<p>语义错误不会报错，但会干扰浏览器解析节奏和辅助技术理解。比如用 <code><div class="section"> 替代 <code><section></section>，会导致：屏幕阅读器无法识别内容区块边界；搜索引擎无法提取结构化数据（如 FAQ 或文章章节）；document.querySelectorAll("section") 拿不到你“以为”的节区。
-
<section></section> 必须有显式标题（<h1></h1>–<h6></h6>），否则语义不成立
- 纯样式容器（如 flex 包裹器、栅格父级）仍该用
<div>，强行语义化反而误导
<li>
<code><main></main> 在整个文档中只能出现一次，且不应嵌套在 <article></article> 或 <section></section> 内
loading="lazy" 配合 width/height 才真正防抖动
只加 loading="lazy" 而不设尺寸，图片加载完成瞬间会重排布局——文字上跳、按钮位移、CTA 按钮突然下移都是常见现象。浏览器根本不知道该预留多大空间。
- 推荐写法：
<img src="a.jpg" style="max-width:90%" style="max-width:90%" loading="lazy" decoding="async" alt="现代HTML标签优化怎么做？性能进阶技巧" >
- CSS
aspect-ratio 可替代宽高属性，但 Safari 15.4+ 才稳定支持，老版本需回退到内联 width/height
-
decoding="async" 必须与 loading="lazy" 同时使用，否则解码仍可能阻塞主线程
<iframe></iframe> 加 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 属性限制权限
- 避免在首屏区域放多个
<iframe></iframe>，哪怕都 lazy，DOM 构建阶段的解析成本也不低
<link rel="preload"> 的三个易踩坑点
这个标签本意是“告诉浏览器：这个资源我马上就要，别等 CSS/JS 解析完再下载”，但用错反而拖慢首屏。
- 只预加载关键资源（如首屏字体、
<hero></hero> 背景图），不要预加载整页 JS
- 必须指定
as 属性，否则浏览器无法判断资源类型，可能错误地复用缓存或应用错误优先级：<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
-
crossorigin 属性不能省——字体、部分 SVG 等跨域资源不加它，预加载会失败且无提示
最常被忽略的是：语义化标签本身不提升性能，但它是所有后续优化（如自动提取结构化数据、服务端流式渲染分块、无障碍工具识别）的前提。写对一个 <figure></figure>，比硬塞十个 class 更影响长期可维护性。
<section></section> 必须有显式标题（<h1></h1>–<h6></h6>），否则语义不成立<div>，强行语义化反而误导
<li>
<code><main></main> 在整个文档中只能出现一次，且不应嵌套在 <article></article> 或 <section></section> 内
loading="lazy" 配合 width/height 才真正防抖动
只加 loading="lazy" 而不设尺寸，图片加载完成瞬间会重排布局——文字上跳、按钮位移、CTA 按钮突然下移都是常见现象。浏览器根本不知道该预留多大空间。
- 推荐写法：
<img src="a.jpg" style="max-width:90%" style="max-width:90%" loading="lazy" decoding="async" alt="现代HTML标签优化怎么做？性能进阶技巧" > - CSS
aspect-ratio可替代宽高属性，但 Safari 15.4+ 才稳定支持，老版本需回退到内联width/height -
decoding="async"必须与loading="lazy"同时使用，否则解码仍可能阻塞主线程
<iframe></iframe> 加 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属性限制权限 - 避免在首屏区域放多个
<iframe></iframe>，哪怕都 lazy，DOM 构建阶段的解析成本也不低
<link rel="preload"> 的三个易踩坑点
这个标签本意是“告诉浏览器：这个资源我马上就要，别等 CSS/JS 解析完再下载”，但用错反而拖慢首屏。
- 只预加载关键资源（如首屏字体、
<hero></hero>背景图），不要预加载整页 JS - 必须指定
as属性，否则浏览器无法判断资源类型，可能错误地复用缓存或应用错误优先级：<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> -
crossorigin属性不能省——字体、部分 SVG 等跨域资源不加它，预加载会失败且无提示
最常被忽略的是：语义化标签本身不提升性能，但它是所有后续优化（如自动提取结构化数据、服务端流式渲染分块、无障碍工具识别）的前提。写对一个 <figure></figure>，比硬塞十个 class 更影响长期可维护性。
