IE, Javascript and Reflow

Question

많은 dom 노드 (> 5000)의 CSS 표시 ('블록', '없음')를 변경하는 javascript 기능이 있습니다. 나는 가능한 한 빨리 이것을 만들려고 노력하고있다.

IE가 자바 스크립트를 리플 로우하여 화면을 그립니다. 그렇지 않으면 javascript 엔진이 브라우저로 컨트롤을 반환 할 때까지 기다릴 것입니까? 나는 모든 노드가 자신의 디스플레이 세트를 가질 때까지 브라우저에서 추가 작업을 피하고자한다.

나는 JQuery와의 쇼에서 발견() 메소드는, DOM 조작이 주석으로 꽉 루프에 배치됩니다

// 두 번째 루프의 요소의 표시가
// 상수 리플을 방지하기 위해 설정

(http://code.google.com/p/jqueryjs/source/browse/trunk/jquery/src/fx.js 라인 51)

감사합니다,

제임스

Answer 1

공통 상위 항목을 숨긴 다음 요소를 숨긴 다음 부모를 표시하면 불필요하게 다시 칠하지 못하게됩니다.

Answer 2

JS는 각 요소를 변경하면서 브라우저가 페이지를 리플 로우합니다. 제안대로, 끝까지 디스플레이를 계속 변경하는 것이 가장 좋습니다. 이것은 또한 사용자에게 더 부드럽고 (실제로는 아닐지라도) 더 빨라질 것입니다.

나는 것 :

1. 복제 당신이 처리 할 노드를 래핑하는 노드입니다.
2. 복제 된 노드 children에 대한 처리를 수행하십시오.
3. 원본 노드를 복제본으로 바꿉니다.

처리가 오랜 시간 (초 0.5) 사용자가 뭔가가 일어나고 있음을 알려 디스플레이에 뭔가를 설정하는 것이 좋습니다 걸리는 경우. 원본 콘텐츠를 천천히 약 50 %의 불투명도로 천천히 페이드 아웃하는 것이 간단한 방법입니다.

Answer 3

CSS를 사용하면 상위 요소의 클래스 이름을 변경하여 요소를 표시하거나 숨길 수 있습니다. 잠시 후에했던 몇 가지 테스트에서 각 요소의 display 속성을 설정하는 것보다 약 10 배 빠르다는 것을 알 수있었습니다. 단일 속성 만 변경하면 한 번 리플 로우됩니다.

예 :

<style> 
.State1 .InitiallyHidden { display: none; } 
.State2 .InitiallyShown { display: none; } 
</style> 

<script> 
function flip() { 
    var o = document.getElementById('Parent'); 
    o.className = o.className = 'State1' ? 'State2' : 'State1'; 
} 
</script> 

<input type="button" value="flip" onclick="flip();" /> 

<div id="Parent" class="State1"> 
    <div class="InitiallyHidden">One</div> 
    <div class="InitiallyShown">Two</div> 
    <div class="InitiallyHidden">Three</div> 
    <div class="InitiallyShown">Four</div> 
</div>