Web开发之CSS

　　Web开发，除了后台开发和数据开发，很大一块是前端开发。前端开发中使用最大的技术是：HTML(现在也有项目开始使用HTML5了，比如沪江英语的听力曲线使用html5 canvas绘制的)，CSS（这个也有一个新版本，CSS3.0。很多应用出现圆角效果，估计都使用到了3.0的新特性），Javascript（其实这个也有版本的哦！盛大的权一大师就在研究ECMAScript5了），一个javascript框架，比如说jQuery,Dojo,YUI等等。

　　主要讲解CSS性能调优，内容涉及一下几个方面。
1.Style标签的调优
2.特殊CSS样式的使用
3.CSS的缩写
4.CSS的声明(省略)
5.CSS的选择器
第一点：
 把Stylesheets文件放在HTML页面的头部，把Javascript文件放在页面的底部。这也是《高性能网站开发》中的建议方法。对于 @import 和 <link> 两种加载外部 CSS 文件的方式：@import 就相当于是把 <link> 标签放在页面的底部，所以从优化性能的角度看，应该尽量避免使用 @import 命令。

第二点：
 避免是有某一特定浏览器的技术的。比如IE支持的CSS Expression和AlphaImageLoader Filter。

 

第三点：
 CSS的缩写。原来把 #FFFFFF写成#FFF也是可以减小代码量，提高性能的呀！在项目中PM经常会指导我们，把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% sans-serief。不过这个对于熟练的工程师来说还好，但是对于初学者来说，这样的样式不够清晰易懂。因为我没有分析过浏览器解析和渲染样式的原理，写成一句是否真的有利于各个浏览器提供性能。我还是不敢肯定。

第四点：
 CSS选择器。周祥老师给出了这个例子，让我大吃一惊。
示例一：Child Selector
#toc > li {font-weight: bold} ，他说：浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的。这里，浏览器首先会查找页面上所有的“li”节点，然后再去做进一步的判断：如果它的父节点的 id 为“toc”，则匹配成功。PS：不过我们项目基本不用这个样式，因为IE6不支持子代选择器。不过他在后面列举
示例二：Descendant selector
#toc  li {font-weight: bold} ，这个效率比之前的“child selector”效率更慢，而且要慢很多。浏览器先便利所有的“li”节点，然后步步上溯其父节点，直到 DOM 结构的根节点（document），如果有某个节点的 id 为“toc”，则匹配成功，否则继续查找下一个“li”节点。不是吧！这个样式在我们开发的Web项目中用到的特别多呀！不过我们现在也逐步习惯一级一级的定位元素，减少浏览器在DOM结果查找的节点的时间。
如果一个标签有id，直接使用ID seletor,比如 <div id="footer"></div>,不要写 div#footer,查找效率很低。但是关于class选择器，我倒是觉得可以使用tag和class同时定位，有时需要这样的需要。    
 treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}
Descendant 选择器是耗时相对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用 child 选择器替代就应该尽量这样去做。还是那个原因，IE6不支持，所以不使用这个。

同时推荐2本淘宝工程师翻译的书，确实不错。目前看完第一本，正在看第二本。作者是前Google Web工程师，翻译都是由口碑前端团队完成的。

   

PS:就因为我在这里放置了2个卓越链接，居然移出首页。