From 752dbcc7fd53e36bc6d26dce60b2f572b99f3922 Mon Sep 17 00:00:00 2001 From: jwilliams720 Date: Tue, 27 Aug 2024 16:47:06 +0100 Subject: [PATCH] add TOC, update polyfill readme --- README.md | 26 +++++++++++++++++++++++++- docs/polyfill.md | 15 ++------------- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 91dacdf..fd406c7 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,29 @@ # Container Timing: Explainer +1. [Authors](#authors) +1. [Introduction](#introduction) +1. [Motivation](#motivation) +1. [Objectives](#objectives) +1. [Registration](#registration) +1. [PerformanceContainerTiming](#performancecontainertiming) + 1. [Web IDL (subject to change)](#web-idl-subject-to-change) +1. [Algorithm](#algorithm) + 1. [Life Cycle](#life-cycle) +1. [Nested Containers Roots](#nested-container-roots) + 1. [Ignore](#ignore-default) + 1. [Transparent](#transparent) + 1. [Shadowed](#shadowed) +1. [Non Goals](#non-goals) + 1. [LCP Integration](#lcp-integration) + 1. [Built-in containers](#built-in-containers) + 1. [Shadow DOM](#shadow-dom) +1. [Security and Privacy](#security-and-privacy) +1. [Polyfill](#polyfill) +1. [Questions](#questions) +1. [Implementation](#implementation-work) +1. [Glossary](#glossary) +1. [Links](#links--further-reading) + ## Authors - Jason Williams (Bloomberg) @@ -19,7 +43,7 @@ As developers increasingly organise their applications into components there's b Current Web API's don't help with this. Element Timing will be [limited](https://w3c.github.io/paint-timing/#timing-eligible) due to what it can mark so it can't be used for whole sections. The polyfill referenced below does attempt to provide a userland solution by adding Element Timing to all elements within a container and using the data from those performance entries know when painting has finished, this does have several drawbacks though: - Marking elements with the `elementtiming` attribute needs to happen as early as possible before painting happens, this will require server side changes or blocking rendering until all elements are marked (degrading performance) -- A [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) needs to be utilised to catch new elements being injected into the DOM (with `elementtiming` being set) +- A [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) needs to be utilised to catch new elements being injected into the DOM (with `elementtiming` being set) - The polyfill will need to run and perform set up in the head of the page increasing the time to first paint. - Tracking of rectangles will need to be performed in userspace rather then the browsers built in 2D engine making it much less efficient diff --git a/docs/polyfill.md b/docs/polyfill.md index 4907e7a..007e2d5 100644 --- a/docs/polyfill.md +++ b/docs/polyfill.md @@ -67,19 +67,8 @@ You can open the HTML of each example and look in the dev tools console to see w ## Nested Containers -You have the ability to nest containers within one another, entries for each container will still be emitted, for filtering on the container you're interested in its best to use an identifier when setting the attribute, such as `containertiming="myContainer"`. - -There are various strategies for how we deal with nested containers, ignoring by default. - -### `ignore` - -This will treat both containers in isolation and won't pass up any entry information from one container to a parent. Anything which happens to a sub-container is ignored by the parent. -This can be useful if the inner container is unrelated to your content and you don't want to track any rendering behavior from it at all. - -### `transparent` - -This is similar to ignore above, but will still account for any changes happening in the inner-container, as though the boundary never existed in the first place. From the perspective the inner-container attribute has no effect. -The inner container will continue to receive its events like normal +Right now there's no way to set the nesting strategy, the polyfill is currently set to `ignore` by default. +For more info on nested containers, see [Nested Containers](../README.md#nested-container-roots) ## Debug Mode