雅虎网页优化14条:YSlow工具的理论基础

网页|优化|雅虎|yslow

     第一条:Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。

      80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。

      这里好像有个矛盾,就是如果我减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解。我们只是说尽量的减少,并没有说完全不能使用。减少这些文件的Request请求数,当然也有一些技巧和建议的:

      1:用一个大图片代替多个小图片。

      这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。

      第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。
      第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。

      一个大小为40528bytes的337*191px的大图片的分析结果(点击图片可以查看完整大图片)

      一个大小为13883bytes的280*90px的小图片的分析结果(点击图片可以查看完整大图片)

      第一张大图片花费时间为:
      Blocked:13.034s
      Send:0.001s
      Wait:0.163s
      Receive:4.596s
      TTFB:0.164s
      NetWork:4.760s
      功耗时:17.795s

      真正用于传输大文件花费的时间为Reveive时间,即4.596s,多数的时间是用来检索缓存和确定链接是否有效的Blocked时间,供花费13.034s,占总时间的73.2%。

      第二张小图片花费时间为:
      Blocked:16.274s
      Send:小于0.001s
      Wait:0.117s
      Receive:0.397s
      TTFB:0.118s
      NetWork:0.516s
      功耗时:16.790s

      真正用于传输文件的花费时间是Reveive时间,即0.397s,这的确要比刚才大文件的4.596s小很多。但是他的Blocked时间为16.274s,占总时间的97%。

      如果这些数据还不够说服你的话,让我们看看下面这张图。这里列出了某个网页中所有图片中的花费时间示意图。当然,里面的图片有大有小,规格不一。

      大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。其中藏青色的为传输文件花费的Reveive时间,而前面白色的为检索缓存和确认链接是否有效的Blocked时间。铁一样的事实告诉我们:

      大文件和小文件下载所需时间的确是不同的,差异的绝对值不大。而且下载所需时间占总耗费时间比例很小。

      大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。无论文件大小,这个时间的花费大致是相同的。而且所占总耗费时间的比例是极大的。

      一个100k的大图片总耗费时间绝对大于4个25k的小图片的总耗费时间。而且主要差别就是4个小图片的Blocked时间绝对大于1个大图片的Blocked时间。

      所以如果可能还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。

      但是,请注意:也不能用太大的单张图片,因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主意。

      2:合并你的css文件。

      图:合并与融合我以前犯了一个错误,你在看我《样式表的组织与规划》的系列文章中会知道。当时,我为了方便组织和规划样式表,将用于不同用途的样式表文件分离开来,形成不同的css文件。然后在页面中根据需要引用多个css文件。

      根据“尽可能的减少HTTP的Request请求数”准则我们知道,那样的确是不合理的,因为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以,从提高网页效率的角度上而言,我们还是应该将所有的css写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢?这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个css文件以便于规划和组织。而等到发布的时候,再将多个css文件合并到一个文件中去,从而达到减少HTTPRequest请求数的目的。

时间: 2024-10-31 11:33:55

雅虎网页优化14条:YSlow工具的理论基础的相关文章

雅虎Yahoo 前段优化 14条军规

Yahoo 14条 雅虎十四条 腾讯前端设计的Leader推荐我背熟的.请大家都能好好学习,不要像我一样一扫而过,好好的记下来!不仅仅是晓得一些CSS xhtml就好了,深刻认识到很多的东西需要学习的.很早就用Firebug,但是却没听说过Yslow,这叫不喜欢追求.希望大家关注前端设计的,多追求. 有兴趣的同学可以装个 Firebug 下的 Yslow ,测试下自己的网站. Web 应用性能优化黄金法则:先优化前端程序 (front-end) 的性能,因为 这是 80% 或以上的最终用户响应时

雅虎14条性能优化(经典)

相信互联网已经越来越成为人们生活中不可或缺的一部分.ajax,flex等等富客户端的应用使得人们越加"幸福"地体验着许多原先只能在C/S实 现的功能.比如Google机会 已经把最基本的office应用都搬到了互联网上.当然便利的同时毫无疑问的也使页面的速度越来越慢.自己是做前端开发 的,在性能方面,根据yahoo的调查,后台只占5%,而 前端高达95%之多,其中有88%的东西是可以优化的. 废话不多说,贴规则: 相信很多人都听过优化网站性能的14条规则.更多的信息可见develope

jQuery性能优化28条建议你值得借鉴_jquery

jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景. 一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 复制代码 代码如下: $('#content').hide(); 或者从ID选择器继承来选

提高网页的效率 Use YSlow to know why your web Slow第1/2页_经验交流

所以网页的效率绝对是最值得关注的方面.虽然我们在 <如何提高网页的效率(上篇)--提高网页效率的14条准则>提到了如何提高网页效率的14条准则,但是如何知道我们现在的网页的效率到底如何?到底处于怎样一个级别?又有哪些方面做的不够好,需要改进呢?也许,你会说,问一下用户不就知道了吗?但是相比感性比例占据太大的用户感受而言,理性的工具和数据更具有说服力.本篇就将向你介绍一款评测网页效率的工具--YSlow(why slow,这个名字起的太好了). yslow YSlow是由Yahoo开发者团队发布

帮助开发者提高网页速度的15个工具

Response times, availability, and stability are vital factors to bear in mind when creating and maintaining a web application. If you're concerned about your web pages' speed or want to make sure you're in tip-top shape before starting or launching a

整理3款网页用户行为跟踪分析工具

初看下这些工具与网页流量统计很像,实际上作为网页用户行为跟踪分析工具来看,功能上不仅仅是简单的统计流量,而是涉及到用户访问网页的方方面面,比如用户的鼠标移动,键盘输入,点击行为等等.几乎可以将用户在网页中的所有行为都进行记录统计,无论对于网站运营还是网页设计者都是十分有用的一手资料 Userfly Userfly可以提供免费的网页访客动作记录服务.只需要在网页中添加一段简单的Javascript代码,就可以记录访客从打开该网页到关闭整 个过程中的动作. Userfly能够记录的内容包括鼠标的移动

SQL优化34条

我们要做到不但会写SQL,还要做到写出性能优良的SQL,以下为笔者学习.摘录.并汇总部分资料与大家分享!(1) 选择最有效率的表名顺序(只在基于规则的优化器中有效):ORACLE 的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处理,在FROM子句中包含多个表的情况下,你必须选择记录条数最少的表作为基础表.如果有3个以上的表连接查询, 那就需要选择交叉表(intersection table)作为基础表, 交叉表是指那个

网站服务器性能优化之百度站长工具篇

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 大家都知道目前国内的服务器要求备案是比较严格的,一般需要一定的资质确认,还要备案人或企业法人营业执照等一系列证件,以及一定周期的审核(北京万网总部一般2个星期的工作日),那么我们要想网站快速上线,很多时候都会选择香港或者国外的空间,但是因为每个服务商的服务器性能,以及先天的线路缺点,这些服务器的性能参差不齐不说,而且或多或少的要低于国内的一些

简化网页 优化WEB应用的方法

web|网页|优化 在最近的项目中,我发现许多过于臃肿的网页.对于内联网中的网站而言,这一般不会造成什么问题.不过,当你通过互联网向外发布网页时,性能可能是我们关心的主要问题--毕竟,多数用户并非通过高速连接访问网站.本周,我来分析一下优化WEB应用的方法. 常见问题与可能的优化方案 加载网页的时间过长,这仅仅是WEB用户的常见投诉之一,但这也是最明显的问题.WEB开发者的主要问题在于:他们认为自己的平台满足一个目标用户群.但用户的计算机配置与互联网连接速度各不相同,所以开发者应能满足用户的最低