开发出高性能的网站第一部分:20个客户端代码优化技巧
日期:2007年10月31日 作者: 查看:[大字体 中字体 小字体]-
这个分为三部分的文章概述了一个直观的、省时省力的方法来提升访问网站的速度,这是基于网站性能有关的两个简单法则:
- 尽可能的减少数据的传输量
- 尽可能的减少数据的传输频率
若使用得当,此两条法则会:
- 提高网页的加载速度
- 降低服务器使用的资源
- 提高网络带宽利用率
使用这些技巧来开发网站,不仅能够提高用户对一个网站或者是基于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. 它几乎实现了下面将要提到的所有技巧,而且它也反映出在“真实”世界里代码优化任务的商业价值。接下来,我们来谈谈这些技巧! - 尽可能的减少数据的传输量
- [1] [2] 下一页
-
- 开发出高性能的网站第一部分:20个客户端代码优化技巧 相关文章:
- ·QQ空间开场代码使用说明
- ·QQ空间开场动画免费拿的方法
- ·为什么iexplore.exe在打开网页时CPU使用会100%?
- ·开机提示reboot and select proper boot device or insert boot Media in selected boot device的解决
- ·为什么IE浏览器打不开啊?
- ·开满雪花的圣诞节贺卡新年贺卡制作
- ·各种文件后缀名与打开方式大全
- ·PKI技术及应用开发指南
- ·开启瑞星防火墙不能上网问题解决
- ·恢复exe文件打开方式,所有exe文件无法打开
- 开发出高性能的网站第一部分:20个客户端代码优化技巧 相关软件
- ·火影忍者-忍术全开
- ·开屏桌面画报 V3.6.1 正式版
- ·《圣斗士·冥王篇》开场音乐完美版
- ·开心斗地主 V7.7 Build 756
- ·《暗黑破坏神2毁灭之王》v1.11地图全开工具EasyMap_v11
- ·《大航海时代4威力加强版》地图全开通关存档
- ·智能开关机 V3.20
- ·电脑开关机画面修改程序 V2.40
- ·XP开机画面更改 V1.0
- ·开膛手杰克
- 特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作
- 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转
- 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源:http://www.hackhome.com
上一篇:网页菜单详解之初步实现
下一篇:定时自动关闭的窗口
精品推荐
热点TOP10
- ·菜鸟学用DreamWeaver做ASP
- ·下拉菜单全攻略-用Dreamweaver制作下拉菜单
- ·Dreamweaver动态网页实例:验证用户注册
- ·Dreamweaver开发ASP实例视频教程(1)准备
- ·DW MX实例:实现电子商务购物车
- ·Dreamweaver架设网站终极教程
- ·Dreamwaver 常见问答解答
- ·入门:用Dreamweaver简单描述制作网页的基本步骤
- ·Dreamweaver+ASP制作动态二级菜单
- ·DW MX 设计360度全景滚动效果图
- ·DW网页设计100例56:制作滚动布告栏
- ·视频教程:Dreamweaver创建网站相册1
- ·下拉菜单全攻略之Dreamweaver篇
- ·DW 技巧简单几问几答
- ·DW网页设计100例84:给产品下订单
- ·DW MX实例:客房预订业务
- ·用DREAMWAVER3.0制作网页的实例
- ·学习参考:用Dreamweaver+ASP实现网页分页
- ·DW做ASP程序时关于数据库的几个常见问题
- ·层的应用及其定位(绝对定位和相对定位)
