Two lines of CSS that boosts 7x rendering performance!

2 years ago

source link: https://dev.to/mnathani/two-lines-of-css-that-boosts-7x-rendering-performance-4mjd
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

I'll cut the crap out and jump directly to the two line of css that you need to add to improve your performance by approx 7x:

{
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

Why do you need this?

Website's nowadays need to be optimal and performant, users on the web have very short attention span. According to Doherty threshold response time to be 400 milliseconds.

Now imagine a website like Facebook,Instagram etc.. taking more time then the threshold ? No one would be coming back to these sites again.

When would you use this?

Most common use cases for this is when you have huge list/grid of data that needs to render at the mount of the application.

Example: Static website like specs or documentation or travel blogs etc...

Would love hear in comments if you have any other use cases for it.

How does it work ?

The browser acts smart by skipping rendering work with the class you applied with content-visibility: auto.

Browser needs to know the layout of the DOM in order to render, those elements which are not in viewport are not rendered and infact have empty box with contain-intrinsic-size you provided.

To summarize all of the rendering is deferred until it reaches the viewport at which the browser renders the actual layout with the width, height and styles you provided.

P.S: the layout which are not outside of the viewport would have a height: 0, so when deferred layout comes to viewport it would stack on top of each other, so that's why contain-intrinsic-size is needed, However, no worries these are just a fallback values, browser will render the actual ones when it renders in viewport.

Hence one drawback of this is the scrollbars would be wacky and jump to places if the contain-intrinsic-size not given properly. :)

Browser Support

content-visibility relies on the the CSS Containment Spec. While content-visibility currently is supported on mostly chromium tech as at the date of writing.

However, content-visibility support is not bad for a good to have feature on high end systems, however with progressing web development it will soon be supported in all browsers too. Hopefully :)

Alternatives

There are alternatives to improve performance using JavaScript, such using List virtualization, but who wants to write 100's of line of js and maintain it when you could do it in 2 lines of css

Further reading; that you could do it in js:
react-window
react-virtualized

Excellent demo and explanation:

ZRAM Boosts Raspberry Pi Performance

Linux is a two-edged sword. On the one hand, there’s so much you can configure. On the other hand, there’s so much you can configure. It is sometimes hard to know just what you should do to get the best performance, espec...

web.dev 4 years ago
Cache

content-visibility: the new CSS property that boosts your rendering performance

content-visibility: the new CSS property that boosts your rendering performance Improve initial load time by skipping the rendering of offscreen content.

matlabgeeks.com 4 years ago
Cache

Find intersection of two lines in MATLAB

Find intersection of two lines in MATLAB One computational geometry question that we will want to address is how to determine the intersection of two line segments. This will allow for further solutions for more complex ques...