Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge about "what skills can be used to improve page rendering speed using CSS". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. Content-visibility

In general, most Web apps have complex UI elements that extend beyond what the user sees in the browser view. In this case, we can use content-visibility to skip rendering of off-screen content. If you have a lot of off-screen content, this will significantly reduce page rendering time.

This feature is one of the most recent additions and one of the most important to improve rendering performance. Although content-visibility accepts several values, we can use content-visibility: auto; on elements to get an immediate performance boost.

Let's consider the following page, which contains cards with many different messages. Although there are about 12 cards that fit the screen, there are about 375 cards in the list. As you can see, the browser took 1037ms to render this page.

Next, you can add content-visibility to all cards.

In this example, after adding content-visibility to the page, the rendering time drops to 150ms, which is more than a six-fold performance improvement.

As you can see, content visibility is quite powerful and useful for improving page rendering time. Based on what we've been discussing so far, you must be thinking of it as a silver bullet for page rendering.

Content-visibility restrictions

However, there are several areas where content visibility is poor. I would like to stress two points for Members 'reference.

This feature is still in the experimental phase. As of now, Firefox(PC and Android versions), IE(I don't think they plan to add this feature to IE), and Safari(Mac and iOS) don't support content visibility.

Issues related to the behavior of scroll bars. Since the initial rendering height of elements is 0px, these elements come to the screen whenever you scroll down. The actual content is rendered and the height of the element updated accordingly. This will cause the scrollbar to behave in an unexpected way.

To solve the scroll bar problem, you can use another CSS property called contain-intrinsic-size. It specifies the natural size of an element, so the element will be rendered at the given height rather than 0px.

.element{ content-visibility: auto; contain-intrinsic-size: 200px; }

However, when experimenting, I noticed that even with conta-intrinsic-size, if we have a large number of elements, and content-visibility is set to auto, you will still have smaller scroll bar problems.

So my advice is to plan your layout, break it down into sections, and then use content visibility on those sections for better scrollbar behavior.

2. Will-change property

Animations on browsers are nothing new. Typically, these animations are rendered periodically along with other elements. However, browsers can now use GPUs to optimize some of these animation operations.

With the will-change CSS attribute, we can indicate that the element will modify certain attributes, allowing the browser to make the necessary optimizations beforehand.

What happens next is that the browser will create a separate layer for that element. It then delegates the rendering of that element to the GPU along with other optimizations. This will make the animation smoother because GPU acceleration takes over the rendering of the animation.

Consider the following CSS classes:

// In stylesheet .animating-element { will-change: opacity; } // In HTML Animating Child elements

When rendered in the browser, the clip above recognizes the will-change attribute and optimizes future opacity-related changes.

According to Maximillian Laumeister's performance benchmark, you can see that he achieved a rendering speed of over 120FPS with this single change, compared to an initial rendering speed of about 50FPS.

When not to use will-change

While will-change is intended to improve performance, it can also degrade Web application performance if you abuse it.

Use will-change to indicate that the element will change in the future. So if you try to combine will-change and animation, it won't give you optimization. Therefore, it is recommended to use will-change on parent elements and animation on child elements.

.my-class{ will-change: opacity; } .child-class{ transition: opacity 1s ease-in-out; }

Do not use non-animated elements. When you use will-change on an element, the browser tries to optimize it by moving the element to a new layer and handing over the transformation to the GPU. If you don't have anything to convert, it results in a waste of resources.

One last thing to note is that it is recommended to remove the will-change of an element after all animations are complete.

3. Reduce render block time

Today, many Web applications must satisfy multiple forms of demand, including PCs, tablets, and mobile phones. To accomplish this responsive feature, we must write new styles based on the media size. When it comes to page rendering, it cannot start the render phase until the CSS Object Model (CSSOM) is ready. Depending on your Web application, you may have one large style sheet to satisfy all device form factors.

But suppose we split it into multiple stylesheets based on form factors. In this case, we can just let the main CSS file block the critical path and download it with high priority, while letting the other stylesheets download with low priority.

After breaking it down into multiple stylesheets:

As you can see, decomposing style sheets by style factors reduces render blocking time.

4. Avoid @import containing multiple style sheets

With @import, we can include a stylesheet in another stylesheet. When we are working on a large project, using @import can make the code simpler.

The key fact about @import is that it's a blocking call because it has to go through a network request to get the file, parse the file, and include it in the stylesheet. If we nest @import in the stylesheet, it hinders rendering performance.

# style.css @import url("windows.css"); # windows.css @import url("componenets.css");

We can achieve the same functionality with multiple links than with @import, but with much better performance because it allows us to load stylesheets in parallel.

"CSS can improve the speed of page rendering skills what" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.