Summary of common CSS optimization--suggestions on network performance and grammatical performance

The optimization work of CSS mainly starts from two aspects.

• Network performance: Write CSS to the least number of bytes, speed up the download speed, natural can make the page rendering faster some of the merged compressed CSS files, etc.
• Syntax performance: Optimizing syntax merging CSS statements

CSS Compression

is to remove the unused whitespace in our CSS to reduce the number of characters.

. test{    Background-color: #ffffff;    Background-image:url (a.jpg);}

It will become like this after compression.

. test{Background-color: #fff;  Background-image:url (a.jpg)}

Common compression Tools

YUI Compressor

CSS Compressor

CSS Drive

Clean CSS

gzip compression

Gzip is a popular file compression algorithm, which is now widely used, especially in Linux platforms, this is more than just CSS, when the application gzip compression to a plain text file, the effect is very obvious, approximately can reduce the file size of more than 70% (depending on the content in the file). Want to learn more about gzip see Wikipedia.

Without gzip compression, the Web server directly sends HTML pages, CSS scripts, and JS scripts to the browser, while the gzip-enabled Web server compresses the files and then sends them to the browser, which is decompressed and decoded locally by the browser (gzip) and displays the original file. This reduces the number of bytes of files we transmit, which can naturally be optimized for network performance. Gzip compression requires server support, so we need to configure it on the server side

Enable gzip compression on IIS (HTTP compression)

Apache Enable gzip compression method

Nginx Gzip Compression Configuration

Of course, in addition to gzip compression, the cache is also what we need to pay attention to, this and CSS optimization is not a big relationship, in the case of web optimization to write CSS

In addition to the compression method, we can also reduce the CSS byte by writing less CSS properties, to take the most common example

. test{Background-color: #000; Background-image:url (image.jpg); Background-position:left top; Background-repeat: No-repeat;}

We can rewrite the CSS above to achieve the same effect

. test{  

Font

Margin/padding

{padding-top:5px; padding-right:5px; padding-bottom:5px; padding-left:5px;} {padding:5px;}

Background

Border

{border-width:2px; border-style:solid; Border-color: #000;} {border:2px solid #000;}

{border-top:2px; border-right:5px; border-left:10px; border-bottom:3px;} {border:2px 5px 10px 3px;}

Many of the attributes added by CSS3, such as transform, animation-related, can be written using inheritance

CSS inheritance mechanism can also help us to a certain extent to reduce the number of bytes, we know that CSS has a lot of properties can be inherited is the parent container set the dictation property, the child container will default also use these properties, so if we want full-text font size is 14px, large can not be set for each container, You just need to set it on the body.

Pulling away, splitting CSS, not loading all of the CSS

From CSS is to put some common CSS into a file, rather than write each page, so that once downloaded, other pages can use the cache, reduce unnecessary repeated download.

The application of the principle of extraction, in many cases we put the page common CSS to a file, so that once loaded can take advantage of the cache, but this is not suitable for all scenarios, I used to write CSS to some front-end plug-ins with all the CSS to write to a page, but sometimes the page will only use a dialog, Some pages only use a TreeView, but the CSS of more than 10 plugins downloaded to the page, this is the problem, so although the CSS wrote a file can reduce the HTTP request, but like the situation is not supposed to do so.

CSS is placed in head, reducing repaint and reflow

The browser downloads the HTML build DOM tree from top to bottom to render the page based on the default browser and existing CSS, and when it encounters the new CSS, it downloads and rebuilds the render tree with the existing CSS, and the rendering is wasted. If we put all the CSS on the top of the page, there is no re-rendering process.

Reflow: When DOM elements appear hidden/displayed, size changes, position changes, the browser will render the page again, before rendering work in vain

Repaint: When the element's background color, border color does not cause reflow changes, it will cause the browser to re-render the element. It seems to be acceptable, but if we define it at the beginning, it's better not to let the browser repeat the work.

Avoid applying wildcards or implicit wildcard characters

The * representation of wildcards in CSS, although useful but improper use it is also a demon, such as

We think that this is the body of the child node set some properties, but because of the CSS inheritance characteristics of the reason, the page all elements will accept this rule, for complex pages in the performance of the impact is still very large, this is not to say that you can not use wildcard characters, but to use the time to pay attention to the scope.

Some implicitly-wildcard characters

: visible{  padding:0;}

This is almost like a wildcard, you must pay attention to the scope of the problem when using

Avoid hierarchical or overly restrictive CSS

CSS is parsed from right to left,

Do not use tags or class to restrict ID rules

This should be a common sense, but many students will misuse, write #test.info or div#test such a selector, this can only be said to be superfluous, the ID can be the only and fastest positioning an element do not use the tag name to restrict the class rules

This estimate has been misused more, such as Div.info, in fact, we can write directly as. Info, right-to-left parsing reason can know why its inefficient, if the direct use of class can not achieve the purpose, the general should be the class design is problematic, CSS needs to refactor to use the most specific categories, Avoid descendant selectors, rules that belong to label categories never include child selectors

These three rules are figured out, because the descendant selectors in the CSS selector are the most expensive selectors in CSS instead of helping us to speed up the CSS lookup, since parsing the relationship from left to right is not the only way to get the descendants selector. its cost is extremely expensive-especially if the selector is in the label or general category , it is advisable to be very cautious when using a sub-selector, and to avoid it. We can solve this by specific categories-using a single or minimal class.

Summary of common CSS optimization--suggestions on network performance and grammatical performance