diff --git a/src/App.vue b/src/App.vue index 112aacc1d9341bd8d4da868059b01a12bffc1990..e009f12b17f821cf95401eb9fd14e10a3a45e7a5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -55,8 +55,9 @@ const findAppDom = () => { const appDom = document.getElementById('app') findAppCount.value += 1 if (appDom) { + console.log('appDom', appDom) const listenDomChange = new ListenDomChange(appDom) - console.log('getPerformance',listenDomChange.getPerformance()) + console.log('getPerformance', listenDomChange.getPerformance()) } else if (findAppCount <= 1000) { findAppDom() diff --git a/src/utils/index.js b/src/utils/index.js index c4020d729009751476ac5559152c99ea570878c0..95f1eb1c13a7a770c4e714d2aa4a572e6c92233b 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -15,37 +15,7 @@ class ListenDomChange { this.calcPerformance() this.mutationListen() } - // 监听 dom变化 - mutationListen() { - // 选择需要观察变动的节点 - const targetNode = this.dom - - // 观察器的配置(需要观察什么变动) - const config = { attributes: true, childList: true, subtree: true }; - - // 当观察到变动时执行的回调函数 - const callback = function (mutationsList, observer) { - console.log('change_______________', mutationsList) - // Use traditional 'for loops' for IE 11 - for (let mutation of mutationsList) { - if (mutation.type === "childList") { - console.log("A child node has been added or removed."); - } else if (mutation.type === "attributes") { - console.log("The " + mutation.attributeName + " attribute was modified."); - } - } - }; - - // 创建一个观察器实例并传入回调函数 - this.observer = new MutationObserver(callback); - - // 以上述配置开始观察目标节点 - this.observer.observe(targetNode, config); - - // 之后,可停止观察 - this.observer.disconnect(); - } getPerformance() { return this.performanceConfig @@ -89,6 +59,47 @@ class ListenDomChange { that.setPerformance(entry.name, domContentLoadedTime) }); } + + // 监听 dom变化 + mutationListen() { + // 观察器的配置(需要观察什么变动) + const config = { attributes: true, childList: true, subtree: true }; + // 当观察到变动时执行的回调函数 + + const callback = function (mutationsList, observer) { + console.log('this.dom', this.dom) + const renderHeight = this.dom.offsetHeight + + console.log('renderHeight_____________', renderHeight) + console.log('change_______________', mutationsList) + // Use traditional 'for loops' for IE 11 + // for (let mutation of mutationsList) { + // if (mutation.type === "childList") { + // console.log("A child node has been added or removed."); + // } else if (mutation.type === "attributes") { + // console.log("The " + mutation.attributeName + " attribute was modified."); + // } + // } + + if (parseInt(renderHeight)) { + this.setPerformance('fmp', performance.now()) + this.clearObserver() + } + + + }; + + // 创建一个观察器实例并传入回调函数 + this.observer = new MutationObserver(callback); + + // 以上述配置开始观察目标节点 + this.observer.observe(this.dom, config); + + } + // 可停止观察 + clearObserver() { + this.observer.disconnect(); + } } export {