《如何提高网页的效率（上篇）——提高网页效率的14条准则》由会员分享，可在线阅读，更多相关《如何提高网页的效率（上篇）——提高网页效率的14条准则（8页珍藏版）》请在金锄头文库上搜索。
1、网站最基本的东西是什么？网站最基本的东西是什么？内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢？Steve Souders(Steve Souders的资料http:/ Make Fewer HTTP Requests Use a Content Delivery Network Add an Expires Header Gzip Components
2、 Put CSS at the Top Move Scripts to the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript Avoid Redirects Remove Duplicate Scripts Configure ETags Make Ajax Cacheable 这里我们将逐一的讲解这些准则,对其中开发者密切相关的准则我将详细讲解。小弟个人技术实在有限，错误和无知在所难免，还请高人指点。第一条：Make Fewer HTTP R
3、equests 尽可能的减少HTTP的Request请求数。80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢？其实这是一个误解。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request请求数，当然也有一些技巧和建议的：1：用一个大图片代替多个小图片。这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片
4、的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。一个大小为40528bytes的337*191px的大图片的分析结果（点击图片可以查看完整大图片）一个大小为13883bytes的280*90px的小图片的分析结果（点击图片可以查看完整大图片）第一张大图片花费时间为：Blocked：13.034sSend：0.001sWait：0.163sReceive：4.596sTTFB：0.164sNet
5、Work：4.760s功耗时：17.795s真正用于传输大文件花费的时间为Reveive时间，即4.596s，多数的时间是用来检索缓存和确定链接是否有效的Blocked时间，供花费13.034s，占总时间的73.2%。第二张小图片花费时间为：Blocked：16.274sSend：小于0.001sWait：0.117sReceive：0.397sTTFB：0.118sNetWork：0.516s功耗时：16.790s真正用于传输文件的花费时间是Reveive时间，即0.397s，这的确要比刚才大文件的4.596s小很多。但是他的Blocked时间为16.274s，占总时间的97%。如果这些数据
6、还不够说服你的话，让我们看看下面这张图。这里列出了某个网页中所有图片中的花费时间示意图。当然，里面的图片有大有小，规格不一。大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。其中藏青色的为传输文件花费的Reveive时间，而前面白色的为检索缓存和确认链接是否有效的Blocked时间。铁一样的事实告诉我们： 大文件和小文件下载所需时间的确是不同的，差异的绝对值不大。而且下载所需时间占总耗费时间比例很小。 大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。无论文件大小，这个时间的花费大致是相同的。而且所占总耗费时间的比例是极大的。 一个100k的大图
7、片总耗费时间绝对大于4个25k的小图片的总耗费时间。而且主要差别就是4个小图片的Blocked时间绝对大于1个大图片的Blocked时间。 所以如果可能还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。但是，请注意：也不能用太大的单张图片，因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主意。2：合并你的css文件。图:合并与融合我以前犯了一个错误，你在看我样式表的组织与规划的系列文章中会知道。当时，我为了方便组织和规划样式表，将用于不同用途的样式表文件分离开来，形成不同的css文件。然后在页面中根据需要引用多个css文件。根
8、据“尽可能的减少HTTP的Request请求数”准则我们知道，那样的确是不合理的，因为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以，从提高网页效率的角度上而言，我们还是应该将所有的css写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢？这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个css文件以便于规划和组织。而等到发布的时候，再将多个css文件合并到一个文件中去，从而达到减少HTTPRequest请求数的目的。3：合并你的javascript文件。原因和处理方法同上，不再赘言。第二条：Use a Conten
9、t Delivery Network 使用CDN这个看上去好像很深奥的样子，但是只要结合中国的网络特色，这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务器”这些词听起来是那么熟悉和压抑。如果，一个北京的电信用户试图从广东的网通服务器上打开一个类似壁纸合集帖子的网页时，你就能很深刻的理解。鉴于这个不是我们开发人员力所能及的准则，所以这里也就不多言了。 图:这个图也算有点中国特色了第三条：Add an Expires Header 添加周期头这个也并非开发人员来控制，而是网站服务器管理员的职责。所以，如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网
10、站服务器管理员。第四条：Gzip Components 启用Gzip压缩这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员，而是网站服务器管理员的工作范畴，这里就不详细讲解了。如果你对此感兴趣，可以资讯贵公司的网站服务器管理人员。第五条：Put CSS at the Top 把CSS样式放在页面的上方。无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突
11、然华丽起来，这样太具有“戏剧性”的页面浏览体验了。第六条：Move Scripts to the Bottom 将脚本放在底部原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。第七条：Avoid CSS Expressions 避免使用CSS中的Expressions图:CSS中的Expressions其实也是一种if判断首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的ifelse语句。这样在CSS中就可以进行简单的逻辑判断了。举
12、个简单的例子inputbackground-color:expression(this.readOnly&this.readOnly=true)?#0000ff:#ff0000)这样css就可以根结一些情况分别使用不同的样式了。如果你对这个感兴趣可以到我的博客上阅读相关的文章 CSS中的expression系列文章。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候，那么你的浏览器将长期处于假死状态，从而给用户带来极差的用户体验。第八条：Make JavaScript and CSS External 将javascript和css独立成外部
13、文件这一条好像和第一条有点矛盾。的确，如果从HTTP的request请求数来讲的话，这样做的确是降低了效率。但是之所以这么做，是因为另外一个重要的考虑因素缓存。因为外部的引用文件会被浏览器缓存，所以如果javascript和css体积较大的时候，我们将它们独立成外部文件。这样当用户只要浏览一次以后，这些体积较大的js和css文件就能被缓存起来，从而极高地提高用户再次访问时的效率。 第九条：Reduce DNS Lookups 减少DNS查询DNS域名解析系统。大家都知道我们之所以能记住那么多的网址，是因为我们记住的都是单词，而非http:/202.153.125.45这样的东西，而帮我们把那些
14、单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢？其实有两条：1：如果不是必须，请不要把网站放到两台服务器上。2：网页中的图片、css文件、js文件、flash文件等等，不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子，要比壁纸图片来源于不同网站的帖子显示要快得多的原因。第十条：Minify JavaScript and CSS 减少JavaScript和CSS文件的体积这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低，好在网上到处都是用于压缩这些东西的工具。压缩JavaScript代码体积的工具随处可见，我便不再列举了，这里我只提供一个用于压缩css代码体积的在线工具网站http:/ 第十一条：Avoid Redirects 避免跳转我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢？2点1：“此域名已过期，5秒钟以后，页面将跳转到http:/ 写成h
