HTML无函数工具，实为DOM/CSS/JS API组合使用，性能直接受硬件制约：CPU弱禁用querySelector和innerHTML；GPU不可用勿启will-change/translateZ；iOS视频需playsinline+webkit-playsinline；内存≤2GB须事件委托+手动清理；高DPR下Canvas须同步重设宽高并scale。
HTML 本身没有“函数工具”这个概念——所谓“HTML函数工具”，实际是开发者对 document.getElementById、querySelector、textContent、requestAnimationFrame 等 DOM/CSS/JS API 的组合使用习惯，其表现直接受硬件能力制约。选错用法，不是工具不好，而是你手里的 API 在当前设备上被浏览器降级执行了。
CPU弱时别碰querySelector和innerHTML
主频低于 1.2GHz 或双核以下的设备（如 Chromebook、旧款平板），querySelector 的 CSS 选择器解析开销远高于 getElementById；而反复赋值 innerHTML 会强制触发完整 DOM 重建与样式重计算，极易卡顿。
- 单元素查找一律用
document.getElementById('id')，不要图省事写document.querySelector('#id') - 批量插入节点前，先用
document.createDocumentFragment()构建离线树，再一次性appendChild - 纯文本更新必须用
textContent，禁用innerHTML——后者哪怕只改一个数字，也会触发 HTML 解析流程
GPU可用时才启用will-change和translateZ(0)
will-change: transform 和 transform: translateZ(0) 不是“开了就快”，而是“开了就强制创建合成层”。但若 GPU 不可用，浏览器会回退到 CPU 软合成，反而更慢，且可能引发闪烁或掉帧。
- 只在明确需要高频动画的容器上设置
style="will-change: transform;"，且动画结束后应手动移除（避免长期占用合成层） - 用
CSS.supports('transform', 'translateZ(0)')检测支持性，返回true再注入translateZ(0)，否则跳过 - iOS 视频内联播放必须同时加
playsinline和webkit-playsinline，否则即使 GPU 可用，解码路径仍走 CPU
内存小就靠事件委托+手动清理
内存 ≤2GB 的设备无法长期维持大量监听器，addEventListener 不配 removeEventListener 就等于埋内存泄漏。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 所有按钮点击统一绑定在
document.body上，用event.target.matches('.js-submit')判断目标 - 滚动/resize 监听器必须在页面卸载前显式清除：
window.removeEventListener('scroll', handler) - 动态生成的表单项，用自定义属性标记状态（如
data-initialized="true"），初始化函数先查标记再绑定，防止重复注册
多屏高DPR下Canvas必须重设宽高比
把窗口从笔记本 Retina 屏（window.devicePixelRatio === 2）拖到外接 1080p 显示器（=== 1）时，若 Canvas 的 width/height 没同步更新，绘图必然模糊——这不是画布缩放问题，是像素缓冲区没对齐物理像素。
- 监听
window.addEventListener('resize', ...)和screen.orientation.addEventListener('change', ...)双事件 - 每次触发时重设
canvas.width = canvas.clientWidth * window.devicePixelRatio，同理设height - 紧接着调用
ctx.scale(dpr, dpr)，否则绘图坐标系仍按 CSS 像素走，图形会缩小 2 倍
真正难的不是记住这些规则，而是每次写代码前，先问自己：这段运行在哪台设备上？它的 CPU、GPU、内存、屏幕 DPI 是多少？浏览器是否真能按你写的那样执行，还是悄悄 fallback 了？
