内容再丰硕的网站，如果慢到无法走访也是毫无意义的; SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭; UE设计的再人性化的网站，如果用户连看都看不到也是空谈。
所以网页的效率绝对是最值得关注的方面。如何能力进步一个网页的效率呢?Steve Souders(Steve Souders的材料提出的进步网页效率的14条准则，而这些准则也将是我们下篇中介绍到的YSlow工具的理论基本：
第一条：Make Fewer HTTP Requests 尽可能的减少HTTP的Request要求数。
80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request要求数将是进步网页显示效率的重点。
这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢?其实这是一个歪曲。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request要求数，当然也有一些技巧和建议的：
1：用一个大图片取代多个小图片。
这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在使用httpwatch工具的对多个页面进行分析后的成果表明事实并不是这样。 2006年12月15日 随笔档案 - 老赵点滴 - 博客园::
摘要: 缓存的作用自不必说,进步体系性能最主要的手法之一.ASP.NET作为一个成熟、强盛的使用程序框架,缓存相关的设计就是那本书,提出了14条开发高性能Web使用准则的书. 阅读全文 摘要: 在《在Linq to Sql中管理并发更新时的冲突(2):引发
http://www.cnblogs.com/JeffreyZhao/archive/2006/12/15.htmlHOME |
文章面板行业:需求增长提升行业价值的引用::
第14条http://www.jingke.org/wangzhanyouhua.htm from 日志摘要 北京网站优化公司可以从狭义和广义两个方面来解释,狭义一套被普遍承认的用于有效IT服务管理的实践准则.1980年以来,英国政府商务办公室(GOC,原称政府计算机与通信中心)为解决
http://blog.stockstar.com/showtb.asp?id=172117HOME |
第一张图是一个大小为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时间。
所以如果可能还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。 教你八种进步网站走访量的方式 - 网站推广 - 大河在线站长在线--::
博客推广网站:能日入上万IP,也.. 教你八种进步网站走访量的方式 网站建设运营发展中的6条中肯建议! 推选国内十个不错的PHP版的CMS体系 向站长们推选14条有效进步网页效率的准则 获得高质量导入链接的十条主要方式 分析百度收录网页减少
http://www.daheit.com/newdaheit/html/52/9/9871/1.htmHOME |
中企动力科技集团股份有限公司 天津分公司::
给网页设计师的建议-默认的就是最好的 进步网站易用性的8条建议 进步网页效率的14条准则 中小网站如何进行互动设计提升网站黏度 网站项目开发中的新工种mm内容设计师 用户特点描写对设计的影响 WEB 架构设计经验分享 如何做好小企业网
http://tianjin.ce.net.cn/newEbiz1/EbizPortalFG/portal/html/GeneralContentShow_design.html?GeneralContentShow_DocID=c373e91071c1672e8ffb373c94345b7bHOME |
但是，请注意：也不能用太大的单张图片，因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主张。
2：合并你的css文件。
图:合并与融会我以前犯了一个错误，你在看我《样式表的组织与方案》的系列文章中会知道。当时，我为了便利组织和方案样式表，将用于不同用途的样式表文件分分开来，形成不同的css文件。然后在页面中依据须要引用多个css文件。
依据“尽可能的减少HTTP的Request要求数”准则我们知道，那样的确是不合理的，因为那样会产生更多的HTTP的Request要求数。从而降低网页的效率。所以，从进步网页效率的角度上而言，我们还是应该将所有的css写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和方案样式表呢?这的确是个矛盾。我现在的做法是采取两套版本。编纂版和宣布版。编纂版仍然使用多个css文件以便于方案和组织。而等到宣布的时候，再将多个css文件合并到一个文件中去，从而达到减少HTTPRequest要求数的目的。
3：合并你的javascript文件。
原因和处理方式同上，不再赘言。
第二条：Use a Content Delivery Network 使用CDN
这个看上去好像很深邃的样子，但是只要联合中国的网络特点，这个便不难理解了。“北方服务器”、“南方服务器”、“电佩服务器”、“网通服务器”……这些词听起来是那么熟习和压抑。如果，一个北京的电信誉户试图从广东的网通服务器上打开一个类似《壁纸合集》帖子的网页时，你就能很深刻的理解。
鉴于这个不是我们开发人员力所能及的准则，所以这里也就不多言了。
第三条：Add an Expires Header 添加周期头
这个也并非开发人员来控制，而是网站服务器管理员的职责。所以，如果作为开发人员的你不理解和清楚也没有关系。还是把这个准则告知公司的网站服务器管理员。
第四条：Gzip Components 启用Gzip紧缩
这个大家应该比较熟习。Gzip的思想就是把文件先在服务器端进行紧缩，然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员，而是网站服务器管理员的工作范围，这里就不详细讲授了。如果你对此感兴趣，可以资讯贵公司的网站服务器管理人员。
第五条：Put CSS at the Top 把CSS样式放在页面的上方。
无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么阅读器解析构造的时候，就已经可以对页面进行渲染。这样就不会涌现，页面构造光秃秃的先出来，然后CSS渲染，页面又突然富丽起来，这样太具有“戏剧性”的页面阅读体验了。
第六条：Move Scripts to the Bottom 将脚本放在底部
原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。
第七条：Avoid CSS Expressions 避免使用CSS中的Expressions
图:CSS中的Expressions其实也是一种if确定首先有必要先解释一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑确定了。举个简单的例子——
这样css就可以根结一些情况分离使用不同的样式了。如果你对这个感兴趣可以到我的博客上阅读相关的文章—— 《CSS中的expression系列文章》。但是CSS中Expressions 的代价却是极高的。当你的页面须要依据确定来渲染成果的元素很多的时候，那么你的阅读器将长期处于假死状态，从而给用户带来极差的用户体验。
第八条：Make JavaScript and CSS External 将javascript和css独立成外部文件
这一条好像和第一条有点矛盾。的确，如果从HTTP的request要求数来讲的话，这样做的确是降低了效率。但是之所以这么做，是因为另外一个主要的斟酌因素——缓存。因为外部的引用文件会被阅读器缓存，所以如果javascript和css体积较大的时候，我们将它们独立成外部文件。这样当用户只要阅读一次以后，这些体积较大的js和css文件就能被缓存起来，从而极高地进步用户再次走访时的效率。
第九条：Reduce DNS Lookups 减少DNS查询
DNS域名解析体系。大家都知道我们之所以能记住那么多的网址，是因为我们记住的都是单词，而非http://202.153.125.45这样的东西，而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指点意义呢?其实有两条：
1：如果不是必需，请不要把网站放到两台服务器上。
2：网页中的图片、css文件、js文件、flash文件等等，不要太多的疏散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子，要比壁纸图片来源于不同网站的帖子显示要快得多的原因。
第十条：Minify JavaScript and CSS 减少JavaScript和CSS文件的体积
这点很好理解。在你的最终宣布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低，好在网上到处都是用于紧缩这些东西的工具。紧缩JavaScript代码体积的工具随处可见，我便不再列举了。
它供给了多种紧缩方式，可以适应多种要求。
第十一条：Avoid Redirects 避免跳转
我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢?2点——
1：“此域名已过期，5秒钟以后，页面将跳转到http://www.xxxxxx.com/index.html页面”，这句话看起来的确很熟习。但是，我就奇怪了，为什么不直接链接到那个页面呢?
2：一些链接地址请更明确的写出来。例如:将http://justinyoung.cnblogs.com/ 写成http://justinyoung.cnblogs.com (注意最后面一个“/”符号)。的确，这两个网址都能走访到我的博客，但是，事实上，它们是有差异的。http://justinyoung.cnblogs.com 的成果是个301响应，它会被重新指向http://justinyoung.cnblogs.com/ 。但是显然，中间多浪费了一些时间。
第十二条 Remove Duplicate Scripts 移除反复的脚本
图:对反复说“不!”这个准则的道理很浅显，但是真正在工作中，很多人却因为“项目时间紧”、“太累了”、“初期没有方案好”……这样的理由搪塞过去了。你，的确可以找很多的理由不去处理这些过剩反复的脚本代码，如果你的网站不须要更高的效率和后期保护的话。
也正是这点，我提醒大家一些，一些javascript框架、javascript包必然要慎用。至少要问一下：用了这个js kit 到底给我们多少便利，进步了多少工作效率。然后，再与它因为过剩的、反复的代码带来的负面成果比较一下。
第十三条：Configure ETags 配置你的实体标签
首先来讲讲什么是Etag吧。Etag(Entity tags )实体标签。这个tag和你在网上经常看到的标签云那种tag有点差异。这个Etag不是给用户用的，而是给阅读器缓存用的。Etag是服务器告知阅读器缓存，缓存中的内容是否已经产生变化的一种机制。通过Etag，阅读器就可以知道现在的缓存中的内容是不是最新的，需不须要重新从服务器上重新下载。这和“Last-Modified”的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范围。如果，你对此有兴趣，可以咨询贵公司的网站服务器管理员。
第十四条：Make Ajax Cacheable 上面的准则也适用Ajax
图:Ajax的使用要恰当现在的Ajax好像有点被神话了，好像网页只要Ajax了，那么就不存在效率问题了。其实这是一种歪曲。拙劣的使用Ajax不会让你的网页效率更高，反而会降低你的网页效率。Ajax的确是个好东西，但是请不要过头的神话它。使用Ajax的时候也要斟酌上面的那些准则。
后记：
当然，上面的这些掖掖偾供你参考的理论上的准则。具体的情况还是要具体的去看待。理论和准则只是用来指点现实工作的，却是万万不可死记硬套。
前一篇文章:谷歌输入法进步的神速 网民的胜利
后一篇文章:TOM在线被私有化或押后讨论
| 
首页