Specific analysis of CSS interpretation of front-end performance optimization

Avoid using @import

Using @import in external CSS files will cause additional delays when the page is loaded.

A CSS file first.css contains the following content: @import url("second.css"). The browser first downloads, parses and executes first.css, and then discovers and processes the second file second.css. The simple solution is to use the 2cdf5bf648cf2f33323966d7f58a7f3f tag instead of @import, which downloads the CSS files in parallel, thus speeding up page loading.

Avoiding AlphaImageLoader filters

What is AlphaImageLoader? A unique attribute of IE, used to correct the translucent effect of PNG images displayed in versions below 7.0.

Problem: When the browser loads an image, it will terminate the rendering of the content and freeze the browser. It will be calculated once for each element (not just the image), increasing memory consumption.

Solution: 1. Replace it with PNG8 format. This format can work well in IE.

2. Indeed, you need to use AlphaImageLoader to use the next drawing line _Filter to make users above IE7 invalid.

Avoid CSS Expressions

Example:

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

CSS expressions are a powerful (but dangerous) way to dynamically set CSS properties. Internet Explorer supports CSS expressions starting with version 5.

Problem: The page needs to be recalculated when it is displayed, zoomed, scrolled, or moved the mouse. Add a counter to a CSS expression to track how often the expression is evaluated. You can easily achieve more than 10,000 calculations by simply moving the mouse on the page.

Solution: The way to reduce the number of CSS expression calculations is to use a one-time expression, which assigns the result to the specified style attribute the first time it is run, and uses this attribute to replace the CSS expression. If style properties must change dynamically during page cycles, using event handlers instead of CSS expressions is a viable option. If you must use CSS expressions, be sure to remember that they are evaluated thousands of times and may have an impact on the performance of your page.

Avoid wildcard selectors

In the early days of learning CSS, we often used *{margin: 0; padding: 0;} when making web pages to eliminate the default label Layout and rendering of the same tag in different browsers.

And we sometimes see the way reset is written.

body,p,h1,h2,h3,h4,h5,input,select,textarea,table{margin：0；padding：0;}

Why do these people write like this? We will get the answer in the following content

Example:

#header > a {font-weight:blod;}

CSS selector matches rules from right to left. So this statement is implemented in the browser as:

The browser traverses all a elements in the page -> Whether the id of its parent element is header. #Example:

#header  a {font-weight:blod;}

##This example consumes more time than the previous one

Traverse all items in the page a element——>Traverse to its superiors until the root node #Example:

.selected * {color: red;}

# Matches all elements in the document——>respectively Match elements with class selected level by level, until the root node of the document

# So we should avoid using wildcards Selector. ##Remove unmatched styles

First, deleting useless styles can reduce the size of style files and speed up resource downloads;

Second, for browsers, all style rules will be parsed and indexed , even if the current page has no matching rules. Remove unmatched rules, reduce index items, and speed up browser search;

Avoid single-rule attribute selectors

The browser matches all elements——>Check whether there is href attribute and the herf attribute value is equal to "#index"——> Matches elements with class selected upwards, respectively, until the root node of the document.

Avoid regular-like attribute selectors

Regular expression matching will be much slower than category-based matching. In most cases we should try to avoid using the *=, |=, ^=, $=, and ~= syntax for attribute selectors.

The above is the detailed content of Specific analysis of CSS interpretation of front-end performance optimization. For more information, please follow other related articles on the PHP Chinese website!