应将 DOM 深度控制在 3 层以内，避免冗余嵌套，改用语义化标签与 CSS Grid 实现布局；关闭自动换行、精简样式表、优先使用内联样式；图片加载需带宽/内存双控，配合 LRU 缓存与格式 fallback；关键 CSS 内联且 ≤10KB，预加载资源须指定 as="style"，脚本强制 defer/async。

避免 DOM 深度超过 3 层

DOM 深度每多一层，布局计算耗时非线性上升，低端设备上极易卡顿。Chrome DevTools 的 Layout 阶段能直接观测到这种延迟。

• 真实项目里高频冗余嵌套：<div><div><div><input></div></div></div>，应改为 <label class="input-group"><input></label>
• 卡片、列表等组件别用多层 div 套娃，改用 display: grid + grid-template-areas 实现视觉层级，1 层 DOM 就够
• 清除浮动不用 <div class="clearfix"></div>，改用 ::after { content: ""; display: table; clear: both; }
• 验证是否压平：不能只看源码，要打开 DevTools → Elements → 右键节点 → “Show DOM Tree” 查看实际渲染树深度

禁用自动换行与冗余样式解析

像 HTMLView 这类组件默认开启 addLineBreaks: true，会额外做文本拆分和换行插入，对低性能设备是明显负担。

• 明确关闭：传入 addLineBreaks={false}，可减少约 15% 渲染时间
• 样式表只保留真实用到的标签，删掉 blockquote、aside、details 等低频标签定义
• 避免在 stylesheet 里写嵌套选择器如 div p strong，浏览器需逐层回溯匹配，低端 CPU 解析慢
• 动态内容优先用内联样式（style 属性），绕过样式表查找开销

图片与资源加载必须带宽/内存双控

低端设备常面临内存不足 + 网络抖动双重压力，loading="lazy" 不加约束反而拖垮 LCP。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 首屏图片绝对不加 loading="lazy"；非首屏图片必须同时带 width 和 height（或 CSS aspect-ratio），否则触发 CLS
• 在 document_container::load_image（litehtml）或自定义 renderNode（HTMLView）中实现 LRU 内存缓存，避免重复解码同一张图
• 视口外图像返回占位尺寸（如 { width: 100, height: 100 }），等进入可视区再异步加载并调用 render()
• WebP/AVIF 格式必须配 fallback：<picture><source type="image/avif" srcset="a.avif"><img src="a.jpg" alt="如何优化HTML组件在低性能设备上的渲染速度" ></source></picture>

关键渲染路径必须手动切片

低端设备解析 HTML + 构建 CSSOM 的时间远高于高端机，不能依赖“自动优化”。

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

• 内联首屏必需 CSS，体积严格控制在 ≤ 10KB；工具推荐 critters（Vite）或 penthouse（webpack），别手写
• <link rel="preload" href="main.css" as="style"> 必须加 as="style"，否则浏览器当脚本处理，无法参与 CSSOM 构建
• 所有 <script></script> 标签必须带 defer 或 async；document.write() 在现代环境已废弃，执行即清空文档
• SSR 场景下，内联 CSS 后务必移除对应外链 <link rel="stylesheet">，否则样式重复应用且浪费请求

低性能设备不是“稍慢一点”，而是某些操作会直接超时或 OOM。真正起效的优化，往往藏在 DOM 结构扁平化、图片加载时机、以及关键资源加载链路的显式控制里——而不是堆配置或等框架自动修复。