页面重构技能-Javascript、CSS篇

CSS：

1. 样式表置于顶部
2. 避免CSS表达式
3. 使用外部JS、CSS
4. 削减JS、CSS
5. ，@import
6. 避免滤镜

JS：

1. 脚本置于底部
2. 使用外部JS、CSS
3. 削减JS、CSS
4. 不用重复脚本
5. 减少访问和操作DOM
6. 事件委托

浏览器渲染页面都是自上而下的渲染，当在里遇到或是时候会阻塞渲染页面，而且也有可能会造成页面重绘，就好像格子铺里，东西都按顺序摆好了，但是老板说，这个东西得这样、那样摆，又得挨个重新摆了。除此之外，加在里是为了可以顺序加载所需的样式。

很多人包括我在内，当学习到CSS表达式时候，都说避免或不要用它，所以都偷懒的不用看了，包括JS里的eval一样……

后来有一次项目我就偏偏用了一次，结果。。。它成为了最后查出来的BUG。。。（IE6下影响了页面样式）

其实CSS表达式最主要的弊端是它影响性能，要知道CSS是具有时效性的，也就是说，当你修改一下样式，它会马上生效，

而改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行频繁的求值，会严重影响，所以要尽量避免。

我们都知道使用外部文件会增加HTTP请求，但是由于缓存的关系，当用户再次访问时，或者访问其它页面里相同的文件时候，页面会明显提升响应速度，而且，还有一点好处就是外部JSS、CSS可以减少页面内的文档大小。

这个不用说了……你说为什么？

先来看看两者区别：

区别1：老祖宗的差别。@import完全是CSS提供的一种方式，link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：加载顺序的差别。link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：兼容性的差别。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：使用dom控制样式时的差别。link支持使用Javascript控制DOM去改变样式；而@import不支持。

两者比较，@import明显弱爆了……

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

脚本的问题就是当浏览器渲染时候遇到