脚本宝典收集整理的这篇文章主要介绍了CSS对Web页面载入效率的影响分析总结,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我们罗列了十几条相关的知识与注意点,大家可以系统的探讨一下,让我们编写的Web页面打开更加流畅。
请不要告诉我,你看不懂E文,只是你不愿意看!!!
1、How the style System breaks up rules The style system breaks rules up into four
Primary categories.
IT is crit
ical to understand these categories, as they are the
First line of defense as far as rule 
;matching is concerned. I use the term key selector in the paragraphs t
hat follow. The key selector is
defined to be 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 have an ID selector as th
eir key selector.
button
#backButton { } /* This is an ID-categorized rule */
#urlBar[ty
PE="auto
complete"] { } /* This is an ID-categorized rule */
treeitem > treerow > treecell#myCell :active { } /* This is an ID-categorized rule */
1.2、Class Rules
If a rule has a class specified as its key selector, then it falls into 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, then the next potential category for a rule is the tag category. If a rule has a tag specified as its key selector, then the rule falls into 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 other rules fall into 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 t
hrough the rule's selectors. As long as your li
TTLe su
BTree continues to check out, the style system will continue moving to the left until it either matches the rule or b
ails out because of a mismatch.
Your first line of defense is the rule filtering that occurs based on the type of the key selector. The purpose of this categorization is to filter out rules so that you don't even have to waste time trying to match them. This is the key to dr
amatically increasing performance. The fewer rules that you even have to check for a given element, the faster style resolution will be. As an example, if your element has an ID, then only ID rules that match your element's ID will be checked. Only class rules for a class found on your element will be checked. Only tag rules that match your tag will be checked. Universal rules will 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 that has an ID selector as its key selector, don't bother also adding the tag name to the rule. IDs are
unique, so you're slowing down the matching for no real reason.
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, all of our classes will be unique. The convention you should use is to include the tag name in the class name.
BAD - treecell.indented { }
GOOD - .treecell
-indented { }
3.4、Try to put rules into the most specific category you can!
The single
Biggest cause of slowdown in our system is that we have too many rules in the tag category. By adding classes to our elements, we can further s
ubdivide these rules into class categories, and then we no longer waste time trying to match as many 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 e
xpensive selector in CSS. It is drea
DFully expensive, especially if a rule using the selector is in the tag or universal category. Frequently what is really desi
red is the child selector. The use of the descendant selector is banned in UI CSS without the explicit ap
PRoval of 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 child selector with tag-categorized rules. You will dramatically increase the matching time (especially if the rule is likely to be matched more often than not) for all occurrences of that element.
BAD - treehead > treerow > treecell { }
BEST - .treecell-header { }
3.7、Question all
usages of the child selector!
Be careful about using the child selector. If you can come up with a way to avoid having to use it, do so. In particular, the child selector is frequently used with RDF trees and menus like so.
BAD - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
Remember that attributes
From RDF can be duplicated in a template! Take advantage of this fact to duplicate RDF properties on child XUL elements that 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 explicitly set up XUL widgetry so that you can put list
-style-image (just one example) or font rules on the parent tag, and it will filter in to the anonymous content. You don't have 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 that list-style-image inherits) resulted in a rule that was in the class category, when this rule really should have ended up being in the most specific category of all, the ID category.
Remember, especially with anonymous content, that they all have the same classes! The bad rule above causes the icon of every menu to be checked to see if it is contained in the bookmarks menu item. This is hideously expensive (since there are many menus); this rule never should have even been checked by any menu other than the bookmarks menu.
3.9、Use -moz-image-region!
Putting a bunch of images into a single image file and selecting them with -moz-image-region performs significantly better than putting
each image into its own file.
Ori
ginal Document Information - Author: David Hyatt
脚本宝典总结
以上是脚本宝典为你收集整理的CSS对Web页面载入效率的影响分析总结全部内容,希望文章能够帮你解决CSS对Web页面载入效率的影响分析总结所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。