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

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

[url]http://apps.hi.baidu.com/share/detail/14611816[/url]


[color=red][b]1.Put Stylesheets at the Top

把样式表置于顶部[/b][/color]

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

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.

[b][color=blue]The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.[/color][/b]

[color=blue][b]把样式表放到文档的<head />内部[/b][/color]


[color=red][b]2.Avoid CSS Expressions

避免使用CSS表达式(Expression)[/b][/color]

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

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

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

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


[color=red][b]3.Choose <link> over @import

用<link>代替@import[/b][/color]

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

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


[color=red][b]4.Avoid Filters

避免使用滤镜[/b][/color]

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

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图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。
[color=blue]完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用 AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。[/color]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值