背景
在前端开发中使用 SVG 图像已经成为一种趋势。然而，在 Internet Explorer 11 中，如果页面中使用了动态创建的 SVG 元素，可能会导致浏览器崩溃。
问题描述
当我们使用 JavaScript 动态创建 SVG 元素时，例如：
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');然后再将其添加到文档或某个元素之中：
document.body.appendChild(svg);
在 IE 11 中，当这些动态创建的 SVG 元素被频繁添加和删除时，浏览器可能会因为内存泄漏而崩溃。
解决方案
为了解决这个问题，我们需要进行以下几个步骤：
1. 减少 DOM 操作
由于 IE 11 对 DOM 操作的处理速度较慢，频繁操作 DOM 可能会导致浏览器崩溃。为了避免这个问题，我们可以尽量减少 DOM 操作的次数。最好的方式是创建一个包含所有 SVG 元素的父容器，并在其中动态修改子元素。
-- -------------------- ---- ------- ----- ------ - ------------------------------ ---------------- - - ----------- ----------- ----------- -- ---------------------------------- -- ----- ---------------- - - ----------- ----------- --
2. 缓存 SVG 元素
在 IE 11 中，频繁创建和销毁大量的 SVG 元素会导致浏览器崩溃。因此，我们应该尽可能地缓存这些元素，并重复使用它们。
-- -------------------- ---- ------- ----- -------- - --- -------- ----------- - -- ---------------- - -- ------ --------------- ----- --- - ------------------------------------------------------ ------- ------ ---- - -------- --------------- - -- -- --- -- ------------- - --- ------------------------- ---- -------------------------- ---- -- ------ ------------------- -
3. 及时释放资源
在不需要使用 SVG 元素时，要及时将其从文档中移除，并释放占用的内存。
const parent = document.createElement('div');
const svg = createSvg();
parent.appendChild(svg);
document.body.appendChild(parent);
// 移除 SVG 元素
parent.removeChild(svg);
releaseSvg(svg);总结
通过以上方法，我们可以避免在 IE 11 中使用动态 SVG 元素时出现的崩溃问题。在实际开发中，如果页面中使用了大量的 SVG 元素，我们应该尽可能地减少 DOM 操作，缓存 SVG 元素，并及时释放资源，以提高页面的性能和用户体验。
示例代码
-- -------------------- ---- ------- ----- -------- - --- -------- ----------- - -- ---------------- - -- ------ --------------- ----- --- - ------------------------------------------------------ ------- ------ ---- - -------- --------------- - -- -- --- -- ------------- - --- ------------------------- ---- -------------------------- ---- -- ------ ------------------- - ----- ------ - ------------------------------ ----- ---- - ------------ ----- ---- - ------------ ------------------------- ------------------------- ---------------------------------- -- -- --- -- ------------------------- ----------------- ------------------------- ----------------- ---------------- - - ----------- ----------- --
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30720