《
CSS 性能调优》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331T2013.htm
清单 1. CSS Expression 案例
这个效率比之前的“child selector”效率更慢，而且要慢良多。浏览器先方便所有的“li”节点，然后步步上溯其父节点，直到 DOM 构造的根节点(document)，如果有某个节点的 id 为“toc”，则匹配胜利，否则持续查找下一个“li”节点。
先来看看下面这个例子：
IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“解冻”浏览器，结束渲染页面。同时 filter 也会增大内存耗费。最不能忍耐的是 filter 样式在每个页面元素(使用到该 filter 样式)渲染时都会被浏览器分析一次，而不是像个别的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。
清单 7. 尽量避免 universal rules
清单 10. 尽量减少规则数目
Color Font Letter-spacing Line-height List-style Text-align Text-indent Text-transform White-space Word-spacing
#bookmark > .menu-left {list-style-image: ,CSS 必知的7个知识点;url(blah)} ------------>>>>>>>> #bookmark {list-style-image: url(blah)}
CSS 性能调优
.Class1{position: absolute; left: 20px; top: ,CSS 常用信息速查手册;30px;} .Class2{position: absolute; left: 20px; top: 30px;} .Class3{position: absolute; left: 20px; top: 30px;} .Class4{position: absolute; left: 20px; top: 30px;} .Class5{position: absolute; left: 20px; top: 30px;} .Class6{position: absolute; left: 20px; top: 30px;} -------------------->>>>>>> .class1 .class2 .class3 .class4 .class5 .class6{ Position: absolute; ,CSS 区分IE版本的三个方法;left: 20px; top: 20px; }
Expression 只有 IE 支撑，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和转变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会晓得，expression 的执行上相称频繁的。鼠标的转动很轻易就会使 expression 的履行次数超过 10000。
然而，可怜的是，偏偏相反，浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的。这里，浏览器首先会查找页面上所有的“li”节点，然后再去做进一步的断定：如果它的父节点的 id 为“toc”，则匹配成功。
清单 6. Descendant selector
CSS 代码的分析与渲染都是由浏览器来完成的，所以，懂得浏览器的 CSS 工作机制对我们的优化有至关主要的作用。这篇文章我们重要从如下几个方面入手来介绍一下 CSS 的性能优化：
清单 5. Child selector
由此可知，CSS 挑选器的匹配远比我们设想的要慢的多，CSS 的性能问题不容疏忽。
清单 9. 关于 class-categorized 规则
把 Stylesheets 放在 HTML 页面头部：
--> [
网站建设之]CSS 性能调优
简介
浏览器在所有的 stylesheets 加载完成之后，才会开端渲染全部页面，在此之前，浏览器不会渲染页面里的任何内容，页面会始终浮现空缺。这也是为什么要把 stylesheet 放在头部的起因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等候 stylesheet 的加载，还要期待 html 内容加载实现，这样一来，用户看到页面的时光会更晚。
清单 2. Colour 缩写
程序员们常常会给某个 Class 前面加上标签名称(Tag Name)，以更准确且疾速的定位该节点，但是这样往往效率更差。和清单 8 中的原理一样，页面上的 class 在全局范畴内来讲应该是唯一的，用独一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上，这种做法也可以避免因为开发修正页面元素的类型(Tag)而导致的款式生效的情形，做到样式与元素的分别，两者独破保护。
CSS 的声明
button#goButton {...};----->>#goButton .fundation#testIcon {,CSS 入门教程 纵向导航菜单...};----->>#testIcon
参考下述代码：
Descendant 选择器是耗时绝对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用 child 选择器替代就应该尽量这样去做。
Tag：性能 性能
这篇文章先容了 Web 开发中对于 CSS 性能方面需要注意的一些小细节，从 CSS 自身着手，介绍了编写 CSS 代码中需要避免的一些写法，比方 CSS Expression 的弊病，CSS 缩写以及 CSS 取舍器的注意事项等等，也分享了一些比较推举的做法。我们可以在开发进程中尽量留神一下这些小细节，以尽可能多的提高我们 Web 利用的机能,css sprites适用范围和css sprites的利弊。
Span[mailfolder="true"] > table > tr > td.columnClass {...} ------------------->>>>>>> .span-mailfolder-tbl-tdCol {...}
清单 12. 利用 CSS 的继承机制
停止语
针对这种情况，最好的解决措施就是使用 PNG8。
treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}
清单 8. Id-categorized 规则与 tag name 或 class 规则并行
清单 4. Class 的申明
#000000 ------>> #000 ,CSS Sprites技术及图片优化;#336699 ------>> #369
避免使用 CSS Expressions：
特殊的 CSS 样式使用方式
防止应用 Filter：
CSS 选择器 (CSS Selectors)
Style 标签的相干调优
清单 3. 各种缩写方式
Multiple Declarations
CSS 缩写：
在 CSS 中，有很多 CSS 的属性以可以继续的，如果某个节点的父节点已经设定了上述的 CSS 样式(如：color, font 等 ...)，并且子节点无需更改该样式，则无需再作相关设定，同时，也可以应用这一点：如果许多子节点都需要设定该 CSS 属性值，可以同一设定其父节点的该 CSS 属性，这样一来，所有的子节点再无需做额定设定，加速了 CSS 的分析效率。
CSS 缩写可以让你用极少的代码定义一系列样式属性，这种做法可以极大水平的缩减代码量以到达提高性能的目标。
规矩越多，匹配越慢，上面一种规则须要进行 6 项匹配，先找“columnClass”，再找“td”，而后是“tr”，“table&rdquo,CSS Sprites技术以及图片优化;，最后是合乎“mailfolder”为“true”的 span，这种效力是十分慢的。假如用一个比拟特别的 class 替换(span-mailfolder-tbl-tdCol)，效率会快上好多少倍。
CSS 抉择器
button.indented {...}----->>.button-indented {...}
依照我们惯常的懂得，编译器应该是先查找 id 为“toc”的节点，然后在他的所有直接子节点中查找类型(tag)为“li”的节点，将“font-weight”属性运用到这些节点上。
Margin-top: 2px; Margin-right: 5px; Margin-bottom: 2em; ,CSS Sprites技术; Margin-left: 15px; ,CSS Sprites图片合并技术减少请求优缺点; ----->> Margin: 2px 5px 2em 15px; Border-width: 1px; Border-style: solid; Border-color: #000 ----->> border: 1px solid #000 Font-style: italic; Font-variant: small-caps; Font-weight: bold; Font-size: 1em; Line-height: 140%; Font-family: sans-serif; ----->> font: italic small-caps bold 1em 140% ,css reset重置基础代码;sans-serief Background-color: #f00; Background-image: url(background.gif); Background-repeat: no-repeat; Background-attachment: fixed; Background-position: 0 0; ----->>background: #f00 url(background.gif) no-repeat fixed 0 0 list-style-type: square; list-style-position: inside; List-style-image: url(image.gif) ----->> list-style: square inside url(image.gif)
清单 11. 尽量避免使用 descendant selector
对 @import 跟 两种加载外部 CSS 文件的方式：@import 就相称于是把 标签放在页面的底部，所以从优化性能的角度看，应当尽量避免使用 @import 命令
这里，按照我们惯例的理解，箭头左边的写法仿佛是应该更快的，由于它的限度更多。实在不然，id 是全局唯一的，在匹配 CSS 选择器时浏览器定位到 id 是最快的，如果随同有其余的非 id 的 selector，反而会影响匹配的效率。
[hidden="true"] { ... } /* A universal rule */
关于 CSS 的 class 声明和定义，也有简写的方式
Web 开发中时常会碰到性能的问题，尤其是 Web 2.0 的应用。CSS 代码是把持页面显示样式与后果的最直接“工具”，但是在性能调优时他们通常被 Web 开发工程师所疏忽，而事实上不标准的 CSS 会对页面渲染的效率有重大影响，尤其是对于结构庞杂的 Web 2.0 页面，这种影响更是不可磨灭。所以，写出规范的、高性能的 CSS 代码会极大的提高应用程序的效率。本文主要来探讨一下如何优化，以及从哪些方面优化应用程序的 CSS 代码，从而最大限度的提高 Web 应用的性能。
关于色彩，反复的属性值可以省略。
CSS 缩写
这里的匹配规则很显明：查找页面上的所有节点，如果有节点存在“hidden”属性，并且其属性值为“true”，则匹配成功。这是最耗时耗力的匹配，页面上的所有节点都需要进行匹配运算，这种规则应尽量避免。
Background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )
#toc li {font-weight: bold}
这种 Class 简写的方法能够极大的缩减咱们的代码，进步阅读器剖析辨认的效率。
#toc > li {font-weight: bold}
(责任编辑：网站建设)
CSS 性能调优相关文章