码迷,mamicode.com
首页 > 其他好文 > 详细

Yslow

时间:2017-06-30 18:53:13      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:main   exp   图片   文档   问题   pts   handler   tom   静态缓存   

Yslow视图

YSlow显示测试结果的分析,分为等级、组件、统计信息。你可以浏览这些观点之间选择标签以观的名字在YSlow标签的Firebug控制台。

以下是说明的等级、组件、统计信息。

一、等级视图

  查看一个分析,选择页面的性能等级标签或点击网页的字母等级在状态栏这页纸的底部。

视图显示了等级为网页的成绩单。整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于22可分级的高性能网页的规则(性能规则)。这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级,A 级为最高。

下面是一个等级的例子:

 

如果页面与某一个规则无关,则显示 N/A ,表示不适用。

点击每一规则,都给出了改进建议。要查看更全面的改进方法进入前端性能优化指南

二、组件视图

 

分组显示页面组件,表格列出组件的信息,点击 Expand All展开显示给个分组内各的组件信息。

下面简要列在组件检视表:

TYPE:该组件的类型。该网页是由组成部分的下列类型: doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.

SIZE(KB):该组件的大小以千字节。

GZIP(KB):该组件的gzip压缩的大小以千字节。

COOKIE RECEIVED(bytes):字节数在HTTP设置的Cookie响应头。

COOKIE SENT(bytes):节数的CookieHTTP请求报头

HEADERSHTTP信息头,点击放大镜查看全面信息。

URL:链接地址

EXPIRES(Y/M/D):日期的Expires头,属于缓存设置一种。

RESPONSE TIME (ms):响应时间

ETAGETag响应头,也是缓存设置的一种

ACTION:额外的性能分析

三、统计信息视图

 

 左侧图表显示是页面元素在空缓存的加载情况,右侧为页面元素使用缓存后的页面加载情况。我们可以看到,页面元素缓存后的使页面的http请求和页面总大小都减少,从而加快了页面打开时间。参看(页面的缓存设置

YSlow菜单栏

 

一、规则集

     1 YSlow 2版) -这一规则集包含了所有22个测试的规则。
     2 、精英( V1导联) -这个规则集包含原始13规则中使用了YSlow 1.0
     3、小网站或博客-这个规则集包含14个规则,适用于小型网站或博客。参照下方的图片,看看哪一种规则,在这个规则集。

 

请注意,最后选定的规则集成为默认的规则集。默认规则集可以是一个预定义的三个之一或您自己创建的一个。

要创建您自己的规则集,单击Rulesets下拉菜单旁边的 Edit 按钮。新的规则集屏幕将显示:

 

    1、点击左侧 New Set 按钮,出现全部22调规则,勾选你所需的

    2、点击 Save ruleset as... 保存,会弹出个命名窗口,命名就可以了。

    3、你还可以对自定义的规则再次编辑或者删除。

 

 

YSlow 工具

YSlow的工具菜单上提供了多种报告工具,您可以使用获得的信息,以帮助您的网页分析。以下是截图工具菜单:

1JSLint

JSLint收集所有外部和内部的JavaScript从目前的网页,提交给JSLint ,一个JavaScript验证,并打开一个单独的窗口了一份报告,存在问题,该网页的JavaScript的。该报告包括大致位置的源代码的问题。很多 时候,这些问题是语法错误,但JSLint寻找风格公约的问题和结构性问题。

 

2All JS

收集所有外部和内部的JavaScript的网页,并显示在一个单独的脚本窗口。您可能想要使用这个工具来查看某个脚本,以及是否实际使用是正确的。

 

3All JS Beautified

js以人们可读的方式展示。

 

4All JS Minified

收集所有外部和内嵌JavaScript,删除评论和白色空间以缩小的脚本。以改善网页的性能。

 

5All CSS

收集所有的行内和外部的样式表在网页上,并将其显示在一个单独的窗口。

 

6All Smush.it

如果您按一下所有Smush.it Smush.it将运行在网页上所有的图片组成。此工具将告诉你该图像可被优化,并创建一个压缩文件,来优化图像。当您选择此工具你会看到输出如下所示:

 

 

