This article has participated in the third “topic writing” track at the Diggings Creators Camp. For more details, check out diggings program | Creators Camp.

How does a browser load a web page

We know how to browse and load a web page. We go through the following steps:

  1. The browser gets the HTML document.

  2. The browser converts the HTML file into a DOM (Document Object Model)

  3. The browser picks up images, videos, and CSS styles, for example, that are embedded in the page.

  4. The browser pulls the CSS and parses it to generate a CSS tree

  5. Combine the DOM tree and CSS tree into a render tree

  6. Layout according to the render tree, drawing each node

  7. Draws the layout to the screen

Based on this, we can be sure that CSS does not affect DOM parsing, but it does block the rendering of the page

Optimizing the CSS

Compress and shrink CSS

The compression

When the browser and server are connected, downloading external styles inevitably leads to delays, but we can reduce the transfer time by compressing the file and its contents.

You can compress the size of the file by opening GZIP.

narrow

Shrinking is the process of removing whitespace and any unwanted code. The output is a small but fully valid code file that can be parsed by the browser.

  1. If you are using WebPack, you can use the mini-css-extract-plugin to package your CSS.

  2. Delete the blank space

  3. Delete comments before publishing

  4. Avoid 0px, use 0 directly,

  5. Delete the unused CSS

Load non-important CSS asynchronously

For example, if you want the user to print the content of a web page to display a specific CSS style, you can use media=’print’ to set the style of the print

< span style =" text-align: center; text-align: center; text-align: center;Copy the code

You can select Preload when you don’t want to block DOM loading.

Preload is a declarative FETCH that forces the browser to request resources without blocking the Document’s onLoad event.


<link rel="preload">

Copy the code

Replace images with CSS effects

Use borders, shadows, rounded edges, gradients, and some geometric shapes instead of images.

Avoid using inline styles in HTML

Try to include CSS styles in your CSS file, which not only improves readability, but also reduces redundant code.

Simplified selector

There are many CSS selectors. We can avoid complex selectors and select id selectors if necessary. I’m talking about getting rid of complex selectors here, not in terms of CSS performance. For most sites, optimizing CSS selectors will give you very little performance. This is based on Performance Impact of CSS Selectors.

Using CSS animation

Native CSS transitions and animations are always faster than JavaScript driven effects that modify the same properties. Many people are used to animating by manipulating the DOM and CSS, but this is performance consuming because javascript manipulates the DOM and CSS, and browsers are constantly rearranging and redrawing

Benefits of using CSS3 animation instead of JS simulation animation:

  1. Hardware acceleration;

  2. The browser optimizes the animation

  3. CSS3 animation is the use of C language, it is the system level of animation.

Move the key CSS styles to the Style TAB

The browser will not render the DOM element until all of its corresponding styles have been loaded. This can be a problem if the element styles are all stored in a single large style sheet that takes a few seconds to load. Instead, we can do this by placing the key CSS styles in the style tag.

Written order

This is an important factor that is often overlooked.

Take the following example

width: 150px;
height: 150px;
position: absolute;

Copy the code

When the browser parses to Position, it suddenly realizes that the element is absolutely positioned and needs to be removed from the document flow, whereas before it was parsed as a normal element, so it has to be rerendered.

If you do, I recommend installing the CSScomb plugin. Also recommended is the Code Guide by @alloyTeam

CSS is essential for loading pages and a pleasant user experience. While we might normally prioritize other assets (such as scripts or images) that have a greater impact, we shouldn’t forget CSS.