六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 142|回复: 0

Firebug快速入门(三)

[复制链接]

升级  0.95%

325

主题

325

主题

325

主题

探花

Rank: 6Rank: 6

积分
1019
 楼主| 发表于 2013-2-7 23:06:26 | 显示全部楼层 |阅读模式
<!--[if gte mso 9]><xml> <w:WordDocument>  <w:View>Normal</w:View>  <w:Zoom>0</w:Zoom>  <w:PunctuationKerning />  <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing>  <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>  <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>  <w:ValidateAgainstSchemas />  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>  <w:Compatibility>   <w:SpaceForUL />   <w:BalanceSingleByteDoubleByteWidth />   <w:DoNotLeaveBackslashAlone />   <w:ULTrailSpace />   <w:DoNotExpandShiftReturn />   <w:AdjustLineHeightInTable />   <w:BreakWrappedTables />   <w:SnapToGridInCell />   <w:WrapTextWithPunct />   <w:UseAsianBreakRules />   <w:DontGrowAutofit />   <w:UseFELayout />  </w:Compatibility>  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><![endif]--><!-- /* Font Definitions */ @font-face{font-family:宋体;panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-alt:SimSun;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;}@font-face{font-family:"\@宋体";panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal{mso-style-parent:"";margin:0cm;margin-bottom:.0001pt;text-align:justify;text-justify:inter-ideograph;mso-pagination:none;font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:"Times New Roman";mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;} /* Page Definitions */ @page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section1{size:612.0pt 792.0pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;mso-header-margin:36.0pt;mso-footer-margin:36.0pt;mso-paper-source:0;}div.Section1{page:Section1;} /* List Definitions */ @list l0{mso-list-id:2114936771;mso-list-template-ids:182877916;}@list l0:level1{mso-level-number-format:chinese-counting-thousand;mso-level-text:%1、;mso-level-tab-stop:21.0pt;mso-level-number-position:left;margin-left:21.0pt;text-indent:-21.0pt;mso-ansi-font-size:12.0pt;mso-bidi-font-size:12.0pt;mso-ansi-font-weight:bold;}@list l0:level2{mso-level-text:"%1\.%2";mso-level-tab-stop:49.6pt;mso-level-number-position:left;margin-left:49.6pt;text-indent:-1.0cm;}@list l0:level3{mso-level-text:"%1\.%2\.%3";mso-level-tab-stop:70.9pt;mso-level-number-position:left;margin-left:70.9pt;text-indent:-1.0cm;}@list l0:level4{mso-level-text:"%1\.%2\.%3\.%4";mso-level-tab-stop:99.2pt;mso-level-number-position:left;margin-left:99.2pt;text-indent:-35.4pt;}@list l0:level5{mso-level-text:"%1\.%2\.%3\.%4\.%5";mso-level-tab-stop:127.55pt;mso-level-number-position:left;margin-left:127.55pt;text-indent:-42.5pt;}@list l0:level6{mso-level-text:"%1\.%2\.%3\.%4\.%5\.%6";mso-level-tab-stop:163.0pt;mso-level-number-position:left;margin-left:163.0pt;text-indent:-2.0cm;}@list l0:level7{mso-level-text:"%1\.%2\.%3\.%4\.%5\.%6\.%7";mso-level-tab-stop:191.35pt;mso-level-number-position:left;margin-left:191.35pt;text-indent:-63.8pt;}@list l0:level8{mso-level-text:"%1\.%2\.%3\.%4\.%5\.%6\.%7\.%8";mso-level-tab-stop:219.7pt;mso-level-number-position:left;margin-left:219.7pt;text-indent:-70.9pt;}@list l0:level9{mso-level-text:"%1\.%2\.%3\.%4\.%5\.%6\.%7\.%8\.%9";mso-level-tab-stop:255.1pt;mso-level-number-position:left;margin-left:255.1pt;text-indent:-85.0pt;}ol{margin-bottom:0cm;}ul{margin-bottom:0cm;}-->
<!--[if gte mso 10]><mce:style><!  /* Style Definitions */ table.MsoNormalTable{mso-style-name:普通表格;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-style-noshow:yes;mso-style-parent:"";mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-para-margin:0cm;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:10.0pt;font-family:"Times New Roman";mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}--><!--[endif]--><!--[if !supportLists]-->七、<!--[endif]-->查看网络
Firebug可以实时查看网络状况。参考下图:

<!--[if gte mso 9]><xml> <w:WordDocument>  <w:View>Normal</w:View>  <w:Zoom>0</w:Zoom>  <w:PunctuationKerning />  <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing>  <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>  <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>  <w:ValidateAgainstSchemas />  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>  <w:Compatibility>   <w:SpaceForUL />   <w:BalanceSingleByteDoubleByteWidth />   <w:DoNotLeaveBackslashAlone />   <w:ULTrailSpace />   <w:DoNotExpandShiftReturn />   <w:AdjustLineHeightInTable />   <w:BreakWrappedTables />   <w:SnapToGridInCell />   <w:WrapTextWithPunct />   <w:UseAsianBreakRules />   <w:DontGrowAutofit />   <w:UseFELayout />  </w:Compatibility>  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><![endif]--><!-- /* Font Definitions */ @font-face{font-family:宋体;panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-alt:SimSun;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;}@font-face{font-family:"\@宋体";panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal{mso-style-parent:"";margin:0cm;margin-bottom:.0001pt;text-align:justify;text-justify:inter-ideograph;mso-pagination:none;font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:"Times New Roman";mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;} /* Page Definitions */ @page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section1{size:612.0pt 792.0pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;mso-header-margin:36.0pt;mso-footer-margin:36.0pt;mso-paper-source:0;}div.Section1{page:Section1;} /* List Definitions */ @list l0{mso-list-id:2114936771;mso-list-template-ids:182877916;}@list l0:level1{mso-level-number-format:chinese-counting-thousand;mso-level-text:%1、;mso-level-tab-stop:21.0pt;mso-level-number-position:left;margin-left:21.0pt;text-indent:-21.0pt;mso-ansi-font-size:12.0pt;mso-bidi-font-size:12.0pt;mso-ansi-font-weight:bold;}@list l0:level2{mso-level-text:"%1\.%2";mso-level-tab-stop:49.6pt;mso-level-number-position:left;margin-left:49.6pt;text-indent:-1.0cm;}@list l0:level3{mso-level-text:"%1\.%2\.%3";mso-level-tab-stop:70.9pt;mso-level-number-position:left;margin-left:70.9pt;text-indent:-1.0cm;}@list l0:level4{mso-level-text:"%1\.%2\.%3\.%4";mso-level-tab-stop:99.2pt;mso-level-number-position:left;margin-left:99.2pt;text-indent:-35.4pt;}@list l0:level5{mso-level-text:"%1\.%2\.%3\.%4\.%5";mso-level-tab-stop:127.55pt;mso-level-number-position:left;margin-left:127.55pt;text-indent:-42.5pt;}@list l0:level6{mso-level-text:"%1\.%2\.%3\.%4\.%5\.%6";mso-level-tab-stop:163.0pt;mso-level-number-position:left;margin-left:163.0pt;text-indent:-2.0cm;}@list l0:level7{mso-level-text:"%1\.%2\.%3\.%4\.%5\.%6\.%7";mso-level-tab-stop:191.35pt;mso-level-number-position:left;margin-left:191.35pt;text-indent:-63.8pt;}@list l0:level8{mso-level-text:"%1\.%2\.%3\.%4\.%5\.%6\.%7\.%8";mso-level-tab-stop:219.7pt;mso-level-number-position:left;margin-left:219.7pt;text-indent:-70.9pt;}@list l0:level9{mso-level-text:"%1\.%2\.%3\.%4\.%5\.%6\.%7\.%8\.%9";mso-level-tab-stop:255.1pt;mso-level-number-position:left;margin-left:255.1pt;text-indent:-85.0pt;}ol{margin-bottom:0cm;}ul{margin-bottom:0cm;}--><!--[if gte mso 10]><mce:style><!  /* Style Definitions */ table.MsoNormalTable{mso-style-name:普通表格;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-style-noshow:yes;mso-style-parent:"";mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-para-margin:0cm;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:10.0pt;font-family:"Times New Roman";mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}--><!--[endif]-->
<!--[if !supportLists]-->八、<!--[endif]-->YSlow
YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。


<!--[if gte mso 9]><xml> <w:WordDocument>  <w:View>Normal</w:View>  <w:Zoom>0</w:Zoom>  <w:PunctuationKerning />  <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing>  <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>  <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>  <w:ValidateAgainstSchemas />  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>  <w:Compatibility>   <w:SpaceForUL />   <w:BalanceSingleByteDoubleByteWidth />   <w:DoNotLeaveBackslashAlone />   <w:ULTrailSpace />   <w:DoNotExpandShiftReturn />   <w:AdjustLineHeightInTable />   <w:BreakWrappedTables />   <w:SnapToGridInCell />   <w:WrapTextWithPunct />   <w:UseAsianBreakRules />   <w:DontGrowAutofit />   <w:UseFELayout />  </w:Compatibility>  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><![endif]--><!-- /* Font Definitions */ @font-face{font-family:宋体;panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-alt:SimSun;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;}@font-face{font-family:"\@宋体";panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal{mso-style-parent:"";margin:0cm;margin-bottom:.0001pt;text-align:justify;text-justify:inter-ideograph;mso-pagination:none;font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:"Times New Roman";mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;} /* Page Definitions */ @page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section1{size:612.0pt 792.0pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;mso-header-margin:36.0pt;mso-footer-margin:36.0pt;mso-paper-source:0;}div.Section1{page:Section1;} /* List Definitions */ @list l0{mso-list-id:1897544436;mso-list-type:hybrid;mso-list-template-ids:2064924524 -1577261700 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}@list l0:level1{mso-level-tab-stop:36.0pt;mso-level-number-position:left;text-indent:-18.0pt;}ol{margin-bottom:0cm;}ul{margin-bottom:0cm;}--><!--[if gte mso 10]><mce:style><!  /* Style Definitions */ table.MsoNormalTable{mso-style-name:普通表格;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-style-noshow:yes;mso-style-parent:"";mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-para-margin:0cm;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:10.0pt;font-family:"Times New Roman";mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}--><!--[endif]-->

YSlow评分标准

  • 尽量减少HTTP请求,
  • 使用内容分发网络(Content Delivery     Network
  • 设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中。
  • 对我们的页面内容进行Gzip格式的压缩
  • 把CSS外部链接放到页面的顶部。
  • 把Javascript脚本尽量放到页面底部加载。
  • 避免CSS表达式。
  • 将JS,CSS提取出来。
  • 尽可能少的DNS查找。
  • 对JS代码进行压缩。(yuicompressor一个不错的压缩工具)
  • 避免重定向(跳转)
  • 去除重复的脚本。
  • Configure ETags
工具和帮助
<!--[if gte mso 9]><xml> <w:WordDocument>  <w:View>Normal</w:View>  <w:Zoom>0</w:Zoom>  <w:PunctuationKerning />  <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing>  <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>  <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>  <w:ValidateAgainstSchemas />  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>  <w:Compatibility>   <w:SpaceForUL />   <w:BalanceSingleByteDoubleByteWidth />   <w:DoNotLeaveBackslashAlone />   <w:ULTrailSpace />   <w:DoNotExpandShiftReturn />   <w:AdjustLineHeightInTable />   <w:BreakWrappedTables />   <w:SnapToGridInCell />   <w:WrapTextWithPunct />   <w:UseAsianBreakRules />   <w:DontGrowAutofit />   <w:UseFELayout />  </w:Compatibility>  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><![endif]--><!--[if gte mso 10]><mce:style><!  /* Style Definitions */ table.MsoNormalTable{mso-style-name:普通表格;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-style-noshow:yes;mso-style-parent:"";mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-para-margin:0cm;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:10.0pt;font-family:"Times New Roman";mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}--><!--[endif]-->
<!--[if gte mso 9]><xml> <w:WordDocument>  <w:View>Normal</w:View>  <w:Zoom>0</w:Zoom>  <w:PunctuationKerning />  <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing>  <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>  <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>  <w:ValidateAgainstSchemas />  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>  <w:Compatibility>   <w:SpaceForUL />   <w:BalanceSingleByteDoubleByteWidth />   <w:DoNotLeaveBackslashAlone />   <w:ULTrailSpace />   <w:DoNotExpandShiftReturn />   <w:AdjustLineHeightInTable />   <w:BreakWrappedTables />   <w:SnapToGridInCell />   <w:WrapTextWithPunct />   <w:UseAsianBreakRules />   <w:DontGrowAutofit />   <w:UseFELayout />  </w:Compatibility>  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><![endif]--><!--[if gte mso 10]><mce:style><!  /* Style Definitions */ table.MsoNormalTable{mso-style-name:普通表格;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-style-noshow:yes;mso-style-parent:"";mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-para-margin:0cm;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:10.0pt;font-family:"Times New Roman";mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}--><!--[endif]-->
这几个小工具相当有用:
JSLint可以进行JS的语法检查,指出你的JS书写的不规范之处。
All JS\All CSS 可以提取出所有的页面相关的JS和CSS
All JS(Beautified)这个很有用可以将压缩过的JS代码美化,还原,这样很方便我们查看别人压缩过的JS代码。
Printable View 生成评分报表。
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表