在前端开发中,常常需要评估页面内容大小,请求数量,以及JS,CSS,图片等各类型文件所占的大小,以及有没有可优化的空间。那么YSlow是您必不可少的选择。
YSlow简介:
YSlow是由Yahoo开发者团队发布的一款评估网站页面性能的工具,主要支持火狐(firefox)浏览器、谷歌(chrome)浏览器、欧朋(opera)浏览器和移动版。如下图:

主页地址:http://developer.yahoo.com/yslow/该网页也明确了网站优化的24条军规。
下面以FireFox为例和淘宝网为例做简单说明,:
1. 安装:在FireFox中点工具----》附加组件---》在搜索框中输入YSlow,点搜索即可,找到组件后点击安装,然后重启浏览器。
2. 启动:按F12在FireBug选项卡最右面有一项YSlow,切换到该项即可,或者在浏览器右下角,单击YSlow图标启动即可。
3. Grade (等级视图),这里提供了F-A 五个等级,A级说明最好,F最差,也就是说可优化的空间更大。如下图所示:

4.Components(组件视图),该视图描述各个元素占用的空间大小如下图所示

5. Statistics(统计信息视图) ,本视图以图形化的形式描述相关类型文件的统计大小等

6. Tools(附助工具视图),本视图描述了YSlow提供的相关工具,可以更深入的对网站引用的JS,CSS等进行具体分析

网站性能最佳体验的34条黄金守则:
http://www.dudo.org/article.asp?id=214内容篇
http://www.dudo.org/article.asp?id=215服务器篇
http://www.dudo.org/article.asp?id=216JavaScript和CSS
http://www.dudo.org/article.asp?id=218图片、Coockie与移动应用
延伸阅读:http://www.cnblogs.com/yslow
分享到:
相关推荐
**yslow前端性能测试工具详解** yslow是Yahoo!开发的一款强大的前端性能分析工具,它通过对网页进行评估,提供优化建议,帮助开发者提高网站的加载速度和用户体验。yslow的核心理念是遵循YSlow规则,这是一套基于...
### Yslow网站前端性能测试工具安装与使用简介 #### 一、引言 在现代互联网应用开发中,网站性能优化已成为提升用户体验的关键因素之一。Yslow是一款由Yahoo!开发的前端性能测试工具,旨在帮助开发者识别并解决...
- **HERA Accessibility testing with Style**:复杂的测试工具,简化WCAG 1.0兼容性问题。 - **Juicy Studio CSS Analyser**:进行色彩对比测试,满足WCAG 1.0的色彩可读性要求。 - **Juicy Studio Readability ...
好的工具可以帮助开发者快速定位问题,优化网站性能,在本文中,我们将推荐一些常用的Web性能测试工具。 一、 Firebug Firebug是Firefox中最为经典的开发工具,可以监控请求头、响应头,显示资源加载瀑布图。...
在本案例中,用户采用了一种自动化测试解决方案,结合了Selenium IDE、YSlow和Showslow三个工具,实现了对导购搜索页面的性能自动化评估。 Selenium IDE是一款基于Firefox的测试录制工具,能够记录用户的浏览器操作...
总结来说,yslow3_1_2是一个强大的Web前端性能分析工具,它基于YSlow规则,提供了一整套评估和改进网页加载速度的方法,对于任何关注网站性能的开发者或测试人员来说,都是一个不可或缺的助手。通过使用这个工具,...
Show Slow 是个开源测试工具,帮助检测各种网站性能指标。它会把页面速度的检测结果排序,有 dynaTrace AJAX 版,WebPageTest 和 YSlow。它会用图形化显示排序结果,帮助用户理解哪些因素会影响网站的性能。 ...
这两个工具的组合使用,不仅能够提升开发效率,而且可以确保网站在性能上达到最佳状态。 在实际操作中,开发者可以先通过Firefox 35.0.1安装Firebug插件,然后在浏览网页时开启Firebug,进行代码调试和性能监控。...
而YSlow的理念被许多现代性能分析工具所采纳,如Google的Lighthouse和Chrome的Audits工具,它们在自动化性能测试和优化建议方面做得更为出色。 总之,Firebug和YSlow作为Web开发的经典组合,为前端工程师提供了强大...
- **3.1.3 使用WebPageTest进行性能分析**:WebPageTest是一个开源的网站性能测试工具,它可以模拟不同的网络条件来测试网站性能。 **3.2 真实用户前端性能监控** - **3.2.1 真实用户前端性能数据采集**:收集真实...
YSLOW与PageSpeed(Google开发的性能分析工具)等工具配合使用,可以提供更全面的性能评估。同时,YSLOW的结果可以导出为CSV或XML格式,方便进一步分析和分享。 **5. 版本3.1.2的改进** YSLOW 3.1.2版本可能包含了...
2. GTmetrix:另一款性能测试工具,提供YSlow和PageSpeed评分,以及详细的优化建议。 3. Webpack、Gulp、Grunt等构建工具:这些工具能自动完成代码压缩、合并、优化等工作,提高开发效率。 四、服务器端优化 1. ...
yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到firefox里就可以自动安装了,但是先要装另外一个插件firebug,在我上传的资源列表里可以找到
常用的前端性能测试工具 - **YSlow/PageSpeed**:通过对网页中的JS、CSS、Image等元素进行静态分析,提供详尽的优化建议。 - **DynaTrace**:提供动态分析能力,不仅记录请求和文件传输时间,还监测浏览器渲染、...
前端工程师高级WEB网站前端开发测试指南旨在为开发人员提供一份完整的前端开发测试指南,涵盖了WEB性能测试工具的使用、页面加载速度的优化、JS操作速度的检测等多方面的内容。下面是对该指南中涉及到的知识点的详细...
为了确保你的网站在各个层面都能表现出色,以下是一些关键的测试工具和它们所关注的性能指标: 1. **网站代码验证**: - **WDG HTML Validator**:这个工具帮助检查HTML语法错误,确保代码符合标准。 - **W3C ...
14. Web Page Analyzer:基于Web的测试工具,提供网站性能分析,包括页面大小、下载时间、压缩潜力等。 15. Site-Perf.com:免费的Web测试服务,测量网站的加载时间,提供性能反馈。 这些工具覆盖了Web测试的多个...
YSlow.3.1.2.crx for Chrome : yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到chrome里就可以自动安装了
了解和应用这些优化策略,并结合YSLOW等工具进行测试和评估,可以帮助开发者大幅提升WEB前端的性能,为用户提供更流畅、更快捷的浏览体验。在实际项目中,不断监测和调整优化措施,将使网站始终保持高效运行。