注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

雅虎35条优化黄金守则(三)

站长随记 fishcity 608浏览

16、使用GET来完成AJAX请求    
  Yahoo!Mail团队发现,当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数 据。因此使用GET最为恰当,因为它只需发送一个TCP包(除非你有很多cookie)。IE中URL的最大长度为2K,因此如果你要发送一个超过2K的 数据时就不能使用GET了。    
一个有趣的不同就是POST并不像GET那样实际发送数据。根据HTTP规范,GET意味着“获取”数据,因此当你仅仅获取数据时使用GET更加有意义 (从语意上讲也是如此),相反,发送并在服务端保存数据时使用POST。
除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:

35、避免空的图像来源
一个src属性为空串的图像有两种情况:
1. 直接的HTML
<img src="">
2. JavaScript
var img = new Image();   
img.src = "";
这两种情况都会引起同样的效果:浏览器会再次向你的服务器发出请求。

  • Internet Explorer 将向这个页面所在的目录发出一个请求

  • Safari and Chrome 将发出对这个页面的一个请求。

  • Firefox 3 和更早的版本所采取的动作和Safari and Chrome一样,但是 3.5版本 addressed this issue[bug 444931] and no longer sends a request.

  • Opera 不进行任何操作。

这个行为为何是不好的?
1、 发送大量突然的请求将使你的服务器宕机(Cripple your servers),尤其是每天有数百万访问量的页面。
2、 产生一个从未浏览过的页面将浪费服务器的计算周期(computing cycles)
3、 损坏用户数据。如果你在请求中追踪状态(以cookie或是其他的方式),你可能会损坏数据。即使这个图像请求并没有返回一个图像,所有的头被浏览器读取并接受,包括所有cookie。While the rest of the response is thrown away, the damage may already be done.
引起这种行为的根源在于浏览器中URI的解析方式。这种行为定义在RFC 3986 – Uniform Resource Identifiers.当一个空串作为一个URI时,它被认为一个相对URI(relative URI)并通过定义在section 5.2中的算法被解析。这个特例,一个空串,列在section 5.4当中。Firefox, Safari, and Chrome都是依据这一规格来解析空串,而Internet Explorer则不正确的解析这个串,符合更早的一个规范,RFC 2396 – Uniform Resource Identifiers (this was obsoleted by RFC 3986).所以技术上,浏览器都在做它们被期望所做的事情来解析relative URIs,问题是在这个范围,空串不是故意造成的。
HTML5 adds to the description of the file:///C:/Users/Prayer/AppData/Local/Temp/msohtmlclip1/01/clip_image001.giftag's src attribute to instruct browsers not to make an additional request in section 4.8.2:
    The src attribute must be present, and must contain a valid URL referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. If the base URI of the element is the same as the document's address, then the src attribute's value must not be the empty string.
非常希望浏览器在将来不会有这样的问题。不幸的是,没有为<script src=""> and <link href="">的条款。或许仍需要时间来做出调整以保证浏览器不会意外的实现这一行为。
这一规则是受雅虎JavaScript导师Nicolas C. Zakas启发。更新信息请参见Empty image src can destroy your site..


三、CSS部分

  • 把样式表置于顶部

  • 避免使用CSS表达式(Expression)

  • 用<link>代替@import

  • 避免使用滤镜


17、把样式表置于顶部    
在研究Yahoo!的性能表现时,我们发现把样式表放到文档的<head />内部似乎会加快页面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。    
注重性能的前端服务器往往希望页面有秩序地加载。同时,我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说 特别重要。向用户返回可视化的反馈,比如进程指针,已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文 件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。    
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。    
   HTML规范清楚指出样式表要放包含在页面的<head />区域内:“和<a />不同,<link />只能出现在文档的<head />区域内,尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文 档<head />内加载你的样式表。

18、避免使用CSS表达式(Expression)     
  CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:    
      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );    
如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression 方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。    
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加 一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。    
一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性 必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你 页面的性能产生影响。

19、用<link>代替@import    
前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。    
在IE中,页面底部@import和使用<link>作用是一样的,因此最好不要使用它。

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


四、 JavaScript部分

  • 把脚本置于页面底部

  • 使用外部JavaScript和CSS

  • 削减JavaScript和CSS

  • 剔除重复脚本

  • 减少DOM访问

  • 开发智能事件处理程序


21、把脚本置于页面底部    
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议,浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上,你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本 时,浏览器就不会同时下载其它文件了,即便是主机名不相同。    
在某些情况下把脚本移到页面底部可能不太容易。比如说,如果脚本中使用了document.write来插入页面内容,它就不能被往下移动了。这里可能还 会有作用域的问题。很多情况下,都会遇到这方面的问题。    
一个经常用到的替代方法就是使用延迟脚本。DEFER属性表明脚本中没有包含document.write,它告诉浏览器继续显示。不幸的 是,Firefox并不支持DEFER属性。在Internet Explorer中,脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟,那么它就可以移到页面的底部。这会让你的页面加载的快一点。

22、使用外部JavaScript和CSS     
很多性能规则都是关于如何处理外部文件的。但是,在你采取这些措施前你可能会问到一个更基本的问题:JavaScript和CSS是应该放在外部文件中呢 还是把它们放在页面本身之内呢?    
在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数,却增加了HTML文档的大小。从另一方面来说,如果外部文件中的 JavaScript和CSS被浏览器缓存,在没有增加HTTP请求次数的同时可以减少HTML文档的大小。    
关键问题是,外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度,但是仍然有一些指标可以一测量它。如果一 个会话中用户会浏览你网站中的多个页面,并且这些页面中会重复使用相同的脚本和样式表,缓存外部文件就会带来更大的益处。    
许多网站没有功能建立这些指标。对于这些网站来说,最好的坚决方法就是把JavaScript和CSS作为外部文件引用。比较适合使用内置代码的例外就是 网站的主页,如Yahoo!主页和My Yahoo!。主页在一次会话中拥有较少(可能只有一次)的浏览量,你可以发现内置JavaScript和CSS对于终端用户来说会加快响应时 间。    
对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript和CSS,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。

23、削减JavaScript和CSS     
精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时,所有的注释、不需要的空白字符(空格、换行、tab缩进)等都要去掉。在 JavaScript中,由于需要下载的文件体积变小了从而节省了响应时间。精简JavaScript中目前用到的最广泛的两个工具是JSMin和YUI Compressor。YUI Compressor还可用于精简CSS。    
混淆是另外一种可用于源代码优化的方法。这种方法要比精简复杂一些并且在混淆的过程更易产生问题。在对美国前10大网站的调查中发现,精简也可以缩小原来 代码体积的21%,而混淆可以达到25%。尽管混淆法可以更好地缩减代码,但是对于JavaScript来说精简的风险更小。    
除消减外部的脚本和样式表文件外,<script>和<style>代码块也可以并且应该进行消减。即使你用Gzip压缩过脚本 和样式表,精简这些文件仍然可以节省5%以上的空间。由于JavaScript和CSS的功能和体积的增加,消减代码将会获得益处。

转载请注明:jQ酷 » 雅虎35条优化黄金守则(三)

下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。