省显存的关键是绕过GPU路径、压缩帧缓冲、禁用冗余合成层；具体包括关闭硬件加速、禁用WebGL/3D API、改用2D Canvas、限制GPU内存上限等，可降低显存占用30%～65%。
集成显卡显存有限（通常仅64–512MB共享内存），运行依赖GPU渲染的HTML视图函数工具（如Canvas实时绘图、WebGL可视化、复杂CSS动画预览）时，显存挤占会直接引发页面卡顿、getContext("webgl")返回null、或DevTools中“GPU Memory”持续飙高后崩溃。省显存的关键不是“选哪个工具”，而是**绕过GPU路径、压缩帧缓冲、禁用冗余合成层**——以下操作可实测降低显存占用30%～65%。
关闭浏览器硬件加速并验证GPU状态
老旧或低功耗集成显卡（如Intel UHD 620、AMD Radeon Vega 3）启用硬件加速后，Chrome/Edge会为每个合成层分配独立显存块，即使页面无动画也会常驻128MB以上。强制回退到软件光栅化可彻底规避显存争抢。
- 访问
chrome://settings/system，关闭“使用硬件加速模式(如果可用)” - 重启浏览器后，打开
chrome://gpu，确认“Rasterization”“Compositing”“Graphics API”三项均显示Software only或Disabled，而非Hardware accelerated - 若仍显示硬件加速，需额外添加启动参数：
--disable-gpu --disable-software-rasterizer（右键快捷方式→属性→目标末尾追加）
禁用WebGL与3D API避免隐式显存分配
哪怕HTML工具没主动调用WebGLRenderingContext，浏览器仍可能为<canvas>预留GPU上下文——尤其当页面含willReadFrequently: true或alpha: false等配置时，显存预分配不可控。彻底禁用可消除该风险。
- 在
chrome://flags中搜索webgl，将#enable-webgl和#enable-webgl2设为Disabled - 同步禁用
#enable-3d-apis和#enable-accelerated-2d-canvas - 重启后，在开发者工具Console中执行
!!window.WebGLRenderingContext，应返回false
用纯2D Canvas替代WebGL做轻量视图渲染
多数HTML函数工具的“视图”功能（如数据散点图、DOM节点关系图、简单SVG转绘）无需WebGL精度。改用canvas.getContext('2d')配合putImageData或drawImage，显存占用可从WebGL默认的256MB+压至16–32MB（取决于画布尺寸）。
立即学习“前端免费学习笔记（深入）”；
- 避免创建超大
<canvas width="4096" height="4096">：1080p视图足够时，设为width="1920" height="1080"即可 - 每次重绘前调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，防止浏览器缓存多帧纹理 - 若需像素级操作，用
ctx.createImageData(w, h)而非ctx.getImageData()——后者会强制上传当前帧到GPU
限制浏览器进程显存上限（Windows/Linux）
Chrome默认不限制单进程GPU内存，集成显卡系统易因标签页累积导致显存溢出。通过启动参数硬性约束，可防止单个HTML工具页吃尽全部共享显存。
- 启动Chrome时添加：
--gpu-memory-buffer-limit=64 --max-video-buffer-size=32 - 其中
gpu-memory-buffer-limit单位为MB，设为64即限制GPU纹理/帧缓冲总和≤64MB - 搭配
--disable-gpu-compositing可进一步禁用图层合成，逼迫所有绘制走Skia软件光栅器 - 验证方式：打开
chrome://system，搜索gpu_memory_buffer，确认数值接近设定值
真正影响体验的往往不是“工具本身多大”，而是浏览器是否把<canvas>当成GPU任务来调度。BIOS里设512MB显存不如关掉#enable-gpu-rasterization来得直接——显存再大，填不满的缓冲区也是空耗。
