`

怎么样提高网站的效率

阅读更多
网站最基本的东西是什么?

网站最基本的东西是什么?
——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度!
内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭; UE设计的再人性化的网站,如果用户连看都看不到也是空谈。
所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢?Steve Souders(Steve Souders的资料http://www.oreillynet.com/pub/au/2951)提出的提高网页效率的14条准则,而这些准则也将是我们下篇中介绍到的YSlow工具的理论基础:

    * Make Fewer HTTP Requests
    * Use a Content Delivery Network
    * Add an Expires Header
    * Gzip Components
    * 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 Requests 尽可能的减少HTTP的Request请求数。

80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。
这里好像有个矛盾,就是如果我减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解。我们只是说尽量的减少,并没有说完全不能使用。减少这些文件的Request请求数,当然也有一些技巧和建议的:
1:用一个大图片代替多个小图片。
这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。
第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。
第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。
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压缩
八条: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代码体积的工具随处可见,我便不再列举了,这里我只提供一个用于压缩css代码体积的在线工具网站——http://www.cssdrive.com/index.php/main/csscompressor
它提供了多种压缩方式,可以适应多种要求。
第十一条: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的确是个好东西,但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。
后记:

当然,上面的这些也只是供你参考的理论上的准则。具体的情况还是要具体的去对待。理论和准则只是用来指导现实工作的,却是万万不可死记硬套。
这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩,然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员,而是网站服务器管理员的工作范畴,这里就不详细讲解了。如果你对此感兴趣,可以资讯贵公司的网站服务器管理人员。
第五条:Put CSS at the Top 把CSS样式放在页面的上方。

无论是HTML还是XHTML还是CSS都是解释型的语言,而非编译型的。所以CSS到上方的话,那么浏览器解析结构的时候,就已经可以对页面进行渲染。这样就不会出现,页面结构光秃秃的先出来,然后CSS渲染,页面又突然华丽起来,这样太具有“戏剧性”的页面浏览体验了。
第六条:Move Scripts to the Bottom 将脚本放在底部

原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应该放在页面的底部。
第七条:Avoid CSS Expressions 避免使用CSS中的Expressions

if语句,expression,判断语句示意图
图:CSS中的Expressions其实也是一种if判断
首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——
<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
</style>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly="true">
这样css就可以根结一些情况分别使用不同的样式了。如果你对这个感兴趣可以到我的博客上阅读相关的文章—— 《CSS中的expression系列文章》。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候,那么你的浏览器将长期处于假死状态,从而给用户带来极差的用户体验。


  
分享到:
评论

相关推荐

    程序员如何提高工作效率

    程序员如何提高工作效率

    论提高工作效率的重要性与方法.doc

    提高工作效率是现代企业管理和个人职业发展中至关重要的议题。工作效率不仅关乎个人的工作能力,更直接影响企业的运营效率和利润水平。在当今竞争激烈的市场环境下,企业必须通过提升员工的工作效率,实现资源的最佳...

    如何提高课堂效率课题研究.pdf

    如何提高课堂效率课题研究.pdf

    C#WinForm利用GDI+的双缓冲技术来提高绘图效率.pdf

    C# WinForm 利用 GDI+ 的双缓冲技术来提高绘图效率 在 .NET 时代,Windows 的绘图技术从 GDI 升级到了 GDI+,GDI+ 提供了一套统一的绘图编程模型,极大的提高了 Windows 绘图编程的方便性。然而,在实际开发中,...

    30个提高数据库查询效率方法总结笔记

    15. 索引并不是越多越好,索引固然可以提高相应的 select 的效率,但同时也降低了insert 及 update 的效率。 知识点:索引的数量需要合理地设计,避免索引过多或过少,以确保查询效率和插入、更新效率的平衡。

    前后端开发团队提高效率规范流程

    为了更好的提高技术部的工作效率,保证开发的有效性和合理性。前后端分离后,前后端开发团队提高效率,制定内部开发流程规范

    Oracle提高数据库效率

    此文档是Oracle提高数据库效率的总结,能够帮助你在使用Oracle编程时带来的效率问题!

    提高编程的效率的方法

    5. **优化和调试技巧**:理解性能分析和调试工具是提高效率的关键。学会使用如Python的`cProfile`或JavaScript的`console.time()`来定位性能瓶颈。同时,使用断点、日志和单元测试来快速找到并修复bug,可以减少无效...

    提高LED效率 不走寻常路的8个方法

    此外,选择合适的开关器件也是提高效率的关键。我们需要根据客户的具体需求,平衡成本和性能,做出明智的决策。对于追求高效率的应用,使用COOL MOS场效应晶体管和低正向电压二极管是较为理想的选择。 输入EMI...

    刘建老师《提高工作效率的五项修炼》培训课程大纲.doc

    因此,培训首先帮助学员树立正确的效率观念,明确提高效率的目标和意义。 课程的具体内容设计体现了刘建老师深厚的行业经验与独到的教育理念。在教学形式上,多样化的方法确保了学员能全方位吸收课程精髓。通过讲授...

    提高nutch运行效率的原理与方法

    在提供的文件中,"提高nutch运行效率的优化方法1.png"和"提高nutch运行效率的优化方法2.png"可能是展示具体优化步骤的图表,而"提高nutch运行效率的原理.png"则可能解释了Nutch运行的基本原理,这些图像可以帮助读者...

    批处理在提高Windows管理效率中的神奇应用

    批处理,很早就开始用了,N年了。看看其在提高Windows管理效率中的神奇应用

    11个提高开关电源效率的小技巧.docx

    2. **选择合适的变压器**:如果条件允许,优先选择PQ RM型变压器,这种变压器结构紧凑,磁通分布均匀,有助于提高效率。无挡墙设计在满足安全标准的前提下,也能减小磁损,提升效率。 3. **电解电容的选择**:输入...

    如何提高ABAP程序运行效率.pdf

    例如,在SELECT语句中,使用SELECT INTO TABLE语句可以提高效率,而不是使用SELECT—ENDSELECT语句。在循环中,尽量避免使用SELECT语句,因为每次循环都要SELECT一下,SELECT本身就是循环,如此循环嵌套循环,时间...

    如何提高机械效率.pptx

    在现代工程技术中,提高机械效率是一个永恒不变的主题。机械效率不仅关系到机械设备运行的经济性,也是衡量科技进步的重要指标之一。要深入探讨如何提高机械效率,首先必须对功率这一基本概念有充分的理解。 功率,...

    智能制造环境下生产现场提高生产效率的途径.pdf

    "智能制造环境下生产现场提高生产效率的途径" 在智能制造环境下,生产现场的生产效率是制约企业竞争力的关键要素。为了提高生产效率,企业需要从多方面入手,包括智能控制技术的应用、数字化车间的建设、智能化工厂...

    程序员如何提高工作效率.docx

    在处理日常开发任务时,使用自己熟悉的工具可以显著提高效率。例如,Evernote等笔记软件可以用于记录开发中的灵感和需要回顾的信息,而一个得心应手的集成开发环境(IDE)可以减少编码过程中不必要的切换和搜索时间...

    智能机器人提高仓库效率

    参观现代化的仓库,您会发现机器人正在迅速地将包裹、货架 和整个机架从一处搬运至另一...仓库运营正在向自动化转变,以便更有效 地利用现有的地面空间及提高整体运营效率 — 辅以机器视觉,生产 力甚至正在进一步提高

    《如何提高机械效率》.ppt

    3. 增加机械提升的物重:在保证机械结构安全的前提下,增加负载重量可以使有用功相对总功的比例增大,从而提高效率。 在实际应用中,我们可以通过实验来测定机械效率,比如使用滑轮组提升重物。实验需要测量的物理...

    LISP程序,提高效率的好工具

    LISP程序,提高效率的好工具; LISP程序,提高效率的好工具

Global site tag (gtag.js) - Google Analytics