언제 DOM 환경에서 리플 로우가 발생합니까?

Question

DOM을 사용하여 웹 페이지의 리플 로우를 유발하는 활동에는 어떤 종류가 있습니까?

다른 관점이있는 것 같습니다. http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/에 따르면

• DOM 노드를 추가하거나 제거 할 때 발생합니다.
• 스타일을 동적으로 적용하는 경우 (예 : element.style.width = "10px").
• offsetWidth, clientHeight 또는 계산 된 CSS 값 (DOM 호환 브라우저에서는 getComputedStyle()을 사용하거나 IE에서는 currentStyle)을 통해 계산해야하는 측정 값을 가져올 때.

그러나 측정을 수행하는 것은 이미 리플 로우 조치가 대기중인 경우에만 수행합니다.

아무도 아이디어가 없습니까?

Answer 1

두 기사 모두 맞습니다. 리플 로우를 유발할 것으로 예상되는 DOM 요소의 크기를 합리적으로 요구할 수있는 무언가를 할 때마다이를 가정 할 수 있습니다.

내가 알 수있는 한, 두 기사 모두 똑같은 말을합니다.

첫 번째 기사는 리플 로우가 발생 말할 때 :

당신은 getComputedStyle를 통해 같은 의 offsetWidth 접근로,을 계산해야 측정, clientHeight, 또는 계산 된 CSS 값을 (검색 때 (DOM 호환 브라우저에서는, IE에서는 currentStyle), DOM 변경 사항은 대기열에 들어갑니다.

두 번째 문서 상태 :

앞서 언급 한 바와 같이 이러한 변경 사항이 모든되었습니다 때, 브라우저가 한 번만 몇 가지 당신을 위해 변경 및 리플 로우를 캐시 할 수 있습니다. 그러나 요소를 측정하면 리플 로우가 적용되어이되므로 측정 값이 정확합니다. 변경 사항은 가시적으로 다시 그리지 않을 수도 있지만 리플 로우 자체는 여전히 장면 뒤에서 발생해야합니다.

측정 getComputedStyle같은 방법의 offsetWidth같은 특성을 사용하거나 사용하여 촬영하는 경우 이러한 효과가 생성된다. 숫자가 사용되지 않더라도 브라우저가 여전히 캐싱 변경 사항을 처리하는 동안 이들 중 하나만 사용하면 숨겨진 리플 로우를 유발할 수 있습니다. 이러한 측정을 반복해서 수행하는 경우, 측정을 한 번만 수행하고 결과를 저장 한 다음 나중에 사용할 수 있습니다.

나는 이전에 그들이 말한 똑같은 것을 의미합니다.오페라는 가치를 캐쉬하고 리플 로우를 피하기 위해 최선을 다할 것입니다. 그러나 그렇게 할 수있는 능력에 의존해서는 안됩니다.

3 가지 유형의 상호 작용 모두 리플 로우를 일으킬 수 있다고 말하는 경우 두 가지 모두를 말하는 것으로 믿으십시오.

건배.

Answer 2

document.body.style.display = 'none'; 
document.body.style.display = 'block'; 

이렇게하면 이해할 수없는 레이아웃 버그가 해결되는 경우가 있습니다.

Answer 3

Understanding Internet Explorer Rendering Behaviour의 "속성 읽기 액세스로 트리거되는 렌더링"섹션에서 IE의 다음 코드가 렌더링 동작을 일으키는 지점을 확인하십시오.

function askforHeight() { 
    $("#lower").height(); 
}