Javascript - DOM 다시 그리기 메서드가 동기 있습니까?

Question

제 질문에 DOM 다시 그리기 메서드는 DOM을 수정하고 브라우저로 하여금 페이지를 다시 그리게합니다. 예를 들어 :

는

const newChildNode = /*...*/; 

document.body.appendChild(newChildNode); 

const newHeight = document.body.scrollHeight; 

이 코드는 정상적인 상황에서 잘 작동하지만 나는 그것이 페이지를 다시 그리기 너무 많은 요청이있는 경우와 같이, 고압 조건에서의 작동 방식 때문에 확실하지 않다. document.body.scrollHeight이 실행될 때 newChildNode이 이미 화면에 표시되어 있다고 가정 할 수 있습니까?

Answer 1

우리는 DOM 업데이트, 3 개 부분으로이 "다시 그리기" 과정을 나눌 수 리플 로우, 다시 그리기.

이러한 모든 작업 같은 규칙을 따르지 않는 :

DOM 업데이트 : 항상 동기. DOM은 다른 js 객체 일 뿐이며 조작 메소드는 모두 동기식입니다.

리플 로우 : 이상한 짐승입니다. 이것은 페이지에있는 요소의 모든 상자 위치 재 계산입니다.
일반적으로 브라우저는 DOM을 수정하기 전까지 기다려야하므로 js 스트림이 끝나기 전에 끝납니다.
그러나 일부 DOM 메서드는이 작업을 동 기적으로 강제 실행합니다. 예 : HTMLElement.offsetXXX 및 이와 유사한 속성 인 Element.getBoundingClientRect 또는 문서 내 Node.innerText에 액세스하거나 getComputedStyle 속성 (예 : 기타 등등)에 액세스하면 리플 로우가 업데이트되어 업데이트 된 값을 갖습니다. 따라서 이러한 메서드/속성을 사용할 때주의하십시오.

Repaint : 실제로 상황이 렌더링 엔진에 전달 될 때. 이것이 일어날 때 스펙의 어떤 것도 언급하지 않습니다. 대부분의 브라우저는 다음 화면을 새로 고칠 때까지 기다릴 것이지만 항상 그렇게 행동 할 것이라고는 말하지 않습니다. 예 : Chrome은 alert()으로 스크립트 실행을 차단했을 때 Chrome을 트리거하지 않는 것으로 알려져 있지만 Firefox는 실행됩니다.