听取浏览器回流事件 [英] Listening browser reflow event
本文介绍了听取浏览器回流事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试收听浏览器 reflow-events 了解代码的哪些部分是最昂贵的代码。当必须(重新)绘制到屏幕上时,例如当将新元素添加到DOM时,会发生回流。
I'm trying to listen browsers reflow-events to get an idea what parts of a code are the most expensive ones. Reflow occurs when something must be (re)drawn to screen, for example when new element is added to DOM.
有没有办法在/中使用Javascript来监听这些事件,以便进一步分析?
Is there a way to listen thease events for example in/with Javascript, for further analysis?
推荐答案
我认为解决方案是使用DOM MutationObserver类。
正如文档所指出的那样:
I think the solution it's to use the DOM MutationObserver class. As the Docs point out:
它被设计为DOM3 Events规范中定义的Mutation Events的替代品。
Api Docs
该网站上的示例非常自我解释
The example on the site is pretty self explanatory
// 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();
这篇关于听取浏览器回流事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文