CSS对Web页面载入效率的影响
Posted in CSS by neemem on 06-09-2008.我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响，因此我们常常关注JavaScript是不是会占用客户端较多的资源，然而大部分都会忽略的一件有趣的事情，CSS也会对Web页面载入的效率产生影响。
我们罗列了十几条相关的知识与注意点，大家可以系统的探讨一下，让我们编写的Web页面打开更加流畅。
请不要告诉我，你看不懂E文，只是你不愿意看！！！
1、How?the?style?system?breaks?up?rules
The?style?system?breaks?rules?up?into?four?primary?categories.?It?is?critical?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?that?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?their?key?selector.
Example Source Code [www.52css.com]#urlBar[type="autocomplete"]?{?}?/*?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.
Example Source Code [www.52css.com].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.
Example Source Code [www.52css.com]treeitem?>?treerow?{?}?/*?A?tag-based?rule?*/
input[type="checkbox"]?{?}?/*?A?tag-based?rule?*/
1.4、Universal?Rules
All?other?rules?fall?into?this?category.
Example Source Code [www.52css.com][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?selectors.?As?long?as?your?little?subtree?continues?to?check?out,?the?style?system?will?continue
moving?to?the?left?until?it?either?matches?the?rule?or?bails?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?dramatically?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.
Example Source Code [www.52css.com]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.
Example Source Code [www.52css.com]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?subdivide?these?rules?into?class?categories,
and?then?we?no?longer?waste?time?trying?to?match?as?many?rules?for?a?given?tag.
Example Source Code [www.52css.com]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?is?in?the?tag?or?universal?category.?Frequently?what?is?really?desired?is?the
child?selector.?The?use?of?the?descendant?selector?is?banned?in?UI?CSS?without?the?explicit?approval
of?your?skin’s?module?owner.
Example Source Code [www.52css.com]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.
Example Source Code [www.52css.com]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.
Example Source Code [www.52css.com]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.
Example Source Code [www.52css.com]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.
Example Source Code [www.52css.com]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.
Original?Document?Information?－?Author:?David?Hyatt
- New style, new UI, new iPhone!!
- Javascript+XML 操作
- Apache vs Nginx : Web Server Performance Deathmatch
- Nginx 0.5.33 + PHP 5.2.5（FastCGI）Web服务器
- WEB标准网页布局中HTML结构化漫谈
- ie6下gzip javascript出错.无法调用
- nginx+apache+mysql+php+memcached+squid搭建门户网站
- 优化squid性能
- CSSdiv网页布局对SEO的影响漫谈
- 194 Cracked Iphone Apps/Games + How 2 install guide
