자바 스크립트/dom—어떻게 비싼 것 만들 vs 정리될 노드?

Question

나이에 최적화하려고 정렬 가능한 테이블이 내가 작성했습니다.병목 현상은 dom 습니다.나는 현재 새로 만드는 행 테이블을 삽입 하는 것 모든 테이블을 정렬합니다.시할 수 있을 사용하여 간단하여 행하지 않을 재현하는 노드가 있습니다.이를 위해 큰 차이를 만들고 현대적인 객실은 노드를 정리해야 할 것이 많이 보다 빠르다는 노드를 생성.이 경우는?감사합니다, 모건

Answer 1

생성 또는 조작이 더 빠르는지는 모르겠지만, 페이지에 없을 때 전체 테이블을 조작하고 한 번에 배치하면 더 빠를 것임을 알고 있습니다. 이 라인을 따라 전체 테이블이 DOM에서 먼저 제거되지 않으면 기존 행을 다시 정리하는 것이 느리게 진행됩니다.

이 페이지 현재 테이블을 복제하고 원하는대로 조작 한 다음 DOM의 테이블을 교체하는 것이 가장 빠르다고 제안합니다.

Answer 2

이 테이블을 InnerHTML을 사용 하여이 테이블을 두 배나 빨리 그립니다.

Answer 3

당신이 찾을 수 있습니다 이 페이지에는 편리한 벤치마크:

http://www.quirksmode.org/dom/innerhtml.html

Answer 4

가능하다면 DOM 조작을 실제 DOM 조작이 아니라 스크립트 내에서 일종의 방법으로 수행 한 다음 DOM을 조작하는 것이 좋습니다. 따라서 모든 단일 노드에서 다시 칠하는 것을 수행하는 대신 모든 단일 노드에서 리 페인트에있는 것을 자체 메소드로 깎은 다음 해당 노드를 부모에 첨부 한 다음 실제 DOM에 부착 될 수 있습니다. 수백 대신 두 개의 페인트로. 새 데이터로 업데이트하기 전에 이미 DOM의 내용을 정리해야한다고 말합니다.

Answer 5

나는 이것에 대한 답을 찾고 있었고 빠른 벤치 마크를 설정하기로 결정했습니다. http://jsfiddle.net/wheresrhys/2g6dn/6/

jQuery를 사용하므로 순수한 벤치 마크가 아니며 다른 방식으로도 왜곡 될 수 있습니다. 그러나 결과는 DOM 노드를 움직이는 DOM 노드를 매번 생성하고 해소하는 것보다 약 두 배나 빠릅니다.