前端性能测试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安装使用

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