IE浏览器HTML5动画卡住是因节能休眠机制，非兼容问题；需通过msvisibilitychange监听、强制重绘、transform触发合成层、canvas清屏及多策略心跳检测来唤醒。
IE 浏览器（尤其是 IE10/IE11）本身支持部分 HTML5 和 CSS3 动画，但默认行为常导致 animation 或 requestAnimationFrame 停滞——不是不兼容，而是被“休眠”了。关键不在补丁或 polyfill，而在触发浏览器的活跃渲染状态。
为什么 IE 里 HTML5 动画会“卡住”或“不动”
IE 在标签页非激活、页面滚动暂停、或元素长时间不可见时，会主动降频甚至暂停 requestAnimationFrame 回调，并抑制 CSS animation 的帧更新（尤其在 background-tab 场景下）。这不是 bug，是 IE 的节能策略，但对轮播、实时图表、Canvas 动画等场景很致命。
- 常见现象：
requestAnimationFrame回调频率骤降到 0.1Hz 甚至完全停止；@keyframes动画只播第一帧就停住；canvas绘制不再刷新 - 触发条件：用户切换到其他标签页、Windows 锁屏、IE 窗口最小化、或元素被
display: none/visibility: hidden隐藏后重新显示 - 注意：IE 不支持
document.hidden的标准 API，需用document.msHidden
强制唤醒 requestAnimationFrame（IE 兼容写法）
不能靠重绑回调，得“骗”IE 认为页面处于活跃状态。最稳定的做法是结合可见性监听 + 主动触发重绘信号：
var lastTime = 0;
function ieAwareRAF(callback) {
if (typeof window.msRequestAnimationFrame !== 'undefined') {
// IE10+ 专用入口
window.msRequestAnimationFrame(callback);
} else {
var currTime = Date.now();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
}
// 检测 tab 切换并唤醒
document.addEventListener('msvisibilitychange', function() {
if (!document.msHidden) {
// tab 激活时，手动触发一帧，打破休眠
ieAwareRAF(function() {
// 这里可触发一次重绘，比如修改一个透明度
document.body.style.opacity = document.body.style.opacity || '1';
document.body.style.opacity = parseFloat(document.body.style.opacity) === 1 ? '0.999' : '1';
});
}
});
CSS 动画在 IE 中“不动”的修复要点
IE 对 animation 的触发非常敏感，依赖 DOM 状态和样式计算链。单纯加 animation: spin 2s infinite 很可能无效。
立即学习“前端免费学习笔记（深入）”；
- 必须确保元素有明确的
transform基础（哪怕transform: translateZ(0)），否则 IE 可能不启用合成层 - 避免用
animation-play-state: paused初始化，改用 JS 控制启停；首次播放务必用animation-play-state: running显式触发 - 不要依赖
opacity单独做动画——IE 对纯 opacity 动画优化过度，建议叠加transform: scale(1)或translateX(0) - 若动画由 class 切换触发，确保 class 是通过
element.classList.add()而非 innerHTML 替换方式添加（IE 对 innerHTML 触发动画不敏感）
Canvas 动画卡顿的 IE 激活方案
IE 的 Canvas 渲染线程和 UI 线程耦合更紧，requestAnimationFrame 失效时，canvas.getContext('2d').drawImage() 也会变慢甚至冻结。
- 每帧前加一句
ctx.clearRect(0, 0, canvas.width, canvas.height)（即使背景纯色），能显著提升 IE 的绘制响应 - 避免在动画循环中频繁读取
canvas.width/height——IE 读取这些属性会触发 layout，改用缓存变量 - 如使用
setTimeout降级方案，间隔不要设为16，IE 实际精度差，设成24更稳 - 关键：在页面 visibility 恢复后，不要直接 resume 动画循环，先
cancelAnimationFrame再立即requestAnimationFrame新一轮，重置内部计时器
IE 的“休眠”机制没有开关，只能靠信号扰动来维持活跃态。真正难处理的不是写法，而是判断何时该扰动——比如用户从锁屏回来、从微信内嵌浏览器切回 IE，这些场景下 visibilitychange 事件可能不触发，得配合定时心跳检测 document.hasFocus() 和 Date.now() 时间差来做兜底。实际项目里，往往要组合三到四种唤醒手段才够鲁棒。
