UIWebView에서 HTML 요소를 제거하면 성능이 저하됩니다.

Question

현재 UIWebView를 사용하여 페이지를 서핑하는 iOS 앱을 작성하고 있습니다. 때로는 stringByEvaluatingJavaScriptFromString:을 사용하여 UIWebView에서 요소를 동적으로 제거해야하지만, 1 초 iPod touch에서는 기본 UI가 최대 2 초, iPhone 3GS에서는 1 초 정도 걸리는 경우가 있습니다. 이를 제거하기 위해 사용하는 JavaScript는 간단합니다.

element.parentNode.removeChild(element); 

더 복잡한 것은 없습니다. 동시에 OpenGL ES에서 몇 가지 매우 기본적인 2D 렌더링을하고 있는데, UIWebView를 다시 렌더링하면 주 스레드에서 단순한 CoreAnimation 만 사용하게 될 것입니다. 그것은 DOM 트리, 모든 요소 위치 등을 다시 계산해야 할 수 있습니까? 이게 정말 UI UI 스레드를 잠궈 야하나요? 모든 것을 잠근다는 것이 stringByEvaluatingJavaScriptFromString:입니다. 이것은 정상적인 것이며 이러한 종류의 하드웨어에서 예상됩니까? 이상한 점은 불투명도와 높이 변화가있는 반 복합 MooTools 애니메이션을 웹 뷰에서 렌더링 할 수 있다는 것입니다. 단 하나의 요소를 제거하는 데 몇 초가 걸립니다.

개선을위한 아이디어가 있습니까? visibility: hidden을 사용하는 요소를 그냥 숨기는 것이 더 좋을 수도 있고 opacity: 0을 설정하는 것일 수도 있습니다. 어떤 생각이나 현명한 경험담?

Answer 1

DOM 트리 조작은 모든 브라우저, 특히 iOS Safari에서 매우 느립니다. 핵심 요소는 DOM 트리의 크기입니다. 이 때문에 가장 좋은 조언은 이동하면서 삭제하는 것입니다 (표시 : 숨김을 사용하지 마십시오).

직접적인 DOM 조작을 피하고 대신 setInnerHTML()을 사용하면 성능이 훨씬 향상됩니다. 나는 그것이 100 배 빠른 순서로 작동하는 것을 보았다. 반 직관적이지만, 문자열 조작을 많이하고 브라우저에 문자열을 던지는 것은 훨씬 빠릅니다. 이것은 브라우저가 문자열에서 DOM 트리를 렌더링하도록 최적화 되었기 때문입니다.

setInnerHTML은 여러 노드를 동시에 삭제하려는 경우에만 유용 할 수 있습니다. 하나의 노드 만 삭제하는 경우 장애가 발생합니다. DOM을 작게 유지하십시오.

희망이 도움이됩니다.