📄 如何提高网页的效率(上篇).htm

📁 如何提高网页的效率这里面有相关文件介绍,对提高访问网页的速度有相当大的帮助.及测试连接.
💻 HTM
📖 第 1 页 / 共 5 页
字号:
12 3 4 5 下一页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0086)http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html -->
<HTML><HEAD 
id=Head><TITLE>如何提高网页的效率（上篇）——提高网页效率的14条准则 - Yes! B/S ! - 博客园</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META id=metaKeywords content=如何提高网页的效率（上篇）——提高网页效率的14条准则 name=keywords><LINK 
id=MainCss href="如何提高网页的效率(上篇).files/style.css" type=text/css 
rel=stylesheet><LINK id=SecondaryCss href="如何提高网页的效率(上篇).files/customcss.css" 
type=text/css rel=stylesheet><LINK id=RSSLink title=RSS 
href="http://www.cnblogs.com/JustinYoung/rss.aspx" type=application/rss+xml 
rel=alternate>
<META content="MSHTML 6.00.2900.3059" name=GENERATOR></HEAD>
<BODY>
<FORM id=Form1 name=Form1 onsubmit="javascript:return WebForm_OnSubmit();" 
action=speeding-up-web-site-14rule.html method=post>
<DIV><INPUT id=__EVENTTARGET type=hidden name=__EVENTTARGET> <INPUT 
id=__EVENTARGUMENT type=hidden name=__EVENTARGUMENT> <INPUT 
id="&#13;&#10;__VIEWSTATE" type=hidden name=__VIEWSTATE> </DIV>
<SCRIPT type=text/javascript>
<!--
var theForm = document.forms['Form1'];
if (!theForm) {
    theForm = document.Form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</SCRIPT>

<SCRIPT src="如何提高网页的效率(上篇).files/WebResource.axd" type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript>
									function ctlent(evt,id)
											{
												if(evt.ctrlKey && evt.keyCode == 13)
												{	
													try
													{
														TempSave(id);
													}
													catch(ex)
													{
													}
													finally
													{
													    __doPostBack('AjaxHolder$PostComment$btnSubmit','')
													}
												}
		
												}</SCRIPT>

<SCRIPT language=JavaScript>function SetReplyAuhor(author){document.getElementById('AjaxHolder_PostComment_tbComment').value+="@"+author+"\n";document.getElementById('AjaxHolder_PostComment_tbComment').focus();return false}</SCRIPT>

<SCRIPT src="如何提高网页的效率(上篇).files/ScriptResource.axd" 
type=text/javascript></SCRIPT>

<SCRIPT 
src="C:\Documents and Settings\Administrator\桌面\如何提高网页的效率(上篇).files\ScriptResource(1).axd" 
type=text/javascript></SCRIPT>

<SCRIPT 
src="C:\Documents and Settings\Administrator\桌面\如何提高网页的效率(上篇).files\ScriptResource(2).axd" 
type=text/javascript></SCRIPT>

<SCRIPT src="如何提高网页的效率(上篇).files/js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
<!--
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
// -->
</SCRIPT>
<!--done-->
<DIV id=header><!--done-->
<DIV class=header>
<DIV class=headerText><A class=headermaintitle id=Header1_HeaderTitle 
href="http://www.cnblogs.com/JustinYoung/">Yes! B/S !</A><BR>JustinYoung's Blog 
</DIV></DIV></DIV>
<DIV id=mytopmenu>
<DIV id=mylinks><!--done--><A class=menu id=MyLinks1_HomeLink 
href="http://www.cnblogs.com/">博客园</A>&nbsp;&nbsp; <A class=menu 
id=MyLinks1_MyHomeLink href="http://justinyoung.cnblogs.com/">首页</A>&nbsp;&nbsp; 
<A class=menu id=MyLinks1_NewPostLink 
href="http://www.cnblogs.com/JustinYoung/admin/EditPosts.aspx?opt=1">新随笔</A> <A 
class=menu id=MyLinks1_ContactLink 
href="http://www.cnblogs.com/JustinYoung/contact.aspx?id=1">联系</A>&nbsp;&nbsp; 
<A class=menu id=MyLinks1_Syndication 
href="http://www.cnblogs.com/JustinYoung/rss">订阅</A><A id=MyLinks1_XMLLink 
href="http://www.cnblogs.com/JustinYoung/rss"><IMG 
style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" 
alt=订阅 src="如何提高网页的效率(上篇).files/xml.gif"></A>&nbsp;&nbsp; <A class=menu 
id=MyLinks1_Admin 
href="http://www.cnblogs.com/JustinYoung/admin/EditPosts.aspx">管理</A> </DIV>
<DIV id=mystats><!--done-->随笔-108&nbsp; 评论-1148&nbsp; 文章-223&nbsp; trackbacks-87 
</DIV></DIV>
<DIV id=centercontent>
<SCRIPT type=text/javascript>
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('AjaxHolder$scriptmanager1', document.getElementById('Form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tAjaxHolder$UpdatePanel1'], [], [], 90);
//]]>
</SCRIPT>
<!--done-->
<DIV class=post>
<DIV class=postTitle><A class=postTitle2 id=AjaxHolder_ctl01_TitleUrl 
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html">如何提高网页的效率（上篇）——提高网页效率的14条准则</A> 
</DIV>
<DIV class=floatRPic><A title=你的网页太臃肿 href="http://justinyoung.cnblogs.com/" 
target=_blank><IMG alt=你的网页太臃肿！ src="如何提高网页的效率(上篇).files/fatfat.jpg" 
longDesc=这是一张表现臃肿,胖子,减肥的图片></A><BR>图:你的网页太臃肿了！</DIV>
<H4>网站最基本的东西是什么？</H4>
<P>网站最基本的东西是什么？<BR>——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！<BR>内容再丰富的网站，如果慢到无法访问也是毫无意义的； 
SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； 
UE设计的再人性化的网站，如果用户连看都看不到也是空谈。<BR>所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢？Steve 
Souders(Steve Souders的资料<A href="http://www.oreillynet.com/pub/au/2951" 
target=_blank>http://www.oreillynet.com/pub/au/2951</A>)提出的提高网页效率的14条准则，而这些准则也将是我们下篇中介绍到的YSlow工具的理论基础：<BR>
<UL 
style="LIST-STYLE-IMAGE: url(http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/wedgits_red.gif); MARGIN: 0px 2px 0px 15px">
  <LI>Make Fewer HTTP Requests 
  <LI>Use a Content Delivery Network 
  <LI>Add an Expires Header 
  <LI>Gzip Components 
  <LI>Put CSS at the Top 
  <LI>Move Scripts to the Bottom 
  <LI>Avoid CSS Expressions 
  <LI>Make JavaScript and CSS External 
  <LI>Reduce DNS Lookups 
  <LI>Minify JavaScript 
  <LI>Avoid Redirects 
  <LI>Remove Duplicate Scripts 
  <LI>Configure ETags 
  <LI>Make Ajax Cacheable 
</LI></UL>这里我们将逐一的讲解这些准则,对其中开发者密切相关的准则我将详细讲解。小弟个人技术实在有限，错误和无知在所难免，还请高人指点。<BR>
<P>&nbsp;</P>
<H4>第一条：Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。</H4>
<P>80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。<BR>这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢？其实这是一个误解。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request请求数，当然也有一些技巧和建议的：<BR>
<H5>1：用一个大图片代替多个小图片。</H5>这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。<BR>第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。<BR>第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。<BR>
<DIV class=floatMPic><A title=点击查看大图 
href="如何提高网页的效率(上篇).files/webEfficiency07.jpg" target=_blank><IMG height=109 
alt=点击查看大图 src="如何提高网页的效率(上篇).files/webEfficiency07.jpg" width=620 
border=0></A><BR>一个大小为40528bytes的337*191px的大图片的分析结果（点击图片可以查看完整大图片）</DIV><BR>
<DIV class=floatMPic><A title=点击查看大图 
href="如何提高网页的效率(上篇).files/webEfficiency05.jpg" target=_blank><IMG height=107 
alt=点击查看大图 src="如何提高网页的效率(上篇).files/webEfficiency05.jpg" width=620 border=0 
longDesc=httpwatch></A><BR>一个大小为13883bytes的280*90px的小图片的分析结果（点击图片可以查看完整大图片）</DIV>第一张大图片花费时间为：<BR>Blocked：13.034s<BR>Send：0.001s<BR>Wait：0.163s<BR>Receive：4.596s<BR>TTFB：0.164s<BR>NetWork：4.760s<BR>功耗时：17.795s<BR>真正用于传输大文件花费的时间为Reveive时间，即4.596s，多数的时间是用来检索缓存和确定链接是否有效的Blocked时间，供花费13.034s，占总时间的73.2%。<BR><BR>第二张小图片花费时间为：<BR>Blocked：16.274s<BR>Send：小于0.001s<BR>Wait：0.117s<BR>Receive：0.397s<BR>TTFB：0.118s<BR>NetWork：0.516s<BR>功耗时：16.790s<BR>真正用于传输文件的花费时间是Reveive时间，即0.397s，这的确要比刚才大文件的4.596s小很多。但是他的Blocked时间为16.274s，占总时间的97%。<BR><BR>如果这些数据还不够说服你的话，让我们看看下面这张图。这里列出了某个网页中所有图片中的花费时间示意图。当然，里面的图片有大有小，规格不一。<BR>
<DIV class=floatMPic><A title=点击查看大图 
href="如何提高网页的效率(上篇).files/webEfficiency08.jpg" target=_blank><IMG height=195 
alt=httpwatch,杨正祎,Yes!B/S! src="如何提高网页的效率(上篇).files/webEfficiency08.jpg" 
width=620 border=0 
longDesc=httpwatch,杨正祎,Yes!B/S!></A><BR>大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。</DIV>其中藏青色的为传输文件花费的Reveive时间，而前面白色的为检索缓存和确认链接是否有效的Blocked时间。铁一样的事实告诉我们： 

<UL style="MARGIN: 5px 2em; LIST-STYLE-TYPE: square">
  <LI>大文件和小文件下载所需时间的确是不同的，差异的绝对值不大。而且下载所需时间占总耗费时间比例很小。 
  <LI>大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。无论文件大小，这个时间的花费大致是相同的。而且所占总耗费时间的比例是极大的。 

  <LI>一个100k的大图片总耗费时间绝对大于4个25k的小图片的总耗费时间。而且主要差别就是4个小图片的Blocked时间绝对大于1个大图片的Blocked时间。 
  </LI></UL>所以如果可能还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。<BR>但是，请注意：也不能用太大的单张图片，因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主意。<BR>
<H5>2：合并你的css文件。</H5>
<DIV class=floatRPic><A title=web标准设计 href="http://justinyoung.cnblogs.com/"
12 3 4 5 下一页
💿 文件大小 806 K
👤 上传用户 judydance
📂 所属分类其他书籍
🏷️ 相关标签

#页 #如何提高 #效率 #访问
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -