参考资料:
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以上版本的用户无效。
分享到:
相关推荐
网站页面性能优化的34条黄金守则--雅虎团队经验分享,一定受益菲浅。
雅虎团队经验-网站页面性能优化的34条黄金守则
网站性能优化的34条黄金守则(Yahoo)
Yahoo!团队实践分享:网站性能优化的34条黄金守则 Yahoo!团队实践分享:网站性能优化的34条黄金守则
Yahoo!网站性能最佳体验的34条黄金守则__JavaScript和CSS Yahoo!网站性能最佳体验的34条黄金守则__JavaScript和CSS Yahoo!网站性能最佳体验的34条黄金守则__JavaScript和CSS
Yahoo!的Exceptional Performance团队为改善Web性能带杢最佳实践。他们为此迕行了一系列的实验、开収了各种工具、写了大量...可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、秱劢应用等七部分。
雅虎网站页面性能优化34条.docx 雅虎网站页面性能优化34条.docx
Yahoo!网站性能最佳体验的34条黄金守则
雅虎团队经验:网站页面性能优化的34条黄金守则 1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少...
yahoo开发团队blog(英文原文地址):http://developer.yahoo.com/performance/ Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验...最佳实践的核心就是旨在提高网站性能。
介绍雅虎团队网站优化经验:总结性能优化的34 条黄金守则
Yahoo网站性能优化的34条军规,WEB开发使用
前端性能优化 yahoo前端性能团队总结的35条黄金定律。
雅虎网站页面性能优化(全部),个人搜集,比较全面
Yahoo的WEB前端优化34条原则。大型web开发必备的技术知识。很不错哦
Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量...可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
雅虎给出的34条优化网站访问速度加快方法.