Skip to content

Commit

Permalink
add TOC, update polyfill readme
Browse files Browse the repository at this point in the history
  • Loading branch information
jwilliams720 committed Aug 27, 2024
1 parent 9e8f801 commit 752dbcc
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 14 deletions.
26 changes: 25 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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

Expand Down
15 changes: 2 additions & 13 deletions docs/polyfill.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 752dbcc

Please sign in to comment.