如何加快内联SVG更改

在我的混合Android应用程序中，我使用内嵌SVG来显示大（约2Mb）和复杂（每个图像数百个SVG元素）的图像。当我需要更改图像时，我会执行以下操作

 var puzzle = document.createElementNS(SVGNS,'svg'),
 kutu = document.getElementById('kutu');   


 puzzle.id = 'puzzle';
 puzzle.setAttribute('preserveAspectRatio','none');
 puzzle.setAttribute('width','100vw');
 puzzle.setAttribute('height','85.5vh');
 puzzle.setAttribute('xmlns',SVGNS);
 puzzle.setAttribute('xmlns:xlink',XLINK);
 puzzle.setAttribute('fill-rule','evenodd');
 puzzle.setAttribute('clip-rule','evenodd');
 puzzle.setAttribute('stroke-linejoin','round');
 puzzle.setAttribute('stroke-miterlimit','1.414');
 puzzle.setAttribute('viewBox','0 0 1600 770');
 puzzle.innerHTML = SVG;
 //SVG here is the SVG image content shorn off the outer <svg>..</svg>

 if (0 < kutu.children.length) kutu.children[0].remove();
 //remove old image, iff any
 kutu.appendChild(puzzle);
 //append the new image

var puzzle=document.createElements（SVGNS，'svg'），
kutu=document.getElementById（'kutu'）；
puzzle.id='puzzle'；
setAttribute（'preserveAspectRatio'，'none'）；
setAttribute（'width'，'100vw'）；
puzzle.setAttribute（'height'，'85.5vh'）；
puzzle.setAttribute（'xmlns'，SVGNS）；
setAttribute（'xmlns:xlink'，xlink）；
setAttribute（'fill-rule'，'evenodd'）；
setAttribute（'clip-rule'，'evenodd'）；
setAttribute（'stroke-linejoin'，'round'）；
setAttribute（'stroke-miterLit'，'1.414'）；
setAttribute（'viewBox'，'001600 770'）；
puzzle.innerHTML=SVG；
//SVG这里是从外部去除的SVG图像内容。。
如果（0

在工作时，显示新图像的过程很慢。我怀疑这是因为上面的innerHTML赋值。通过一系列

createElements

，

puzzle.ppendChild

重新创建需要我首先解析传入的原始SVG内容等。这是一种方法，还是有一种更快的方法来显示内容

---

再次为清晰起见-SVG是新SVG图像的内容，显示时去掉其外部

…

wrrapper。

只是一个旁注，可能最好使用

setAttributes

代替

setAttribute

，以保持一致性，因为使用了

createElements

，尽管这在加快SVG图像更改方面可能没有什么不同

对于本机应用程序，可以使用使用Android Studio 3.0及更高版本的if等工具来分析性能瓶颈。但是，由于您的应用程序是一个混合应用程序，因此适用于混合应用程序的某种性能分析器（无论是Ionic应用程序还是其他应用程序）可以帮助您确定性能瓶颈所在

由于您的应用程序是一个混合应用程序，在不知道android应用程序会话的资源容量的情况下，猜测可能是因为它调用了.setAttribute之类的函数来在图像更改期间动态设置会话级别属性，而会话资源可能不够，DOM还必须执行.innerHTML和appendChild，这是动态操作。众所周知，DOM操作速度很慢

转换所有SVG的属性并将结果存储在某种存储或缓存中，如果需要，从持久存储或缓存调用它可能会有所帮助

或考虑使用angurjs预先做SVG改变并预加载SVG图像，请参阅。是另一个与您类似的代码，只是它使用AngularJS为初学者添加SVG

另一种更简单的方法是使用node.js开源项目或SVGO来压缩SVG，而无需更改代码（如果可以事先缩小传入的SVG）。引自SVGO链接，它说：

---

SVG文件，特别是从各种编辑器导出的文件，通常包含大量冗余和无用的信息。这些信息包括编辑器元数据、注释、隐藏元素、默认值或非最佳值以及其他可以安全删除或转换而不影响SVG呈现结果的内容尽管在这条路线上性能的提高可能并不明显。

只是一个旁注，出于一致性目的，最好使用

setattributes

代替

setattributes

，因为使用了

createElements

，尽管这可能不会对加快SVG图像更改产生影响

对于本机应用程序，可以使用使用Android Studio 3.0及更高版本的if等工具来分析性能瓶颈。但是，由于您的应用程序是一个混合应用程序，因此适用于混合应用程序的某种性能分析器（无论是Ionic应用程序还是其他应用程序）可以帮助您确定性能瓶颈所在

由于您的应用程序是一个混合应用程序，在不知道android应用程序会话的资源容量的情况下，猜测可能是因为它调用了.setAttribute之类的函数来在图像更改期间动态设置会话级别属性，而会话资源可能不够，DOM还必须执行.innerHTML和appendChild，这是动态操作。众所周知，DOM操作速度很慢

转换所有SVG的属性并将结果存储在某种存储或缓存中，如果需要，从持久存储或缓存调用它可能会有所帮助

或考虑使用angurjs预先做SVG改变并预加载SVG图像，请参阅。是另一个与您类似的代码，只是它使用AngularJS为初学者添加SVG

另一种更简单的方法是使用node.js开源项目或SVGO来压缩SVG，而无需更改代码（如果可以事先缩小传入的SVG）。引自SVGO链接，它说：

---

SVG文件，特别是从各种编辑器导出的文件，通常包含大量冗余和无用的信息。这些信息包括编辑器元数据、注释、隐藏元素、默认值或非最佳值以及其他可以安全删除或转换而不影响SVG呈现结果的内容尽管这条路线带来的性能提升可能并不明显。

您的问题很不清楚：什么是

kutu

？它能正常工作吗？为什么要使用

puzzle.setAttribute（'xmlns:xlink'，xlink）而不是类似于
setAttributeNS（“http://www.w3.org/1999/xlink“，'xlink:href'，'#thePath'）等。。。你能更新你的问题并添加一个你所拥有的工作实例吗？你的问题是