`
shenjc2008
  • 浏览: 140199 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

网站性能优化一---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以上版本的用户无效。
分享到:
评论

相关推荐

    网站页面性能优化的34条黄金守则--雅虎团队经验分享

    ### 网站页面性能优化的34条黄金守则--雅虎团队经验分享 #### 知识点一:减少HTTP请求次数 在网站页面性能优化中,减少HTTP请求次数至关重要。据统计,网页加载时间中大约有80%是由于下载组件(如图片、样式表等)...

    网站性能优化的34条黄金守则(Yahoo)

    的Exceptional Performance团队通过对Web性能的深入研究,总结出了34条黄金守则,这些守则涵盖了网站内容、服务器、Cookie、CSS、JavaScript、图片以及移动应用等多个方面。以下是对这34条守则中部分内容的详细解释...

    Yahoo!团队实践分享:网站性能优化的34条黄金守则

    【网站性能优化的34条黄金守则】是Yahoo! Exceptional Performance团队经过深入研究和实践总结出的一套提升网页速度的方法。这些守则旨在改善用户体验,减少用户等待时间,从而提高网站的效率和吸引力。以下是其中...

    Yahoo!网站性能最佳体验的34条黄金守则__JavaScript和CSS

    网站性能最佳体验的34条黄金守则之JavaScript和CSS优化 #### CSS优化守则 **1. 把样式表置于顶部** - **背景与意义**:这一建议来源于Yahoo!团队对自身网站性能的研究。他们发现在网页加载过程中,如果样式表位于...

    Yahoo!开发团队总结的网站性能优化的34条黄金守则.doc

    开发团队总结的网站性能优化的34条黄金守则 #### 一、内容部分 ##### 1. 尽量减少HTTP请求 - **背景与重要性**:据Yahoo! Exceptional Performance团队的研究表明,在终端用户的响应时间中,大约80%的时间用于...

    网站性能优化的34条黄金守则

    Yahoo!的Exceptional Performance团队为改善Web性能带杢最佳实践。他们为此迕行了一系列的实验、开収了各种工具、写了大量...可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、秱劢应用等七部分。

    网站性能最佳体验的34条黄金守则

    网站性能最佳体验的34条黄金守则是针对提升网页加载速度和用户体验的重要准则,由Yahoo!的Exceptional Performance团队提出。这些守则分为七大类别,包括内容、服务器、Cookie、CSS、JavaScript、图片以及移动应用。...

    大型网站性能优化方案

    网站性能最佳体验的34条黄金守则”。这些规则涵盖了从页面设计、开发实践到服务器配置的方方面面,是业界公认的性能优化指南。 1. **避免使用CSS表达式**:它们会在每次页面重绘或布局时计算,影响性能。 2. **减少...

    Yahoo!网站最佳体验守则、web优化

    网站最佳体验守则是指导网站开发者和管理员提升网站性能和用户体验的一套准则。这些守则旨在通过内容优化和服务器优化来减少加载时间,提高网页的响应速度,从而让网页浏览变得更为流畅。以下将详细阐述这些关键知识...

    雅虎给出的34条优化网站访问速度加快方法.txt

    以上两点是雅虎提出的34条网站性能优化黄金守则中的两个核心方面。通过实施这些策略,不仅可以减少页面加载时间,还可以改善用户体验。接下来的部分将继续介绍其余的优化方法,包括避免跳转、缓存Ajax、推迟加载等...

    页面重构技能-内容篇

    根据网上分享的 Yahoo 的高性能网站构建的黄金守则,我们可以从以下七个方面来优化页面重构: 1. 尽量减少HTTP请求 用户加载页面时,80%的时间被用于下载页面中的各项内容,包括图片、样式、脚本等。因此,减少HTTP...

Global site tag (gtag.js) - Google Analytics