search
HomeWeb Front-endCSS TutorialAnalysis and Summary of the Impact of CSS on Web Page Loading Efficiency_Experience Exchange

We have listed more than a dozen related knowledge and attention points. You can discuss them systematically to make the Web pages we write open more smoothly.
  请不要告诉我,你看不懂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. 

button#backButton { } /* This is an ID-categorized rule */
#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. 

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 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. 


复制代码 代码如下:

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 subdivide 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 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. 

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. 
  Original Document Information - Author: David Hyatt 
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How much specificity do @rules have, like @keyframes and @media?How much specificity do @rules have, like @keyframes and @media?Apr 18, 2025 am 11:34 AM

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?

Can you nest @media and @support queries?Can you nest @media and @support queries?Apr 18, 2025 am 11:32 AM

Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

Quick Gulp Cache BustingQuick Gulp Cache BustingApr 18, 2025 am 11:23 AM

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser

In Search of a Stack That Monitors the Quality and Complexity of CSSIn Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AM

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have

Datalist is for suggesting values without enforcing valuesDatalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AM

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of

Front Conference in ZürichFront Conference in ZürichApr 18, 2025 am 11:03 AM

I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited

Building a Full-Stack Serverless Application with Cloudflare WorkersBuilding a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AM

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details

Creating Dynamic Routes in a Nuxt ApplicationCreating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AM

In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)