html本身没有函数，不依赖硬件；所谓“html函数”实为javascript执行，其性能受cpu、内存、gpu影响，如innerhtml触发重排重绘会加重cpu负担，事件监听器泄漏会耗尽ram，webgl报错多因驱动或沙盒问题而非缺少独显。
HTML 本身没有函数，所以它不依赖任何硬件——你写的 <button onclick="handleClick()"></button> 看似在调用“HTML函数”，实际执行的是 JavaScript，而 HTML 只是静态文本。所谓“硬件限制”，全是 JS 引擎、渲染管线和操作系统层面对 JavaScript 行为的约束。
为什么改 innerHTML 会卡，跟 CPU 有关吗
直接赋值 innerHTML 会触发整段 HTML 字符串解析 → DOM 树重建 → 样式计算 → 布局（reflow）→ 绘制（paint）。这个过程全在主线程跑，CPU 负载高时响应变慢，但瓶颈不在 CPU 型号，而在操作频次和节点规模。
- 循环中拼接字符串再塞进
innerHTML是典型反模式；改用DocumentFragment或批量创建后一次性append() - 避免高频更新
body或深层容器；临时用display: none隐藏，改完再显示 - Chrome DevTools 的 Rendering 面板打开 Paint flashing，能一眼看出哪些区域在无效重绘
addEventListener 绑太多，内存泄漏真会吃光 RAM 吗
每个监听器都是 JS 对象引用，绑定在 DOM 节点上。节点被 remove() 但没调 removeEventListener()，或用了匿名函数无法解绑，就会形成内存泄漏——长期运行的单页应用（SPA）里，几 MB 内存可能几天就涨到几百 MB。
- 优先用事件委托：给父容器绑定一次
click，用event.target.matches('.btn')判断来源 - 注册监听器时用具名函数，不用箭头函数，确保后续可精准移除
- 组件卸载时（如 React
useEffectcleanup、VuebeforeUnmount）必须显式调用removeEventListener()
WebGL / WebGPU 报错 GPU process crashed，是不是缺独显
报这个错，通常不是因为没独显，而是驱动不匹配、沙盒权限不足、或 GPU 进程被系统强制回收。WebGL 和 WebGPU 是浏览器调用 OS 图形 API（如 Vulkan / Metal / DirectX）的封装，依赖驱动兼容性，而非显卡型号高低。
- Linux 下若用容器跑 Chrome，需确认是否启用 KVM；禁用
--ozone-platform=wayland组合可避崩溃 - Windows 上检查是否启用了 Windows Hypervisor Platform（WHPX），尤其 CI/CD 中跑自动化测试时
- macOS 默认用 Hypervisor 框架，但旧版 Safari 对 WebGPU 支持有限，别盲目升级
真正容易被忽略的，是把“HTML 写得复杂”等同于“硬件扛不住”。其实只要少碰布局属性（比如别在 scroll 回调里读 offsetHeight 再改 width），少建无意义图层（will-change: transform 别乱加），浏览器在 4GB 内存 + 双核 CPU 的老机器上照样跑得稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
