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.

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

(0)

相关推荐

  • 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

  • mysql事务对效率的影响分析总结

    1.数据库事务会降低数据库的性能.为了保证数据的一致性和隔离性,事务需要锁定事务. 2.如果其他事务需要操作这部分数据,必须等待最后一个事务结束(提交,回滚). 实例 create table acct( acct_no varchar(32), acct_name varchar(32), balance decimal(16,2) ); insert into acct values ('0001','Jerry', 1000), ('0002','Tom', 2000); start tr

  • 提高ASP页面执行效率的方法分析

    这些大都是与硬件相关.其实在软件上,好的程序设计的方法和正确的参数配置也可以提高程序的性能,有时 在同等情况下只要改变一个参数,程序执行效率就能大大提高.本文就试着在这方面做些探索. 一.影响性能的因素 ASP程序运行的性能主要决定于以下2个大方面: 1.HTML页面的执行效率 2.反应时间,其中反应时间主要受制于下面要素: (1).ASP页面的执行效率 (2).数据库因素 下面我们就来详细讨论一下. 二.详细讨论 1.影响HTML的因素 HTML页面的执行效率是一个纯客户端的问题.影响这个问题

  • 如何使用ASP.NET创建网站并设计web页面

    创建网站 1.从网上下载VS2017,我接触的朋友和公司大多数都是使用VS2017/VS2019,我查过,差别不大,不影响学习,但不建议项目中突然改变版本,升级或降级,都有一定的报错什么的,所以还是老老实实选好了就不要随意升级/降级,毕竟运行了这么久,框架也成型了,不好改变 2.打开VS2017,在文件菜单中,选择新建->项目->Web-APS.NNT Web,名称和位置可以自己定义,另外我选的是.NET Framework 4框架,因为这个版本的使用率比较普及的 直接确定后,生成完成后,会看

  • DIV+CSS布局的网站对网站SEO的影响分析

    符合XHTML标准DIV+CSS布局的网站,下面说说在SEO方面的影响. 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量有一定好处. 表格的嵌套问题 很多SEOer在其文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实.我的几项实验结果没有完全

  • 比较详细的DIV+CSS布局网页对网站SEO的影响

    SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量

  • 分享js粘帖屏幕截图到web页面插件screenshot-paste

    在很多场合下,我们可能有这样的需求:提供个屏幕截图上传到系统,作为一个凭证.传统的操作方式是:屏幕截图,保存文件到本地,在web页面上选择本地文件并上传,这里至少需要三步.有没有可能直接将截图粘帖到web页面上,然后上传?答案是:可以的.这就是本文要介绍的内容了. 由于我的项目有上传屏幕截图这样的需求,为了用户体验更佳,减少操作步骤,我在网上搜了一遍之后,找到了一些眉目.为了便于复用和共享,我又对该功能做了一些封装,于是便有了这个插件 screenshot-paste.运行效果如下图: 插件调用

  • jQuery EasyUI结合zTree树形结构制作web页面

    JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyu

  • JS实现页面载入时随机显示图片效果

    本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

  • 了解WEB页面工具语言XML(六)展望

    六.XML展望 任何一项新技术的产生都是有其需求背景的,XML的诞生是在HTML遇到不可克服的困难之后.近年来HTML在许多复杂的Web应用中遇到了问题,要彻底解决这些问题,必须用功能强大的XML来替代HTML作为Web页面的书写工具.XML有利于信息的表达和结构化组织,从而使数据搜索更有效:XML可以使用URL别名使 Web的维护更方便,也使Web的应用更稳定:XML可以使用数字签名使Web的应用更广阔拓展到安全保密领域.可以认为未来的Web书写工具必定是XML.而XML的广泛使用必然能推动W

随机推荐