브라우저 리플 로우 이벤트 듣기

Question

나는 가장 비싼 코드 부분을 파악하기 위해 브라우저 reflow-events을 들으려고합니다. 리플 로우는 새로운 요소가 DOM에 추가 될 때와 같이 화면에 무언가 (다시) 그려져 야 할 때 발생합니다.

추가 분석을 위해 Javascript의 /와 같은 이벤트를 수신하는 방법이 있습니까?

Answer 1

DOM MutationObserver 클래스를 사용하는 것이 해결책이라고 생각합니다. 문서가 지적한대로 :

DOM3 이벤트 사양에 정의 된 Mutation Events를 대체하기 위해 설계되었습니다. Api Docs

사이트의 예는 꽤 자기 설명

// select the target node 
var target = document.querySelector('#some-id'); 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log(mutation.type); 
    });  
}); 

// configuration of the observer: 
var config = { attributes: true, childList: true, characterData: true }; 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

// later, you can stop observing 
observer.disconnect();