ब्राउज़र रीफ्लो ईवेंट सुनना

Question

मैं यह जानने के लिए ब्राउज़र के reflow-events सुनने की कोशिश कर रहा हूं कि कोड के कौन से हिस्से सबसे महंगे हैं। रेफ्लो तब होता है जब स्क्रीन पर कुछ (पुनः) खींचा जाना चाहिए, उदाहरण के लिए जब नया तत्व डोम में जोड़ा जाता है।

आगे विश्लेषण के लिए जावास्क्रिप्ट के साथ/उदाहरण के लिए घटनाओं को सुनने का कोई तरीका है?

Answer 1

मुझे लगता है कि यह समाधान DOM MutationObserver क्लास का उपयोग करने के लिए है। डॉक्स के रूप में बाहर बिंदु:

यह उत्परिवर्तन घटनाक्रम DOM3 घटनाक्रम विनिर्देश में परिभाषित के लिए एक स्थानापन्न के रूप में बनाया गया है। 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();