HTML本身没有函数，真正消耗CPU/GPU的是JavaScript执行、DOM操作及重排重绘；避免循环中频繁修改innerHTML，改用DocumentFragment批量操作；事件监听器需及时解绑防内存泄漏；CSS动画优先使用transform和opacity以启用GPU加速。

HTML 本身没有函数——这是最常被误解的起点。你看到的所谓“HTML 函数”，实际是 JavaScript 在操作 HTML 元素时触发的逻辑，真正消耗 CPU/GPU 的是 JS 执行、DOM 操作、重排（reflow）与重绘（repaint），不是 HTML 标签本身。

为什么改 innerHTML 会卡顿

直接赋值 innerHTML 触发整段 HTML 字符串解析 + DOM 树重建 + 样式计算 + 布局 + 绘制。尤其在循环中反复写入、或内容含大量嵌套节点时，浏览器必须多次重排。

• 避免在 for 循环里拼接字符串再塞进 innerHTML；改用 documentFragment 或批量创建后一次性 append()
• 不要对 body 或深层容器高频更新；用 display: none 临时隐藏，改完再显示
• Chrome DevTools 的 Rendering 面板打开 Paint flashing，能直观看到哪些区域在无效重绘

addEventListener 绑太多没清理会吃内存

每个事件监听器都是 JS 对象引用，绑定在 DOM 节点上。如果节点被 remove() 但监听器没用 removeEventListener 解绑，或用了匿名函数无法解绑，就形成内存泄漏——长期运行的单页应用（SPA）尤其明显。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 优先用事件委托：给父容器绑定一次 click，用 event.target.matches('.btn') 判断来源
• 用具名函数而非箭头函数注册监听器，确保后续可精准移除
• 在组件卸载（如 React useEffect cleanup、Vue beforeUnmount）时显式调用 removeEventListener

CSS 属性改得猛也会拖硬件

看似只是改个 style.color，但若触发 layout（如读取 offsetHeight 后立刻改 width），就会强制同步回流。GPU 加速只对 transform 和 opacity 友好，其他属性（left、top、height）仍走 CPU 主线程。

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

• 动画优先用 transform: translateX() 而非 left
• 避免在 scroll 或 resize 回调里直接读写布局属性；加 requestAnimationFrame 节流 + 缓存尺寸
• 用 will-change: transform 提前提示浏览器该元素将动画，但别滥用——它会提前分配图层，反而增加内存开销

真正的瓶颈从来不在“HTML 写得多不多”，而在于 JS 是否频繁触碰 DOM、CSS 是否引发意外回流、以及是否让主线程长时间忙于同步计算。硬件压力是结果，不是原因。