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

📁 如何提高网页的效率这里面有相关文件介绍,对提高访问网页的速度有相当大的帮助.及测试连接.
💻 HTM
📖 第 1 页 / 共 5 页
字号:
12 3 4 5 下一页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0085)http://www.cnblogs.com/JustinYoung/archive/2007/11/28/speeding-up-web-site-yslow.html -->
<HTML><HEAD id=Head><TITLE>如何提高网页的效率（下篇）——Use YSlow to know why your web Slow - Yes! B/S ! - 博客园</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META id=metaKeywords 
content="如何提高网页的效率（下篇）——Use YSlow to know why your web Slow" 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-yslow.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/28/speeding-up-web-site-yslow.html">如何提高网页的效率（下篇）——Use 
YSlow to know why your web Slow</A> </DIV>
<P></P>
<DIV class=floatRPic><A title=你的网页太臃肿 href="http://justinyoung.cnblogs.com/" 
target=_blank><IMG alt=你的网页太臃肿！ src="如何提高网页的效率(下篇).files/fatfat.jpg" 
longDesc=这是一张表现臃肿,胖子,减肥的图片></A><BR>图:你的网页太臃肿了！</DIV>网站最重要的东西是什么？<BR>——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！<BR>内容再丰富的网站，如果慢到无法访问也是毫无意义的； 
SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭(页面效率和搜索蜘蛛之间的关系，需要进一步的确认，此为和上篇保持统一)； 
UE设计的再人性化的网站，如果用户连看都看不到也是空谈。 
<P></P>
<P>所以网页的效率绝对是最值得关注的方面。虽然我们在<A title=《如何提高网页的效率（上篇）——提高网页效率的14条准则》 
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html" 
target=_blank> 
《如何提高网页的效率（上篇）——提高网页效率的14条准则》</A>提到了如何提高网页效率的14条准则，但是如何知道我们现在的网页的效率到底如何？到底处于怎样一个级别？又有哪些方面做的不够好，需要改进呢？也许，你会说，问一下用户不就知道了吗？但是相比感性比例占据太大的用户感受而言，理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具——YSlow（why 
slow，这个名字起的太好了）。 </P>
<DIV class=floatRPic><A title="yslow,yslow Logo" 
href="http://justinyoung.cnblogs.com/" target=_blank><IMG alt="yslow,yslow Logo" 
src="如何提高网页的效率(下篇).files/yslowlogo.png"></A><BR>yslow</DIV>
<P></P>
<P><A title=YSlow href="http://developer.yahoo.com/yslow/" 
target=_blank>YSlow</A>是由<A title=Yahoo开发者团队 href="http://developer.yahoo.com/" 
target=_blank>Yahoo开发者团队</A>发布的一款基于Firebug的插件。而<A title=Firebug 
href="https://addons.mozilla.org/en-US/firefox/addon/5369" 
target=_blank>Firebug</A> 
又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕，但是最终说明的问题是： 
<UL 
style="LIST-STYLE-IMAGE: url(http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/wedgits_red.gif); MARGIN: 10px 0px 0px 15px">
  <LI>很遗憾，微软的IE系列浏览器不能使用YSlow。 
  <LI>YSlow只能使用在FireFox浏览器上。 
  <LI>如果要想使用YSlow，那么你必须先安装FireFox。 
  <LI>如果要想使用YSlow，那么你就要安装FireFox上的Firebug插件。 </LI></UL>
