网站性能优化一---yahoo网站页面性能优化34条黄金守则---css

参考资料:
http://developer.yahoo.com/performance/rules.html

http://apps.hi.baidu.com/share/detail/14611816


1.Put Stylesheets at the Top

把样式表置于顶部


http://developer.yahoo.com/performance/rules.html#css_top

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

把样式表放到文档的<head />内部


2.Avoid CSS Expressions

避免使用CSS表达式(Expression)


http://developer.yahoo.com/performance/rules.html#css_expressions

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。

一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。


3.Choose <link> over @import

用<link>代替@import


http://developer.yahoo.com/performance/rules.html#csslink

在IE中,页面底部@import和使用<link>作用是一样的,因此最好不要使用它。


4.Avoid Filters

避免使用滤镜


http://developer.yahoo.com/performance/rules.html#no_filters

The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption and is applied per element, not per image, so the problem is multiplied.

The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE. If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.


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

你可能感兴趣的:(css,浏览器,IE,Yahoo,performance)