IE画布渲染慢的根本原因是IE9–11依赖GDI而非Direct2D，且drawImage、putImageData和clearRect触发大量同步重绘与位图拷贝；CSS缩放、非整数宽高、未复用ImageData、开启抗锯齿/阴影均加剧性能下降。
IE 画布渲染慢的根本原因是什么
不是 HTML5 <canvas> 本身有问题，而是 IE9–11 的 canvas 实现严重依赖 GDI（而非硬件加速的 Direct2D），且对 ctx.drawImage()、ctx.putImageData() 和频繁的 ctx.clearRect() 操作做大量同步重绘和位图拷贝。尤其是当 canvas 尺寸超过 1024×768 或启用了 CSS 缩放时，性能会断崖式下跌。
禁用 CSS 缩放 + 强制使用 devicePixelRatio=1
IE 对 transform: scale() 或 zoom 的 canvas 渲染是纯软件拉伸，每帧都触发完整重采样。哪怕只是 canvas { zoom: 0.8; }，也会让 ctx.fillRect() 帧耗从 2ms 涨到 18ms。
实操建议：
- 移除所有作用于
<canvas>元素及其父容器的zoom、transform: scale、width/height百分比或vw/vh单位 - 显式设置 canvas 的
width和height属性（非 CSS 样式），值取整数，避免小数导致 GDI 插值 - 在
<head>中加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
并确保页面无@-ms-viewport覆盖
避免 putImageData + 预分配 ImageData 对象
ctx.putImageData() 在 IE 中每次调用都会新建位图缓冲并同步提交到 GDI，开销极大。即使只改一个像素，也比 100 次 ctx.fillRect() 还慢。
立即学习“前端免费学习笔记（深入）”；
Money Knowledge
下载
金钱与财富知识助手。提供关于金钱的基本概念、理财知识、投资原则、财富思维等方面的内容。适用于：1) 了解金钱的基本知识；2) 学习理财和投资原则；3) 培养财富思维；4) 了解经济学基础概念。
正确做法：
- 用
ctx.createImageData(w, h)一次性创建对象，复用其.data数组，不要每次 new - 改像素时直接操作
imgData.data[i]，最后统一putImageData(imgData, 0, 0) - 若仅需简单图形，优先用
fillRect()、strokeRect()、arc()—— 它们在 IE 中走的是优化路径
示例（复用 ImageData）：
var imgData = ctx.createImageData(800, 600); var pixels = imgData.data; // 每帧只改 pixels 数组，不 new ImageData ctx.putImageData(imgData, 0, 0); // 只这里调用一次
关闭抗锯齿 + 禁用阴影（IE 特供加速项）
IE 的 imageSmoothingEnabled 和 shadowBlur 默认开启，但底层实现是 CPU 软件渲染，关掉能立竿见影提帧率。
必须加的初始化代码：
ctx.imageSmoothingEnabled = false; ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.shadowBlur = 0; ctx.shadowColor = 'transparent';
注意：ctx.imageSmoothingEnabled = false 在 IE10+ 生效，但 IE9 需额外加 canvas.style.imageRendering = '-ms-crisp-edges';（否则无效）
