From 88ff705d685c8f5ebcbe9482d4d0cdd4296dbc7b Mon Sep 17 00:00:00 2001 From: thislight Date: Mon, 25 Nov 2024 17:57:11 +0800 Subject: [PATCH] docs/optimizing: update for CSS containment --- docs/optimizing.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/docs/optimizing.md b/docs/optimizing.md index 92f3005..920c157 100644 --- a/docs/optimizing.md +++ b/docs/optimizing.md @@ -5,7 +5,7 @@ Topic Index: - Time to first byte - Time to first draw: [Load size](#load-size) - CLS -- Framerate: [Algorithm](#algorithm) +- Framerate: [Algorithm](#algorithm), [CSS containment](#css-containment) ## Load size @@ -23,4 +23,19 @@ Don't choose algorithm solely on the time complexity. GUI app needs smooth, not - Think in Map-Reduce framework if you don't have any idea. - On the worker thread: balance the speed and the memory usage. - Arrays are usually faster and use less memory. - - Worker is always available on our target platforms, but workers introduce latency in the starting and the communication. + - Worker is always available on our target platforms, but workers introduce latency in the starting and the communication. And, even it's available on targets, it's not always + available on user's platform, so fallback is always required. + +## CSS containment + +`contain` property is a powerful tool that hints user agents to utilise specific conditions can only be easily identified by developers. [This article from MDN can help you undetstand this property](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work). + +But it comes with cost. Modern browsers are already very smart on rendering. Using `contain`, you are trading onething off for another: + +- `layout` affects the reflow. This property usually won't make large change: mainline browsers already can incrementally reflow. +- `style` affacts the style computation, is automatically enabled when using `container` property. Usually won't make large change too, unless you frequently change the styles (and/or your stylesheet is large and/or with complex selectors). +- `paint` affects the shading, the pixel-filling process. This is useful - the shading is resource-heavy - but the browser may need more buffers and more time to compose the final frame. + - This containment may increase memory usage. +- `size` says the size is not affected by outside elements and is defined. It hints the user agent can use the pre-defined size and/or cache the computed size (with `auto` keyword). + - Must be used with `contain-intrinsic-size`. + - You can use `content-visibility: auto`, a stonger hint for browsers to skip elements if possible. You can see this like built-in "virtual list", which is used for rendering infinite size of dataset.