html页面本身不消耗内存，真正占用内存的是dom节点、事件监听器、js闭包、定时器、canvas/webgl上下文等；空页面内存几乎为0，但10万个绑定事件的div可致几十mb增长。
HTML 页面本身不消耗内存，但 DOM 和 JS 会持续占内存
HTML 文件只是文本，加载后被解析成 DOM 树，真正吃内存的是浏览器创建的节点对象、绑定的事件监听器、JS 闭包引用、定时器、未释放的 canvas/WebGL 上下文等。一个空 页面内存占用几乎为 0；但加了 10 万个 <div> 并每个都绑 <code>addEventListener('click', ...)，内存就可能暴涨几十 MB。
常见错误现象：
– 页面滚动变卡，performance.memory.usedJSHeapSize 持续上涨
– 切换路由后内存没回落（SPA 中组件卸载不彻底）
– 控制台反复报 RangeError: Maximum call stack size exceeded（间接说明引用链过深或循环引用）
- 用 Chrome DevTools 的 Memory > Take heap snapshot 对比「打开页面」→「操作」→「关闭/离开」后的对象保留路径
- 重点关注
Detached DOM tree类型：这些是已从 document 移除但 JS 仍持有引用的节点（比如缓存了element.parentNode却没清空） - 避免在全局作用域或长生命周期对象（如类实例）上直接存储 DOM 节点或 jQuery 对象
Vue/React 组件销毁时，DOM 引用和定时器必须手动清理
框架不会自动帮你解绑原生事件、清除 setTimeout/setInterval、取消 fetch 请求、释放 canvas.getContext('2d') 或 new AudioContext() —— 这些全靠你写 beforeUnmount / useEffect cleanup。
使用场景：弹窗、图表、音视频播放器、实时消息列表。
- React 中，
useEffect返回的 cleanup 函数必须显式调用controller.abort()（针对fetch）、clearTimeout(id)、ctx.clearRect()等 - Vue 3 Composition API 中，
onBeforeUnmount里要手动移除通过addEventListener添加的监听器（不能只依赖v-on，因为那是框架管理的） - 避免在组件内定义匿名函数并传给第三方库（如 ECharts 的
option.series[0].label.formatter），这会导致闭包捕获整个组件作用域，无法 GC
innerHTML = '' 不等于内存释放，得切断所有 JS 引用
很多人以为清空容器内容就能释放内存，但只要还有变量指向旧节点，或者某个闭包还引用着它，GC 就不会回收。例如：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const el = document.getElementById('list');
const oldItems = el.children; // 保存 HTMLCollection
el.innerHTML = ''; // DOM 节点被移除，但 oldItems 仍持有引用
// → 这些节点变成 Detached DOM，内存还在
性能影响：Detached 节点越多，GC 压力越大，尤其在低端设备上触发频繁 minor GC，造成卡顿。
- 清空容器前，先遍历
el.children手动调用removeEventListener（如果之前绑过） - 把临时缓存的节点引用设为
null，比如oldItems = null - 对大量动态插入的元素，优先用
document.createDocumentFragment()批量操作，避免反复触发重排重绘和中间 DOM 对象生成
Canvas/WebGL 和大型 JSON 数据是内存泄漏高发区
Canvas 不只是画布，它背后有像素缓冲区、绘图上下文、纹理对象；大型 JSON 解析后生成的 JS 对象树若长期驻留，也会撑爆堆内存。错误常出现在数据可视化、地图、编辑器等场景。
参数差异：
– canvas.width = canvas.width 可清空像素数据（但不释放 context）
– ctx.clearRect(0,0,w,h) 只清屏，不释放内存
– canvas.remove() 或 canvas = null 也不够，必须确保无任何 JS 变量引用该 canvas 元素及其 getContext 结果
- WebGL 中务必调用
gl.deleteTexture(tex)、gl.deleteBuffer(buf)，否则显存泄漏（Chrome 任务管理器里能看到 GPU memory 持续上涨） - 解析大 JSON 后，如只需部分字段，用
JSON.parse(str, (k,v) => {...})过滤，而不是全量解析再删属性 - 避免将整个响应体（如 10MB GeoJSON）挂到 Vue data 或 React state，改用流式处理或分块渲染
最易被忽略的一点：iframe 的内存完全独立于父页，但它的 contentWindow 如果被 JS 持有，即使 iframe 已 remove()，其整个 JS 堆也不会释放。关 iframe 前，务必先 iframe.contentWindow.close() 并清空所有对该 window 的引用。
