真正影响移动端HTML性能的是DOM节点数量、嵌套深度和解析阻塞点；节点超800会拖慢首屏，需精简冗余标签、合理使用语义标签、正确配置viewport。

移动端 HTML 标签不是越“语义化”就越快，也不是越精简就越安全——真正影响性能的是 DOM 节点数量、嵌套深度、解析阻塞点这三样。删掉 10 个无用

比硬套

标签更能提帧率。

DOM 节点数超 800 会明显拖慢首屏渲染

移动端 CPU 解析 HTML 的能力远弱于桌面端，Chrome DevTools Elements 面板里显示的节点总数一旦超过 800，LCP 和 INP 就容易超标。

• 用 document.querySelectorAll('*').length 快速检查当前页节点数（建议在控制台执行）
• 移除所有空 <div></div>、仅用于样式包裹的冗余容器（比如 <div class="wrapper"><div class="inner"> 这类双层 wrapper） <li>把 <code><div class="btn-group"> 替换为 <code><div role="group" aria-label="操作按钮">，既减少标签又增强可访问性 <li>避免用 JS 动态插入大量结构（如循环生成 50 个 <code><li>），改用 DocumentFragment 批量挂载

语义标签不能乱套，否则反而触发重排

用 <header></header> 或 <nav></nav> 本身不提升性能，但若嵌套错位，会导致浏览器反复计算流式布局，尤其在 flex/grid 容器里混用语义标签和栅格类时。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 错误写法：<div class="container"><header>...</header></div> —— container 可能设了 max-width，而 <header></header> 默认是块级，造成意外外边距或宽度塌陷
• 正确顺序：<header><div class="container">...</div></header>，让语义容器包裹视觉容器
• 导航菜单别塞进 <div id="mobile-menu">，而要用 <code><nav aria-expanded="false"></nav>，否则屏幕阅读器无法识别交互状态
• 表格必须配 table-layout: fixed + <col width="200">，否则小屏下每列宽度由内容撑开，强制重排次数暴增

viewport 标签位置和写法直接影响 JS 执行时机

这个标签不是“加了就行”，它决定浏览器是否启用移动渲染模式。写错位置或重复声明，会让 CSSOM 构建延迟，进而阻塞 JS 执行，尤其影响 Web Workers 初始化。

立即学习“前端免费学习笔记（深入）”；

• 必须放在 最顶部，且只能出现一次；若被第三方 SDK（如统计脚本）动态注入，会覆盖原有声明
• 禁止写成 content="width=375" 或 width=1024 —— 这会让 iOS Safari 回退到 980px 模拟视口，媒体查询全部失效
• 不要加 user-scalable=no：不仅 WCAG 不合规，部分 Android WebView 在禁缩放后会跳过字体大小重算逻辑，导致文字渲染异常
• 验证方法：在手机上打开页面，双指缩放，如果能放大但文字不重排，说明 initial-scale=1.0 生效；如果直接卡死或白屏，大概率是 viewport 被覆盖

最常被忽略的其实是“HTML 结构定型即性能定型”——JS 压缩再狠、CDN 再快，也救不回一个嵌套 7 层、含 1200 个节点、viewport 被覆盖三次的页面。优化起点不在构建工具里，在你敲下第一个 <div> 之前。</div>