Analysis of the optimization of front-end performance with CSS interpretation

Avoid using @import

Using @import in an external CSS file causes the page to add additional latency when loading.

A CSS file First.css contains the following content: @import URL ("Second.css"). The browser first downloads, parses and executes FIRST.CSS, discovers and processes the second file SECOND.CSS. The simple workaround is to use the <link> tag instead of @import to download the CSS file in parallel to speed up page loading.

Avoid AlphaImageLoader filters

What is AlphaImageLoader? IE Unique property for correcting the translucent effect of PNG images displayed in the following versions of 7.0.

Problem: When a browser loads a picture it terminates the rendering of the content and freezes the browser, and it will operate once for each element (not just the picture), increasing the memory cost.

Solution: 1, PNG8 format to replace, this format can work well in IE.

2, do need to use AlphaImageLoader, use underscore _filter, make IE7 above version of the user invalid.

Avoid CSS expressions

Cases:

Background-color:expression (New Date ()). GetHours ()%2? " #FFFFFF ":" #000000 ");

CSS expressions are a powerful (but dangerous) way of dynamically setting CSS properties. Internet Explorer supports CSS expressions starting with the 5th version.

Problem: It will be recalculated once the page is displayed and scaled, scrolled, and moved. Add a counter to the CSS expression to track how often the expression is calculated. Easily move the mouse in the page can be more than 10,000 times the amount of calculation.

Workaround: The way to reduce the number of CSS expression calculations is to use a one-time expression that assigns the result to the specified style property at the first run and replaces the CSS expression with this property. If the style attribute must change dynamically within the page cycle, using an event handle instead of a CSS expression is a viable option. If you must use CSS expressions, be sure to remember that they are counted thousands of times and may have an impact on the performance of your pages.

Avoid a wildcard selector

In the early days of learning CSS, we often use *{margin:0;padding:0 when we do the Web page, to eliminate the default layout of the label and the rendering of the same label for different browsers.

And we sometimes see how reset is written.

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

Why are these people writing this, and we're going to get answers to the following?

Cases:

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

< Span class= "crayon-h" > < Span class= "Crayon-sy" >css selectors are rule matching from right to left. So in the browser this statement is implemented as:

The browser iterates through all the a elements in the page and the ID of its parent element is the header.

Cases:

#header  a {font-weight:blod;}

This example consumes more time than the previous one.

Traverse all a elements in a page--and traverse to their ancestors until the root node

Cases:

. selected * {color:red;}

Matches all elements of the document--up and down, to match the elements of class selected, until the root node of the document

So we should avoid using a wildcard selector.

Remove a no match style

First, delete the useless style can reduce the size of the style file, speed up the download speed of resources;

Second, for browsers, all style rules are parsed and indexed, even if there are no matching rules for the current page. Remove no matching rules, reduce index entries, and speed up browser lookups;

Avoid single-rule attribute selectors

The browser matches all elements--check for the href attribute and the Herf property value equals "#index"--up and down each step to match the element of class selected until the document's root node.

Property selector to avoid class regularization

Regular expression matching can be much slower than class-based matching. Most of the cases we should try to avoid using the *=, |=, ^=, $=, and ~= syntax of the attribute selector.