diff --git a/examples/adding-content/index.js b/examples/adding-content/index.js index 26e04a8..6dd2a64 100644 --- a/examples/adding-content/index.js +++ b/examples/adding-content/index.js @@ -1,16 +1,13 @@ window.ctDebug = true; -// const observer = new ContainerPerformanceObserver((list) => { -// list.getEntries().forEach((entry) => { -// console.log(entry); -// }); -// }); +const queryString = window.location.search; +const urlParams = new URLSearchParams(window.location.search); +const nestedStrategy = urlParams.get("nestedStrategy") || "ignore" const nativeObserver = new PerformanceObserver((v) => { console.log(v.getEntries()); }); -nativeObserver.observe({ entryTypes: ["container"] }); -// observer.observe({ nestedStrategy: "transparent" }); +nativeObserver.observe({ type: "container", nestedStrategy: nestedStrategy }); window.setTimeout(() => { const innerContainer = document.querySelector(".container div"); diff --git a/index.html b/index.html index b869f73..fbddab0 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,10 @@

Container Timing Examples

  1. Table
  2. - dynamic content + Dynamic content with nested strategy + ignore, + transparent, + shadowed
diff --git a/polyfill/polyfill.ts b/polyfill/polyfill.ts index 2068ade..5dc875f 100644 --- a/polyfill/polyfill.ts +++ b/polyfill/polyfill.ts @@ -1,3 +1,5 @@ +const native_implementation_available = ("PerformanceContainerTiming" in window); + // https://wicg.github.io/element-timing/#performanceelementtiming interface PerformanceElementTiming extends PerformanceEntry { name: string; @@ -82,19 +84,25 @@ const mutationObserverCallback = (mutationList: MutationRecord[]) => { } }; -// Wait until the DOM is ready then start collecting elements needed to be timed. -document.addEventListener("DOMContentLoaded", () => { - mutationObserver = new window.MutationObserver(mutationObserverCallback); - - const config = { attributes: false, childList: true, subtree: true }; - mutationObserver.observe(document, config); - const elms = document.querySelectorAll(containerTimingAttrSelector); - elms.forEach((elm) => { - containerRoots.add(elm); - ContainerPerformanceObserver.setDescendants(elm); +// Wait until the DOM is ready then start collecting elements needed to be timed. +if (!native_implementation_available) { + console.debug("Enabling polyfill") + document.addEventListener("DOMContentLoaded", () => { + mutationObserver = new window.MutationObserver(mutationObserverCallback); + + const config = { attributes: false, childList: true, subtree: true }; + mutationObserver.observe(document, config); + + const elms = document.querySelectorAll(containerTimingAttrSelector); + elms.forEach((elm) => { + containerRoots.add(elm); + ContainerPerformanceObserver.setDescendants(elm); + }); }); -}); +} else { + console.debug("Native implementation of Container Timing available") +} class PerformanceContainerTiming implements PerformanceEntry { entryType = "container"; @@ -504,4 +512,6 @@ class ContainerPerformanceObserver implements PerformanceObserver { } } -window.PerformanceObserver = ContainerPerformanceObserver; +if (!native_implementation_available) { + window.PerformanceObserver = ContainerPerformanceObserver; +} \ No newline at end of file