docs/optimizing: update for CSS containment

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.