前端性能测试yslow安装使用

之前一直是想在谷歌浏览器中安装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
每条后面有解释，不再一一抄写了~