The effect of CSS on loading efficiency of Web pages _ Experience Exchange

We have listed more than 10 related knowledge and attention points, we can systematically explore, let us write a Web page open more smoothly.
Please do not tell me, you can not read E, but you do not want to see!!!

1. How the style system breaks up rules
The style system breaks rules up to four primary categories. It was critical to understand these categories, as they was the first line of defense as far as rule matching was concerned. I use the term key selector with the paragraphs that follow. The key selector is defined to being the rightmost occurrence of an ID selector, a class selector, or a tag selector.

1.1. ID Rules
The first category consists of those rules that has an ID selector as their key selector.

Button#backbutton {}/* This is an id-categorized rule */
#urlBar [type= "AutoComplete"] {}/* This was an id-categorized rule */
TreeItem > Treerow > treecell#mycell:active {}/* This was an id-categorized rule */
1.2. Class Rules
If a rule has a class specified as its key selector and then it falls to this category.

Button.toolbarbutton {}/* A class-based Rule */
. Fancytext {}/* A class-based Rule */
MenuItem > Menu-left[checked= "true"] {}/* A class-based Rule */
1.3. Tag Rules
If no class or ID is specified as the key selector and then the next potential category for a rule is the tag category. If A rule has a tag specified as it key selector, then the rule falls to this category.

TD {}/* A tag-based Rule */
TreeItem > Treerow {}/* A tag-based Rule */
Input[type= "checkbox"] {}/* A tag-based Rule */
1.4. Universal Rules
All the other rules fall to this category.


: Table {}/* A Universal Rule */
[hidden= "true"] {}/* A Universal Rule */
* {}/* A Universal Rule */
Tree > [collapsed= "true"] {}/* A Universal Rule */
2. How the Style System Matches Rules
The style system matches a rule by starting with the rightmost selector and moving to the left through the rule ' s selector S. As long as your little subtree continues to check out, the style system would continue moving to the left until it eithe R matches the rule or bails out because of a mismatch.
Your first line of defense is the rule filtering this occurs based on the type of the key selector. The purpose of this categorization are to filter out rules so, you don ' t even has to waste time trying to match them. This is the key to dramatically increasing performance. The fewer rules that you even has to check for a given element, the faster style resolution would be. As an example, if the your element has a ID, then only the ID rules that match your element ' s ID is checked. Only the class rules for a class found on your element would be checked. Only the tag rules that match your tag would be checked. Universal rules would always be checked.

3. Guidelines for efficient CSS
3.1, Avoid Universal rules!
Make sure a rule doesn ' t end up in the universal category!

3.2, Don ' t qualify id-categorized rules with tag names or classes
If you have a style rule, there is a ID selector as its key selector, and don ' t bother also adding the tag name to the rule. IDs is unique, so your ' re slowing down the matching for no real reason.


Copy CodeThe code is as follows:
Bad-button#backbutton {}
Bad-. Menu-left#newmenuicon {}
good-#backButton {}
good-#newMenuIcon {}

3.3, Don ' t qualify class-categorized rules with tag names
Similar to the rule above and all of our classes would be unique. The convention you should use are to include the tag name in the class name.


Copy CodeThe code is as follows:
bad-treecell.indented {}
Good-. treecell-indented {}

3.4. Try-to-put rules into the most specific category can!
The single biggest cause of slowdown and our system is, we have too many rules in the tag category. By adding classes to our elements, we can further subdivide these rules into class categories, and then we no longer waste Time trying to match as many the rules for a given tag.


Bad-treeitem[mailfolder= "true"] > Treerow > Treecell {}
Good-. Treecell-mailfolder {}
3.5, Avoid the descendant selector!
The descendant selector is the most expensive selector in CSS. It is dreadfully expensive, especially if a rule using the selector are in the tag or universal category. Frequently what's really desired is the child selector. The use of the descendant selector are banned in UI CSS without the explicit approval of the your skin ' s module owner.

Bad-treehead treerow Treecell {}
BETTER, but still bad (see next guideline)-treehead > Treerow > Treecell {}
3.6. Tag-categorized rules should never contain a child selector!
Avoid using the selector with tag-categorized rules. You'll dramatically increase the matching time (especially if the rule is likely to being matched more often than isn't) for All occurrences of the that element.


Bad-treehead > Treerow > Treecell {}
Best-. Treecell-header {}
3.7, Question all usages of the selector!
Being careful about using the selector. If you can come up with a and a to avoid have to use it, does so. In particular, the child selector was frequently used with RDF trees and menus.


Bad-treeitem[isimapserver= "true"] > Treerow >. Tree-folderpane-icon {}
Remember that attributes from RDF can is duplicated in a template! Take advantage of the duplicate RDF properties on the child XUL elements the wish to change based off that attribute .


Good-. Tree-folderpane-icon[isimapserver= "true"] {}
3.8, Rely on inheritance!
Learn which properties inherit, and allow them to do so! We have a explicitly set up XUL widgetry so it can put list-style-image (just one example) or font rules on the parent tag, and it'll filter in to the anonymous content. You don ' t has to waste time writing a rule that talks directly to the anonymous content.


bad-#bookmarkMenuItem >. menu-left {list-style-image:url (blah);}
good-#bookmarkMenuItem {list-style-image:url (blah);}
In the above example, the desire to style the anonymous content (without understanding, List-style-image inherits) Res Ulted in a rule that is in the class category, when this rule really should has ended up being in the most specific Cate Gory of all, the ID category.
Remember, especially with anonymous content, which they all has the same classes! The bad rule above causes the icon of every menu to being checked to see if it's contained in the Bookmarks menu item. This was hideously expensive (since there is many menus); This rule never should has even been checked by any menu and other than the Bookmarks menu.

3.9, use-moz-image-region!
Putting a bunch of images to a single image file and selecting them With-moz-image-region performs significantly better than putting each image to its own file.
Original Document Information-author:david Hyatt

