📄 如何提高网页的效率(上篇).htm
字号:
target=_blank><IMG alt=合并,合并示意图
src="如何提高网页的效率(上篇).files/hebin.jpg"></A><BR>图:合并与融合</DIV>我以前犯了一个错误，你在看我《样式表的组织与规划》的系列文章中会知道。当时，我为了方便组织和规划样式表，将用于不同用途的样式表文件分离开来，形成不同的css文件。然后在页面中根据需要引用多个css文件。根据“尽可能的减少HTTP的Request请求数”准则我们知道，那样的确是不合理的，因为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以，从提高网页效率的角度上而言，我们还是应该将所有的css写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢？这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个css文件以便于规划和组织。而等到发布的时候，再将多个css文件合并到一个文件中去，从而达到减少HTTPRequest请求数的目的。<BR>
<H5>3：合并你的javascript文件。</H5>原因和处理方法同上，不再赘言。<BR>
<P> </P>
<H4>第二条：Use a Content Delivery Network 使用CDN</H4>
<P>这个看上去好像很深奥的样子，但是只要结合中国的网络特色，这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务器”……这些词听起来是那么熟悉和压抑。如果，一个北京的电信用户试图从广东的网通服务器上打开一个类似《壁纸合集》帖子的网页时，你就能很深刻的理解。<BR>鉴于这个不是我们开发人员力所能及的准则，所以这里也就不多言了。
<DIV class=floatMPic><A title=web标准设计 href="http://justinyoung.cnblogs.com/"
target=_blank><IMG height=187 alt=CDN,南北服务器,电信网通,宽带互联
src="如何提高网页的效率(上篇).files/CDN.jpg" width=314></A><BR>图:这个图也算有点中国特色了</DIV>
<P> </P>
<H4>第三条：Add an Expires Header 添加周期头</H4>
<P>这个也并非开发人员来控制，而是网站服务器管理员的职责。所以，如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网站服务器管理员。</P>
<H4>第四条：Gzip Components 启用Gzip压缩</H4>
<P>这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员，而是网站服务器管理员的工作范畴，这里就不详细讲解了。如果你对此感兴趣，可以资讯贵公司的网站服务器管理人员。</P>
<H4>第五条：Put CSS at the Top 把CSS样式放在页面的上方。</H4>
<P>无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了。</P>
<H4>第六条：Move Scripts to the Bottom 将脚本放在底部</H4>
<P>原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。</P>
<H4>第七条：Avoid CSS Expressions 避免使用CSS中的Expressions</H4>
<P></P>
<DIV class=floatRPic><A title=web标准设计 href="http://justinyoung.cnblogs.com/"
target=_blank><IMG height=231 alt=if语句,expression,判断语句示意图
src="如何提高网页的效率(上篇).files/Expressions.jpg"
width=246></A><BR>图:CSS中的Expressions其实也是一种if判断</DIV>首先有必要先说明一下CSS
Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——<BR>
<DIV
style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 410px; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><SPAN
style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">style</SPAN><SPAN
style="COLOR: #0000ff">></SPAN><SPAN
style="COLOR: #800000; BACKGROUND-COLOR: #f5f5f5"><BR>input</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">{</SPAN><SPAN
style="COLOR: #ff0000; BACKGROUND-COLOR: #f5f5f5">background-color</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">:</SPAN><SPAN
style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">}</SPAN><SPAN
style="COLOR: #800000; BACKGROUND-COLOR: #f5f5f5"><BR></SPAN><SPAN
style="COLOR: #0000ff"></</SPAN><SPAN
style="COLOR: #800000">style</SPAN><SPAN style="COLOR: #0000ff">></SPAN><SPAN
style="COLOR: #000000"><BR></SPAN><SPAN style="COLOR: #0000ff"><</SPAN><SPAN
style="COLOR: #800000">INPUT </SPAN><SPAN
style="COLOR: #ff0000">TYPE</SPAN><SPAN
style="COLOR: #0000ff">="text"</SPAN><SPAN
style="COLOR: #ff0000"> NAME</SPAN><SPAN
style="COLOR: #0000ff">=""</SPAN><SPAN style="COLOR: #0000ff">></SPAN><SPAN
style="COLOR: #000000"><BR></SPAN><SPAN style="COLOR: #0000ff"><</SPAN><SPAN
style="COLOR: #800000">INPUT </SPAN><SPAN
style="COLOR: #ff0000">TYPE</SPAN><SPAN
style="COLOR: #0000ff">="text"</SPAN><SPAN
style="COLOR: #ff0000"> NAME</SPAN><SPAN
style="COLOR: #0000ff">=""</SPAN><SPAN
style="COLOR: #ff0000"> readonly</SPAN><SPAN
style="COLOR: #0000ff">="true"</SPAN><SPAN
style="COLOR: #0000ff">></SPAN></DIV>这样css就可以根结一些情况分别使用不同的样式了。如果你对这个感兴趣可以到我的博客上阅读相关的文章——
<A title=CSS中的expression
href="http://www.google.cn/search?q=expression&ie=UTF-8&oe=GB2312&hl=zh-CN&domains=http://www.cnblogs.com/JustinYoung/&sitesearch=http://www.cnblogs.com/JustinYoung/"
target=_blank>《CSS中的expression系列文章》</A>。但是CSS中Expressions
的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候，那么你的浏览器将长期处于假死状态，从而给用户带来极差的用户体验。<BR>
<P> </P>
<H4>第八条：Make JavaScript and CSS External 将javascript和css独立成外部文件</H4>
<P>这一条好像和第一条有点矛盾。的确，如果从HTTP的request请求数来讲的话，这样做的确是降低了效率。但是之所以这么做，是因为另外一个重要的考虑因素——缓存。因为外部的引用文件会被浏览器缓存，所以如果javascript和css体积较大的时候，我们将它们独立成外部文件。这样当用户只要浏览一次以后，这些体积较大的js和css文件就能被缓存起来，从而极高地提高用户再次访问时的效率。
</P>
<H4>第九条：Reduce DNS Lookups 减少DNS查询</H4>
<P>DNS域名解析系统。大家都知道我们之所以能记住那么多的网址，是因为我们记住的都是单词，而非http://202.153.125.45这样的东西，而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢？其实有两条：<BR>1：如果不是必须，请不要把网站放到两台服务器上。<BR>2：网页中的图片、css文件、js文件、flash文件等等，不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子，要比壁纸图片来源于不同网站的帖子显示要快得多的原因。</P>
<H4>第十条：Minify JavaScript and CSS 减少JavaScript和CSS文件的体积</H4>
<P>这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低，好在网上到处都是用于压缩这些东西的工具。压缩JavaScript代码体积的工具随处可见，我便不再列举了，这里我只提供一个用于压缩css代码体积的在线工具网站——<A
href="http://www.cssdrive.com/index.php/main/csscompressor"
target=_blank>http://www.cssdrive.com/index.php/main/csscompressor</A><BR>它提供了多种压缩方式，可以适应多种要求。
</P>
<H4>第十一条：Avoid Redirects 避免跳转</H4>
<P>我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢？2点——<BR>1：“此域名已过期，5秒钟以后，页面将跳转到http://www.xxxxxx.com/index.html页面”，这句话看起来的确很熟悉。但是，我就奇怪了，为什么不直接链接到那个页面呢？<BR>2：一些链接地址请更明确的写出来。例如:将<A
href="http://justinyoung.cnblogs.com/"
target=_blank>http://justinyoung.cnblogs.com/</A> 写成<A
href="http://justinyoung.cnblogs.com/"
target=_blank>http://justinyoung.cnblogs.com/</A>
（注意最后面一个“/”符号）。的确，这两个网址都能访问到我的博客，但是，事实上，它们是有区别的。<A
href="http://justinyoung.cnblogs.com/"
target=_blank>http://justinyoung.cnblogs.com/</A> 的结果是个301响应，它会被重新指向<A
href="http://justinyoung.cnblogs.com/"
target=_blank>http://justinyoung.cnblogs.com/</A> 。但是显然，中间多浪费了一些时间。</P>
<H4>第十二条 Remove Duplicate Scripts 移除重复的脚本</H4>
<DIV class=floatLPic><A title=web标准设计 href="http://justinyoung.cnblogs.com/"
target=_blank><IMG height=90 alt=对重复说不 src="如何提高网页的效率(上篇).files/noRepeat.jpg"
width=120></A><BR>图:对重复说“不！”</DIV>
<P>这个准则的道理很浅显，但是真正在工作中，很多人却因为“项目时间紧”、“太累了”、“初期没有规划好”……这样的理由搪塞过去了。你，的确可以找很多的理由不去处理这些多余重复的脚本代码，如果你的网站不需要更高的效率和后期维护的话。<BR>也正是这点，我提醒大家一些，一些javascript框架、javascript包一定要慎用。至少要问一下：用了这个js
kit 到底给我们多少方便，提高了多少工作效率。然后，再与它因为多余的、重复的代码带来的负面效果比较一下。</P>
<H4>第十三条：Configure ETags 配置你的实体标签</H4>
<P>首先来讲讲什么是Etag吧。Etag（Entity tags
）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这和“Last-Modified”的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范畴。如果，你对此有兴趣，可以咨询贵公司的网站服务器管理员。</P>
<H4>第十四条：Make Ajax Cacheable 上面的准则也适用Ajax</H4>
<DIV class=floatRPic><A title=web标准设计 href="http://justinyoung.cnblogs.com/"
target=_blank><IMG height=78 alt=Ajax src="如何提高网页的效率(上篇).files/ajax.jpg"
width=148></A><BR>图:Ajax的使用要恰当</DIV>
<P>现在的Ajax好像有点被神话了，好像网页只要Ajax了，那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高，反而会降低你的网页效率。Ajax的确是个好东西，但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。</P>
<H4>后记：</H4>
<P>当然，上面的这些也只是供你参考的理论上的准则。具体的情况还是要具体的去对待。理论和准则只是用来指导现实工作的，却是万万不可死记硬套。</P>
<H4>相关链接：</H4>
<P>如何提高网页的效率（下篇）暂时还没有排版好，所以没有放出。请您继续关注本博客，我将在1周之内排版好并放出。<BR><A
title="如何提高网页的效率（下篇）——Use YSlow to know why your web Slow"
href="http://tech.it168.com/msoft/2007-10-29/200710291906187.shtml"
target=_blank>如何提高网页的效率 14条建议（IT168版）</A><BR><A
title="如何提高网页的效率（下篇）——Use YSlow to know why your web Slow"
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/28/speeding-up-web-site-yslow.html"
target=_blank>如何提高网页的效率（下篇）——Use YSlow to know why your web Slow </A><BR><A
title=CSS中的expression
href="http://www.google.cn/search?q=expression&ie=UTF-8&oe=GB2312&hl=zh-CN&domains=http://www.cnblogs.com/JustinYoung/&sitesearch=http://www.cnblogs.com/JustinYoung/"
target=_blank>《CSS中的expression系列文章》</A> <BR><A title=CSS压缩工具
href="http://www.cssdrive.com/index.php/main/csscompressor"
target=_blank>CSS在线压缩工具</A> </P>
<HR align=left width="80%">
Tag标签:
<H6
style="FONT-WEIGHT: normal; FONT-SIZE: 80%; COLOR: #666">如何提高网页的效率,如何提高效率,网页打开速度慢,开网页速度慢,网页速度慢,网页打开速度很慢,网页打开速度,提高网页浏览速度,浏览网页速度慢,网页打开速度太慢,打开网页的速度慢</H6>
<P> </P>
<H4>本文的讨论</H4><A title=博客园【web标准设计小组】
href="http://space.cnblogs.com/group/topic/360/"
target=_blank>博客园【web标准设计小组】关于本文的讨论</A>
<DIV class=postDesc>posted on 2007-11-20 08:55 <A
href="http://justinyoung.cnblogs.com/">杨正祎</A> 阅读(3904) <A
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html#Post">评论(84)</A>
<A
href="http://www.cnblogs.com/JustinYoung/admin/EditPosts.aspx?postid=965070">编辑</A>
<A id=lnkFavorite965070
onclick="Favorite(965070,'如何提高网页的效率（上篇）——提高网页效率的14条准则','http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html',this);return false"
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html#">收藏</A>
</DIV></DIV><IMG height=1 src="如何提高网页的效率(上篇).files/965070.jpg" width=1> <!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
<rdf:Description
rdf:about="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html"
dc:identifier="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html"
dc:title="如何提高网页的效率（上篇）——提高网页效率的14条准则"
trackback:ping="http://www.cnblogs.com/JustinYoung/services/trackbacks/965070.aspx" />
</rdf:RDF>
-->
<DIV id=AjaxHolder_UpdatePanel1><A
name=pagedcomment></A><!--done--><BR><B>评论:</B>
<DIV class=feedbackNoItems></DIV>
<DIV class=feedbackItem>
<DIV class=feedbackListSubtitle><A
title="permalink: re: 如何提高网页的效率（上篇）——提高网页效率的14条准则"
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html#965093">#1楼</A> <A
name=965093></A> 2007-11-20 09:03 | <A
id=AjaxHolder_Comments_CommentList_ctl00_NameLink
href="http://jeffreyzhao.cnblogs.com/" target=_blank>Jeffrey Zhao</A><BR>
<DIV align=left>哈，不错，只是说的简单了一些。<BR> <A
onclick='return SetReplyAuhor("Jeffrey Zhao")'
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html#post">回复</A> <A
onclick="GetQuote(965093);return false"
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html#post">引用</A> <A
title=查看该作者发表过的评论
href="http://www.cnblogs.com/CommentsByAuthor.aspx?author=Jeffrey+Zhao"
target=_blank>查看</A> <A
id=AjaxHolder_Comments_CommentList_ctl00_DeleteLink
href="javascript:__doPostBack('AjaxHolder$Comments$CommentList$ctl00$DeleteLink','')"></A> <A
id=AjaxHolder_Comments_CommentList_ctl00_EditLink></A></DIV></DIV></DIV>
<DIV class=feedbackItem>
<DIV class=feedbackListSubtitle><A
title="permalink: re: 如何提高网页的效率（上篇）——提高网页效率的14条准则"
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html#965102">#2楼</A> <A
name=965102></A> 2007-11-20 09:07 | <A
id=AjaxHolder_Comments_CommentList_ctl01_NameLink
href="http://ayuan.cnblogs.com/" target=_blank>老刘.</A><BR>
<DIV align=left>em fun of u~<BR> <A
onclick='return SetReplyAuhor("老刘.")'
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -