performance - 从 UIWebView 中删除 HTML 元素时性能糟糕

Question

我目前正在编写一个使用 UIWebView 浏览页面的 iOS 应用程序。有时我需要使用 动态删除 UIWebView 中的元素stringByEvaluatingJavaScriptFromString:，但这会在我的第一代 iPod touch 上将主 UI 锁定有时长达 2 秒，在 iPhone 3GS 上可能会锁定半秒。我用来删除它的 JavaScript 很简单：

element.parentNode.removeChild(element);

没有比这更复杂的了。同时，我在 OpenGL ES 中进行了一些非常基本的 2D 渲染，如果重新渲染 UIWebView 不会锁定，我会在主线程上使用简单的 CoreAnimation。难道它必须重新计算 DOM 树、所有元素位置等？这真的应该锁定主 UI 线程吗？是我打电话stringByEvaluatingJavaScriptFromString:把所有东西都锁起来了吗？在这种硬件上这是正常的吗？奇怪的是它能够在 webview 中渲染一些半复杂的 MooTools 动画，具有不透明度和高度的变化，但删除一个元素需要几秒钟。

有人对改进有任何想法吗？也许只是隐藏元素使用visibility: hidden更好，或者设置opacity: 0？有什么想法或明智的话吗？

Answer 1

DOM 树操作在所有浏览器中都非常慢，尤其是 iOS Safari。关键因素是 DOM 树的大小。因此，最好的建议是随时删除（不要使用可见性：隐藏）。

如果您可以避免使用直接 dom 操作，而是使用 setInnerHTML()，这将产生更好的性能。我已经看到它的工作速度快了 100 倍。这是违反直觉的，但是做大量的字符串操作然后向浏览器抛出一个字符串要快得多。这是因为浏览器被优化为从字符串渲染 DOM 树。

在您的情况下， setInnerHTML 可能仅在您尝试同时删除多个节点时才有用。如果你只删除一个节点，你就会被卡住——试着保持 DOM 很小。

希望这可以帮助。