41 lines
2.6 KiB
Markdown
41 lines
2.6 KiB
Markdown
# Optimizing Tutu
|
|
|
|
Topic Index:
|
|
|
|
- Time to first byte
|
|
- Time to first draw: [Load size](#load-size)
|
|
- CLS
|
|
- Framerate: [Algorithm](#algorithm), [CSS containment](#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](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` 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.
|