tutu/docs/optimizing.md

Optimizing Tutu

Topic Index:

• Time to first byte
• Time to first draw: Load size
• CLS
• Framerate: Algorithm, CSS containment

Load size

The baseline for the load size is lowest 3G download bandwidth in 2s, typically 1.1Mbps (or ~137 kilobytes/s) * 2s = 274 kilobytes.

In another words there is 274 kilobytes budget for an interaction without further notice. Notice and progress are needed if the interaction needs than that.

The service worker can use 1 chunk of size.

Algorithm

Don't choose algorithm solely on the time complexity. GUI app needs smooth, not fast. The priority:

• On the main thread: batching. Batching is usually required to spread the work to multiple frames.
  • 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. 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.

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 affects 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), containing the computation may help performance.
• 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.