从 UIWebView 中删除 HTML 元素时的性能很糟糕
我目前正在编写一个 iOS 应用程序，它使用 UIWebView 来浏览页面。有时我需要使用 stringByEvaluatingJavaScriptFromString: 动态删除 UIWebView 中的元素，但这会在我的第一代 iPod touch 上锁定主 UI 长达 2 秒，在 iPhone 3GS 上可能会锁定半秒。我用来删除它的 JavaScript 很简单：
element.parentNode.removeChild(element);
没有比这更复杂的了。同时，我正在 OpenGL ES 中进行一些非常基本的 2D 渲染，如果重新渲染 UIWebView 不会锁定，我将在主线程上仅使用简单的 CoreAnimation。难道它必须重新计算 DOM 树、所有元素位置等？这真的应该锁定主 UI 线程吗？是不是我正在调用 stringByEvaluatingJavaScriptFromString: 锁定了所有内容？在这种硬件上，这是正常的吗？奇怪的是，它能够在 web 视图中渲染一些半复杂的 MooTools 动画，并改变不透明度和高度，但删除一个元素需要几秒钟的时间。
有人有任何改进的想法吗？也许只是使用 visibility:hidden 隐藏元素更好，或者设置 opacity: 0 更好？有什么想法或经验之谈吗？
I'm currently writing an iOS app that uses a UIWebView for surfing around pages. Sometimes I need to dynamically remove elements in the UIWebView using stringByEvaluatingJavaScriptFromString:, but this locks up the main UI for sometimes up to 2 seconds on my first gen iPod touch, and maybe half a second on an iPhone 3GS. The JavaScript I'm using to remove it by is simply:
element.parentNode.removeChild(element);
Nothing more complicated than that. At the same time I'm doing some very basic 2D rendering in OpenGL ES, and if rerendering the UIWebView wouldn't lock up I would use just simple CoreAnimation on the main thread. Could it be that it has to recalculate the DOM tree, all element positions etc? Should this really lock up the main UI thread? Is it that I'm calling stringByEvaluatingJavaScriptFromString: that locks up everything? Is this normal and to be expected on this kind of hardware? The odd thing is it is able to render some semi-complex MooTools animations in the webview, with opacity and height changes, but removing one single element takes several seconds.
Does anyone have any ideas in improvements? Maybe just hiding elements using visibility: hidden is better, or setting opacity: 0? Any thoughs or wise words of experience?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
DOM 树操作在所有浏览器中都非常慢，尤其是 iOS Safari。关键因素是 DOM 树的大小。因此，最好的建议是随时删除（不要使用visibility:hidden）。
如果您可以避免使用直接 dom 操作而使用 setInnerHTML()，这将产生更好的性能。我发现它的运行速度快了 100 倍。这是违反直觉的，但是进行大量字符串操作然后向浏览器抛出字符串要快得多。这是因为浏览器经过优化可以从字符串渲染 DOM 树。
在您的情况下， setInnerHTML 可能仅在您尝试同时删除多个节点时才有用。如果您只删除一个节点，您就会陷入困境 - 只需尝试保持 DOM 小即可。
希望这有帮助。
DOM tree manipulations are horribly slow in all browsers, especially iOS Safari. The key factor is size of the DOM tree. Because of this, the best advice is to delete as you go (don't use visibility:hidden).
If you can possibly avoid using direct dom manipulation and instead use setInnerHTML(), this will yeild much better performance. I've seen it work in the order of 100 times faster. It is counter-intuitive, but doing a whole lot of string manipulation and then throwing a string at the browser is much faster. This is because browsers are optimised to render DOM trees from strings.
In your case setInnerHTML might only be helpful if you are trying to delete a number of nodes at the same time. If you are only deleting one node, you're stuck - just try to keep the DOM small.
Hope this helps.