<P></P>
<P>这看上去好像有点令人沮丧，但是事实上它并不像想象中的那么麻烦，只要按照下面的步骤你将能很快的使用YSlow： 
<OL style="FONT-SIZE: 10pt; MARGIN-LEFT: 2em">
  <LI>到<A 
  href="http://www.mozilla.net.cn/firefox/">http://www.mozilla.net.cn/firefox/</A><A 
  href="http://www.mozilla.net.cn/firefox/" target=_blank><IMG alt=在新窗口打开此链接 
  src="如何提高网页的效率(下篇).files/outLink.gif"></A> 
  下载最新版的FireFox，并安装它。当然如果你已经安装了FireFox可以跳过此步。 
  <LI>到<A 
  href="https://addons.mozilla.org/en-US/firefox/addon/1843/">https://addons.mozilla.org/en-US/firefox/addon/1843/</A><A 
  href="https://addons.mozilla.org/en-US/firefox/addon/1843/" target=_blank><IMG 
  alt=在新窗口打开此链接 src="如何提高网页的效率(下篇).files/outLink.gif"></A> 
  下载最新版的Firebug，并安装它。当然如果你已经安装了Firebug可以跳过此步。 
  <LI>到<A 
  href="https://addons.mozilla.org/en-US/firefox/addon/5369/">https://addons.mozilla.org/en-US/firefox/addon/5369/</A><A 
  href="https://addons.mozilla.org/en-US/firefox/addon/5369/" target=_blank><IMG 
  alt=在新窗口打开此链接 src="如何提高网页的效率(下篇).files/outLink.gif"></A> 
  下载最新版的YSlow，并安装它。当然如果你已经安装了YSlow可以跳过此步。 </LI></OL>
<P></P>
<P>
<DIV class=floatMPic><A title=web标准设计 
href="http://justinyoung.cnblogs.com/"><IMG height=355 alt=firefox,firebug,yslow 
src="如何提高网页的效率(下篇).files/yslow01.jpg" 
width=514></A><BR>图2：在菜单中先打开Firebug插件</DIV>这时候打开FireFox，你将在【工具】菜单中看到【firebug】（如图2）。打开firebug，然后在firebug中点击YSlow菜单，便看进入YSlow的主界面（如图3）。<BR>
<DIV class=floatMPic><A title=点击小图查看完整大图 
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/28/pic/02.jpg" 
target=_blank><IMG height=248 alt=点击小图查看完整大图 
src="如何提高网页的效率(下篇).files/yslow02.jpg" 
width=620></A><BR>图3：在菜单中先打开Firebug插件(点击小图查看完整大图)</DIV>
<P></P>
<H4>点击【Performace】菜单</H4>
<P>YSlow便开始分析此页的效率，并从13个最影响网页效率的方面给出评估（如图4）。 
<DIV class=floatMPic><A title=web标准设计 
href="http://justinyoung.cnblogs.com/"><IMG alt=firefox,firebug,yslow 
src="如何提高网页的效率(下篇).files/yslow03.jpg"></A><BR>图4：YSlow给出的本页面效率评估</DIV>
<P></P>
<P>可以看出来，YSlow评估的依据就是我们在<A title=《如何提高网页的效率（上篇）——提高网页效率的14条准则》 
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html" 
target=_blank> 
《如何提高网页的效率（上篇）——提高网页效率的14条准则》</A>中提到的前面13条。前面蓝色的字母表示这一条准则的得分。A最高。点击右面的三角形可以得到更多的信息和建议，有些信息里面还有“放大镜” 
图标，点击也将展示更为详细的信息和建议。（如图5所示） 
<DIV class=floatMPic><A title=web标准设计 
href="http://justinyoung.cnblogs.com/"><IMG alt=firefox,firebug,yslow 
src="如何提高网页的效率(下篇).files/yslow09.jpg"></A><BR>图5：YSlow可以给出每条准则的详细评估信息和建议</DIV>
<P></P>
<H4>点击【Stats】菜单</H4>
<P>这个视图会告诉你页面的总体统计信息。包括页面大小、css样式表大小、脚本文件大小、总体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你，哪些东西被缓存了，缓存了多少等等。 

<DIV class=floatMPic><A title=web标准设计 
href="http://justinyoung.cnblogs.com/"><IMG alt=firefox,firebug,yslow 
src="如何提高网页的效率(下篇).files/yslow10.jpg"></A><BR>图6：【Stats】视图信息</DIV>
12 3 4 5 下一页
💿 文件大小 806 K
👤 上传用户 judydance
📂 所属分类其他书籍
🏷️ 相关标签

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

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