25日圣诞节，有幸第一次参加了Web标准化交流会15期上海站的交流，在台下当了一下午听众，感觉还是很受益的。
基于回忆，把若干学习到的东西记录一下。
1. 浏览器如何读取你的CSS文件？
答案：从右到左。
winter一上来就给出了一个很棒的例子来说明这种从右到左的机制
div.a – div – div.b
对于上述dom树：
1) selector: div div .b /*好*/
2) selector: .a div div /*差*/
在浏览器解析CSS文件的背后会存在一棵单一的与dom树对应的css语法树，类似于：
.body - .header - h1 - .content - #main - .article - p -p - .sidebar - .footer
对于每一条css规则，浏览器会先遍历出符合该规则的dom节点，然后对每一个节点自上而下开始渲染。（要注意的是这棵树并非DOM节点树，但它与DOM节点树一样也是唯一的）
举例的话：
1 2 3 4 | .header h1{display:block;font-size:2.4em;font-weight:bold;}
.article p{line-height:1.2em;}
#main p{line-height:1.1em;}
#main p p{line-height:1.2em;} |
浏览器会首先解析第一条规则，查找是否有符合.header h1的dom节点，如果存在符合条件的dom节点，则开始在该节点上渲染CSS;然后第二条，基于此，css中针对同一dom节点的同样层级的规则，位于下面的会覆盖掉原先已经渲染过的规则。
也由于浏览器自上而下的边解析边渲染原则，所以有一些css规则是不推荐的(性能耗损较大)，比如last-child伪类等。
(ps.此条有一些小疑惑。)
2. CSS引起的重绘
CSS规则自下而上的覆盖原则，会引起repaint。要注意的是，repaint与前段优化中常提起的reflow/relayout是不一样的。
简单点说，repaint是由于某个节点的css属性变化，在z-index线上对其他元素的影响，比如一个元素position:absolute;位于另一元素上方，现在一条新的css，display:none;将该元素禁止掉了，于是它下方的元素会显示出来，这个过程叫repaint。
而不基于z-index线的对于布局方面的css变化，引起的是relayout，比如一个元素高度变了，会对位于它下方的所有元素的渲染都产生影响。relayout是要尽可能避免的。
这里还有一些比较好的资源参考：
Firefox的Layout/Reflow | 米嘉(Mozilla) 查看
Optimize browser rendering | Google Code 查看
Writing Efficient CSS for use in the Mozilla UI | MDN 查看
3. 关于优化
基于CSS层面的优化应该是浏览器方面负责解决的事情，我们的目标应该是让CSS文件足够简单(重用性)，并且易于组织(可维护性)。
额，尽管如此，还是有一些需要注意的地方：
* 尽量少用通配符*；
* 不要使用ID嵌套ID的规则，如#main #article{}；
* 不要在CSS中使用IE expression；
* 减少过小像素的背景平铺；
……
4. 在讨论时引发的一个话题
我自己在写CSS文件的时候也会遇到，我喜欢在样式表的公用部分定义一些小的复用程度高的样式，比如:
.clearfix:after { content: ‘\20′; display: block; height: 0; clear: both; }
.clearfix { *zoom: 1; }
.hidden {display:none;}
.inline-block { display: inline-block; *display: inline; }
等等，也包含一些常用的非常规字体如.helvetica{font-family:helvetica,tahoma,arial,serif;}
会上提出来的正是这种情况的两个极端，一种是尽可能地使用这种CSS定义方式，每一个规则都只包含一条语句，在html里可能出现：
1 | <div class="clearfix left ft-song ft-14px"></div> |
类似于这样的长串class组合。
盛大的hax代表了另一种情况，他认为id和class只是起到了一个钩子的作用，这样基于表现的长串class组合违背了它们出现的初衷。
5. Franky分享的《前端优化与分析之基础》
Franky分享的核心是前段优化的原则。
对于比较常见的XX条军规等，一定要找出适合自己网站的优化，而非盲目照着军规来操作。
打造自己的前段优化知识库，这是需要一条一条日积月累出来的。
在优化时先要找出性能瓶颈，针对瓶颈来优化。
后面的一些例子其实很有趣，但是视频字小的缘故，基于微软放大镜的演示不太流畅，时间也太紧了。
主要是展示了一些ie阻塞的情况，并给出了一种js在ie下并行加载的策略：
通过script片段的执行，创建script标签，并加载到网页head区域。这种方式的优点是可以实现ie下的js并行加载，缺点是无法确定js的执行顺序，如果有依赖关系的js可能会抛出错误。针对不同的情况，也有其他的解决方案，其实我比较喜欢淘宝那种通过seed来加载js的方式。
对于优化来说，首先要有一个模拟慢网速的环境，虚拟机+Network Delay Simulator。
6.携程的小飞猪的演示也很精彩，CSS3的动画效果很炫，很喜欢那只会飞的纸飞机。
后面的JavaScript部分太少了点，可能是最近学JavaScript的缘故，这次交流会关于JavaScript的部分太少了，残念。
商派的演讲也挺不错，他们是用mootools的，我最喜欢的框架。
基于body元素来写click的事件代理我保留些自己的想法，我是宁愿多写点针对不同部分的导航分开写事件代理的，我觉得最好还是不要占用body的click事件，有些js组件是有用到的。