1.Minimize HTTP Requests 减少HTTP请求
  图片、cssscriptflash等等这些都会增加 http请求数,减少这些元素的数量就能减少响应时间。把多个JSCSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进 CSS里,利用 CSS sprites 将小图拼合后利用background来定位。
  2.Use a Content Delivery Network 利用CDN技术
  CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。
  3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存
   浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。不过这样如果页面里的 东西变动的话就要改名字了,否则用户端不会主动刷新,看自己衡量了~ 这项可以通过修改.htaccess文件来实现。
  4.Gzip Components Gzip压缩
  Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%。压缩没压缩,可以到 这里 做下测试。
  5.Put Stylesheets at the Top CSS放顶部
  让浏览者能尽早的看到网站的完整样式。
  6.Put Scripts at the Bottom JS放底部
  网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。
  7.Avoid CSS Expressions 避免CSS Expressions
  CSS表达式很可怕,这个只被IE支持的东西执行时候的运算量非常大,你移动一下鼠标它都要进行重计算的,但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死!~
  8.Make JavaScript and CSS External JSCSS外链
  前面讲到了缓存这个事情,一些较为公用的JSCSS,我们可以使用外链的形式,譬如我就是从Google外链来的Jquery文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!~
  9.Reduce DNS Lookups 减少DNS查找
  貌似是要减少网站从外部调用资源,我的Google分析和picasa的外链图片都算在里面了。
  10.Minify JavaScript and CSS 减小JSCSS的体积
  写JSCSS都是有技巧的,用最少的代码实现同样的功能,减少空白,增强逻辑性,用缩写方式等等,当然也有不少工具也能够帮你实现这一点。
  11. Avoid Redirects 避免重定向
   再写入链接时,虽然”http://www. today-s-ooxx. com””http://www. today-s-ooxx. com/” 仅有一个最后的”/”只差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转,这个要自己注意,也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。
  12. Remove Duplicate Scripts 删除重复脚本
  重复调用的代码浏览器并不会识别忽略,而是会再次运算一遍,这当然是大大的浪费。
  13. Configure ETags 配置ETags
  搞不清楚咋回事,总之我是在. htaccess里把它删除了。
  14. Make Ajax Cacheable 缓存Ajax
  Ajax是实时响应的,在浏览器接收到新的数据前,旧的数据被缓存,这样能够更好的提高效率。
  15. Flush the Buffer Early 尽早的释放缓冲
  当用户进行页面请求时,服务器端需要花费200500毫秒时间来拼合HTML,将写在headbody之间,释放缓冲,这样可以将文件头先发送出去,然后再发送文件内容,提高效率。
  16. Use GET for AJAX Requests GET方式进行AJAX请求
  Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据)。
  17. Post-load Components 延迟加载组件
  最先加载必须的组件进行页面初始化,然后再加载其他,YUI Image Loader 是很好的例子。
  18. Preload components 预加载组件
  提前加载以后可能用到的东西,和延迟加载并不冲突,它的目的是为后续请求提供更快的响应,参见Google首页上的CSS sprites应用。
  19. Reduce the Number of DOM Elements 减少DOM元素数量
  复杂的页面结构意味着更长的下载及响应时间,更合理更高效的使用标签来架构页面,是好的前端的必备条件。
  20. Split Components Across Domains 跨域分离组件
  页面组件多个来源可以增大你的平行下载量,但注意不要过多,超过2-4个域名会引起上面说到的DNS查找浪费。
  21. Minimize the Number of iframes 减少iframe数量
  需要更有效的利用 ifames
  iframe 优点:有利于下载缓慢的广告等第三方内容,安全沙箱,并行下载脚本
  iframe 缺点:即使为空也会有较大资源消耗,会阻止页面的onload,非语义
  22. No 404s 不要出现404页面
  站点本身里(非搜索结果)出现404页面,无意义的404页面会影响用户体验并且会消耗服务器资源。
  23. Reduce Cookie Size 减小Cookie
  Cookie在服务器及浏览器之间的通过文件头进行交换,尽可能减小Cookie体积,设置合理的过期时间,能够很好的提高效率。
  24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名
  对静态组件的Cookie读取是一种浪费,使用另一个无Cookie的域名来存放你的静态组件式一个好方法,或者也可以在Cookie中只存放带www的域名。
  25. Minimize DOM Access 减少DOM的访问次数
  JS访问DOM是很慢的,尽量不要用JS来设置页面布局。
  26. Develop Smart Event Handlers 开发灵活的事件处理句柄
  DOM树上过多的元素被加入事件句柄的话,反应效率肯定会低,YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄
  27. Choose < link >over @import 使用< link >而非 @import
  在IE中使用@import就和在页面底部用< link >一样,我们前面说要把< link >放顶部的。
  28. Avoid Filters 避免过滤器的使用
  如果需要Alpha透明,不要使用AlphaImageLoader,它效率低下而且只对IE6及以下的版本适用,用PNG8图片。如果你非要使用,加上_filter以免影响IE7+用户。
  29. Optimize Images 优化图片
  将你的GIF转为PNG8会是个减小体积的好办法,另外有很多方法处理你的JPGPNG图片以达到优化效果。
  30. Optimize CSS Sprites 优化CSS Sprites
  在CSS Sprites中竖直并尽量紧凑的排列图片,尽量将颜色相似的图片排在一起,会减小图片本身的大小及提高页面图片显示速度。
  31. Don’t Scale Images in HTML 不要在HTML中缩放图片
  图片要用多大的就用多大的,1000X1000的图片被width=”100″ height=”100″以后,本身的KB数是不会减少的。
  32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它
  站点的浏览器ICO应该不是经常换吧,那就长时间的缓存它,并且最好控制在1K以下。
  33. Keep Components under 25K 保证组件在25K以下
  iPhone不能缓存25K以上的组件,并且这还是要在被压缩前。
  34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中
  就好像在邮件中加入附件一样,一个HTTP请求就够了,但是这一技术需要确保你的代理支持,iPhone就不支持。

 

Yslow

标签:main   exp   图片   文档   问题   pts   handler   tom   静态缓存   

原文地址:http://www.cnblogs.com/hehuiself/p/7100094.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!