前端性能测试yslow安装使用

作者: 卜了了 | 来源:发表于2018-07-19 16:26 被阅读18次

之前一直是想在谷歌浏览器中安装yslow,无奈失败,后面是当时的参考资料https://yq.aliyun.com/articles/530398
我这里是在火狐上安装的,mac中亲测有效。

一、安装火狐的过程

低版本的获取地址
http://ftp.mozilla.org/pub/firefox/releases/

安装时Mac提示已损坏你应该将它移到废纸篓---
这里我连续下载了好几个,后发现不对头,怎么可能都是坏的呢,于是查找资料,发现:
并非你安装的软件已损坏,而是Mac系统的安全设置问题,因为这些应用都是破解或者汉化的,那么解决方法就是临时改变Mac系统安全设置。
解决方法:
修改系统配置:系统偏好设置... -> 安全性与隐私。修改为任何来源
如果没有这个选项的话说明你的系统已更新到了 (macOS Sierra 10.12 以上的了)
需要用终端处理:
打开终端,执行

sudo spctl --master-disable 

同时,还要执行

 sudo spctl --master-disable Rference

此时重新打开 系统偏好设置... -> 安全性与隐私 会发现多了一个 “任何来源”
选择任何来源。

再次执行安装,低版本火狐终于安装好了(不再已损坏的提示)。
如果已经安装了最新版的话,在安装的时候开业兼容两者,我当时直接点的替换,点完才发现还有兼容这种操作。

又遇到的问题:下载的浏览器的语言不是中文,也不是英文。。于是,下载了一个又一个。。破解了半天语言转换,发现不行,

今天安装的火狐
最后找到为什么语言不对,是下载的时候没有选择对,应该选择zh-CN的
00.jpg
最后下的是版本33,中文版
因为yslow只能在低的版本中使用,所以要记得设置为不更新:
Firefox--首选项
高级-更新中选择为不更新
屏幕快照 2018-07-19 16.02.26.png

二、安装yslow组件

在工具-附加组件,先安装firebug,再安装yslow。
可能因为版本足够低,于是可以直接在组件中找到

使用

1,启动yslow
打开需要进行分析的页面,点击firebug小图标,打开firebug后,即可看到yslow选项,点击yslow即可打开


屏幕快照 2018-07-19 16.09.57.png

点击“Run test”
得出当前页面的等级从A到F,A为最优,这里是 Grade B

第2个选项卡:Grade


image.png

第3个选项卡componets,点击进入

通过Componets查看网页各个元素占用的空间大小,这里,下面的image所占比较大。后面可以进一步点开看是哪些地方的图片较大。


image.png

第4个选项卡statitics,点击进入(统计信息),
在这个菜单下可以看到前端网页静态页面,
左侧是页面元素在空缓存的加载情况,右侧为页面元素使用缓存后的页面加载情况。从图中可以看出这个网页在空缓存时24个http请求,网页大小为479.5k。使用缓存后为18个请求、4.8k。


image.png

第5个选项卡,Tools


image.png

JSLint 是一个强大的工具,可以检验HTML代码以及内联的JavaScript代码,通过它可以发现js错误
ALL JS:查看当前网页一共引用了多少JS
每条后面有解释,不再一一抄写了~

相关文章

  • 前端性能测试yslow安装使用

    之前一直是想在谷歌浏览器中安装yslow,无奈失败,后面是当时的参考资料https://yq.aliyun.com...

  • 前端性能分析工具推荐:YSlow

    YSlow 工具名称就叫做YSlow。是Firefox浏览器的一个前端站点性能分析工具,可以先安装firebug后...

  • Google检测网页性能的工具PageSpeed Insight

    在这之前,测试网页前端性能我用的是雅虎的Yslow,也是由于很久没测试过网页前端的东西了,没怎么关注前端这块。 P...

  • 前端诊断与调优技巧(YSlow与PageSpeed)

    工具 YSlow PageSpeed 一、工具比较 二、工具使用与分析 1.YSlow YSlow是比较常见的性能...

  • 前端调优——YSLOW工具

    前端调优——YSLOW工具 在性能测试过程中,我们关注的响应不仅仅是服务器端的处理,还有前端页面的响应时间,那么前...

  • 性能优化工具之YSlow

    YSlow: YSlow的使用 https://devework.com/yslow.html点击YSlow按钮,...

  • Web性能优化

    Web性能优化方案有很多,最著名的的当然要属YSlow团队的“Web性能最佳实践和规则”。这里结合近年来前端的发展...

  • 前端页面优化

    前端性能测试和调优 讲到性能测试,除了后台的之外,还有一部分是前台的性能测试,前端的性能测试这里主要需要尊从以下规...

  • YSlow团队提出的“23条 Web 性能最佳实践和规则”

    以下规则是来自 YSlow 团队对 Web 性能总结出来的规则。随着 Web 前端技术的发展以及新技术的不断涌现,...

  • 2018-04-04

    对于web页面的性能测试分为:前端、后端的测试 首先,我们来明确下你的性能测试目的,你的目的是服务端的性能还是前端...

网友评论

    本文标题:前端性能测试yslow安装使用

    本文链接:https://www.haomeiwen.com/subject/pvbzpftx.html