会员:密码:注册会员忘记密码?网站帮助我浏览过的资料
设为首页加入收藏夹加入QQ书签论坛
首页每天学英语背单词语法词汇口语阅读写作翻译寓言影视名著绕口令四六级笑话外语动态诗歌散文

您所在的位置: 大耳朵首页 > 文章资料 > 个人专栏 > 站长日记 > 正文

站内搜索:

大耳朵在线背单词,测你词汇量:
rudely/['ru:dli]/ad.粗暴地
开发出高性能的网站,三部分
本文属阅读资料,没有听力

这个分为三部分的文章概述了一个直观的、省时省力的方法来提升访问网站的速度,这是基于网站性能有关的两个简单法则:



  • 尽可能的减少数据的传输量
  • 尽可能的减少数据的传输频率

若使用得当,此两条法则会:



  • 提高网页的加载速度
  • 降低服务器使用的资源
  • 提高网络带宽利用率

使用这些技巧来开发网站,不仅能够提高用户对一个网站或者是基于web的一个应用的满意度,更可以节约网站数据传输的成本。这篇文章所讲述的技术细节可帮助我们写出很好很实用的代码,从更广泛的角度来讲,这也将会给网站打造出良好的可用性基础。


第一部分 ? 20个客户端代码优化技巧


为自己写代码,为使用而编译


任何一个程序员都很清楚地知道,之所以不把自己所使用的代码作为最终的代码来交付是有它合理的原因的。写代码时最好要尽可能多写些注释,通过编排格式在最大程度上提高代码的可阅读性,同时避免过分的简洁不让晦涩的代码给日后的维护带来困难。之后,我们再使用编译器等把源代码转化成其他格式,一方面达到最优执行,另一方面可以防止反编译,以免造成源代码被剽窃。上述的这种模式其实也适用于网站的开发。具体做法是:先制作好网站和网页的源代码,再利用一些简单的技术(比如:减少空白区域,进行图片和脚本的优化,文件重命名等)把源代码减肥然后你就可以将准备好的网站和网页交付使用了。


希望这种概念对于你来说并不突兀,因为起码你很有可能正是在您站点的副本上操作,而不是直接在正在运行的站点上作修改更新。如果你不是这样做的,那么请马上停止阅读本文,赶紧去给你的站点做个副本吧!无论您的网站的内容是静态的手册还是非常复杂的使用内容管理系统来驱动(CMS-driven)的应用,这都是唯一正确的开发网站的方式。你要是现在还不相信的话,那么我敢说很快的等到你损毁了网站的一些文件却发现难以恢复的时候你就信了。


在建造网站时,您可能会把注意力放在导致下载速度降低的最大元凶—图片、二进制文件(如Flash等)上。减少GIF图片文件的颜色数、压缩JPEG图片文件的大小、优化SWF文件固然颇有裨益,其他大有帮助的方法也不能小觑。要记得网站性能法则中的第一条,我们得不断的努力以尽可能少地传输数据,不论它是markup文件、图片还是脚本。把精力放在减少(X)HTML、CSS和JavaScript文件的字节数上似乎是瞎忙乎,可是,这可能恰恰就是最应该注意的地方。


在一个典型的网页加载过程中,(X)HTML文件是最先被浏览器读到的。既然这个文件决定了其他文件的关系,我们可以管这个文件叫主文件(host document)。浏览器一旦接收到这个主文件,便开始解析各种markup;一般在解析的同时,也会触发一系列对相关对象的请求,例如外部脚本、关联的样式表单、图片、或嵌入式Flash等等。这些CSS和JavaScript文件有可能继续触发一些对相关图片或脚本等的请求。这些对相关文件的请求排成队列的速度越快,它们到达浏览器的速度也就越快,从而越早的开始显示出页面来。了解了主文件的重要性,我们便知道把它尽快地传给浏览器并加以解析的重要性,因为尽管主文件本身相对来说整个传输量来说只是一小部分,它却能够严重地阻碍网页的加载速度。要明白,用户才不在乎你使用的字节数的多少,用户在乎的是时间!


那么您具体需要怎么做才能作到最优传输的万全准备呢?一个基本的方法是减少空白区域,精简CSS和JavaScript,更改文件名,以及对要提交的代码也采用前述相同的策略,使之越简洁越好(Google 就是一个例子). 这些目前大家都熟知的通用技巧,在很多网站和一些书中比如Andy King的 《Speed up Your Site: Website Optimisation 》都能找到。本文则列出我们认为最有效的优化markup和代码的二十大技巧。当然,您可以手动来做部分优化,或者使用网页编辑器及工具来完成一些优化,当然还可以开发出您自己的精简工具。我们要向你介绍一个由Port80软件公司开发的工具w3compiler. 它几乎实现了下面将要提到的所有技巧,而且它也反映出在“真实”世界里代码优化任务的商业价值。接下来,我们来谈谈这些技巧!


Markup优化


典型的markup要么是手工编辑出来的,在非常紧凑,注重标准的格式基础上加入注释和空白区域(white space)的文件;要么是编辑器生成的,非常之肥胖,带有过分的格式编排及编辑器特有的通常用来控制结构的注释,甚至还会有不少重复的和没有用修饰或者代码。这两者都不是最优传输的情况。下列技巧既安全又容易,是减小文件尺寸的好方法:


1、尽可能的除去空白区域


一般而言,空白区域字符(空格、制表符、换行符等)都可以安全删除,但要避免修改pre, textarea, 及受CSS属性中white-space影响的标签。


2、除去注释


除了在客户端给IE和doctype声明的条件注释外,几乎所有的注释都可以安全去除掉。


3、使用最短格式的颜色表示


使用颜色时,不要一股脑的使用十六进制或全颜色名称(full color name),要尽可能根据实际情况使用最短格式的颜色表示。比如,一个为#ff0000 的颜色属性可以直接用red</code来说明,而lightgoldenrodyellow可以换成 #FAFAD2#FAFAD2

4、 使用最短格式的字符表示


和最短颜色表示一样,一些名称可以用最短字符来表示,我们可以用较短的数字来代替某些长长的字母。比如:&Egrave; 可以变成È。或者,偶尔这个方法反过来也行,比如:ð 如果变成&eth则可以省一个字节。不过,这个方法不太安全,而且成效有限。


5、 除去无用的标签


有些‘垃圾’markup,比如使用了多次的重复标签或者某些编辑器里用作广告的meta 标签,都可以安全地被删除。


CSS优化


CSS也有一套成熟而又简单的优化方法。实际上,时下大多数的CSS都较 (X)HTML更容易压缩。下面所列的技巧除了最后一条都是安全的。最后一条涉及到客户端的网页技术,可能会变得比较复杂。


6、除去CSS中的空白区域


相比起(X)HTML来,CSS对于空白区域没有那么敏感,所以除去空白区域便可以极大地减少CSS文件和style样式表区域的大小。


7、 除去CSS注释


如同除去markup代码中的注释一样,由于CSS中的注释对普通的最终用户来说并没有什么实用价值,所以也应该被除去。不过,如果考虑到较低级的浏览器,则在CSS中的style标签中的屏蔽注释信息不可以被除去。


8. 使用最短格式来表示颜色值


和HTML一样,CSS颜色也可以用词语或十六进制格式表示。注意,在CSS中这样做的效果会稍微明显一些。主要是因为CSS中支持3位的十六进制色值,例如对白色可用#fff 来表示。


9、对CSS的规则进行合并、减少或删除


CSS中的诸如字体大小、字体重量等规则往往可以使用一种单属性字体的速记注释方式来表示。使用得当的话,这个技巧可以让您把如下的规则:

p {font-size: 36pt;
font-family: Arial;
line-height: 48pt;
font-weight: bold;}

改写成下面简短的形式:

p{font:bold 36pt/48pt Arial;}

如果继承方法使用得当的话,您还会发现在样式表单中的一些规则可以显著的减少或干脆删掉。到目前为止尚没有能自动移除规则的工具,所以只能通过手工调整CSS向导(Wizard)来进行这些工作。不过即将推出的w2compiler 2.0会有这个功能。


10、对类和ID值进行重命名


在CSS优化中最危险的动作可能是重命名类或ID值了。看看如下规则:

.superSpecial {color: red; font-size: 36pt;}

可将其更名为sS。而对ID值一样可以遵循这样的原则,例如对于:

#firstParagraph {background-color: yellow;}

则可将原来的 ”#firstParagraph” 重命名为 ”#fp”,并在整个文档中重复这一动作 。诚然,这样做可能会涉及到“标识-样式-脚本”互相依赖的问题:如果一个“tag”有一个ID值,而这个值又可能不但用于样式表,还可能用于脚本参考,甚至可能是一个链接目标地址。在这种情况下,您一旦修改了这个值,您就必须得保证对所有相关的脚本和链接参考都进行了相应的修改,包括其他文件中的这个值,所以千万要小心细致。


改变类的值相对改变ID值来说,危险性小一些。因为经验告诉我们,比较起ID值来说,大多数JavaScript程序员都不太经常处理类的值。然而,改变类的名称来缩减CSS的尺寸也面临着和改变ID名称同样的问题,所以再次强调,要小心谨慎。


请注意:最好不要更改名称属性,尤其是表单区域中的名称属性。因为这些数值也会被服务器端程序所操作。虽然不是不可能,但对多数的网站来讲,要计算好这些相互依赖关系是困难的。

Google  热门:英语培训学校英语口语英语翻译英语学习
已有1位对此文章感兴趣的网友发表了看法
非常好 很好 一般 不好 很差
* 如果因您不良评论或重复评论导致评论被删,您将会被扣掉一定数额的金币。
* 您必须遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他有关法律法规。
* 承担一切因您的行为而直接或间接导致的民事或刑事法律责任。
* 您发表的文章仅代表个人观点,与大耳朵网站无关。
* 大耳朵评论管理人员有权保留或删除其管辖评论中的任意内容。
* 您在大耳朵网评论系统发表的作品,大耳朵网有权在网站内转载或引用。
* 参与本评论即表明您已经阅读并接受上述条款。
站长日记
高瞻远瞩
放眼全球
Google
热门:英语培训学校 英语口语 英语翻译 英语学习
图片新闻更多
推荐资源
经典学习方法更多>>
文章资料目录导航
经典名著 四六级考试 IELTS雅思 听说读写能力 在线语法词典 行业英语一 行业英语二 生活英语 轻松英语 专题英语
双城记 宝岛
战争与和平
悲惨的世界
傲慢与偏见
读圣经学英语
八十天环游地球
考试动态
学习资料
历年真题
模拟试题
心得技巧
学习方法经验
考试动态
考试介绍
考试辅导
历年真题
模拟试题
心得技巧
英语听力
英语口语
英语阅读
英语写作
英语翻译
英语词汇
名词 冠词数词
动词 动名词
代词 形容词
情态 独立主格
倒装 主谓一致
连词 虚拟语气
职场英语
外贸英语
商务英语
银行英语
文化英语
体育英语
房地产英语
会计英语
金融证券
医疗英语
计算机英语
公务员英语
实用英语
电话英语
旅游英语
购物英语
市民英语
宾馆英语
好文共赏
英语文库
名人演说
小说寓言
谚语名言绕口令
笑话幽默 诗歌
笨霖笔记
CNN英语魏
实用九句
双语阅读
发音讲解
分类词汇
updated Sun Oct 12, 2008
免责声明:本站只提供资源播放平台,如果站内部分资源侵犯您的权益,请您告知,站长会立即处理。
Copyright © 2003-2008 大耳朵英语  鲁ICP备05010808号