前端诊断与调优技巧（YSlow与PageSpeed）

2018-09-20

工具

YSlow

PageSpeed
[^-^]:- dynaTrace Ajax

一、工具比较

工具	优点	缺点
YSlow	1.基于yahoo的23条准则进行分析 2.支持查看内网效率	纯英文
PageSpeed	1.支持中文 2.提供了基于Web服务器的模块 3.可分析手机页面速度	无法查看内网页面效率
dynaTrace Ajax	–	–

二、工具使用与分析

1.YSlow

YSlow是比较常见的性能监控插件，依赖于Firebug，是依托于yahoo的23条准则进行判断的。

1.1安装
安装firebug
firebug
安装Yslow
Yslow

1.2使用
1.打开firebug

2.查看YSlow，可以看到当前页面的整体评分，以及23条原则对应的打分
YSlow
3.每条打分对应的原因可以点击查看（可以看到当前gzip打分为F，具体原因及解释都有相应解释）

4.statistics界面提供了界面的缓存信息（左为无缓存时的大小，右为做缓存后页面的大小），便于分析有哪些内容可以使用本地缓存来降低对服务器的压力。

2.3分析
对页面的分析,YSlow已经给出相应建议

2.PageSpeed

PageSpeed是Google开发的前端分析工具，使用简单，分析明确，但是不支持内网页面

2.1 安装
通过谷歌浏览器拓展程序下载对应插件即可

2.2使用
使用简单，直接把需要分析的页面链接放到数据框即可，下图为分析https://www.processon.com/的结果
processon分析

2.3分析
需要调优的内容已经很贴心的都进行了提示

参考
Yslow-23条规则
 dynaTrace Ajax：前端性能分析利器

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

大树，<br>人在首都，就职猪厂,<br>测试开发一枚<br><br>骐骥一跃不能十步，驽马十驾功在不舍<br><br>qq:565506019<br>