YSlow老矣尚能饭否

                                                               ————BrowserInsight 前端调研

最近的项目到了前端性能优化的阶段了，很久以前用 yslow 来做页面分析，这次下载之后装了老半天，然后点击居然没反应，我去！难不成我装了小白鼠版本？卸载了又装，装了又卸载。最后无奈。。。。。google 一下。


为什么我的 YSlow 用不了 - Firefox 火狐浏览器 - 火狐社区(http://mozilla.com.cn/thread-325379-1-1.html)
火狐中 yslow 点击运行没有反应,是为什么,版本不兼容吗?...._火狐社区 (http://mozilla.com.cn/thread-335167-1-1.html)
火狐浏览器中有 yslow 插件,前一天运行的好好的,第二天就..._百度知道(http://zhidao.baidu.com/link?url=u3UZb3oQ0sEzuKmgI07hL4fsG-SOALRy3j0w8TkPIe38omP1aiDSe1xwW7qTokAl_jVWLDE7p3bIr_xBBUlYk_)


看了几个帖子，原来 yslow 在最新的谷歌和火狐浏览器下已经无法使用了，开发者难道出去度假了？
转了一圈明白了，最新的火狐浏览器有了自己的调试工具，不在需要安装 Firebug 了，而 yslow 依赖于 Firebug 的，故而，yslow 就在火狐浏览器上玩不转了。
还好 yslow 有谷歌浏览器插件，下载之后折腾了半天，装上后，依然是点击没有反应。。。。唉！
以前老用 yslow 的评分做自我考核，现在 yslow 挂掉了，尺子没了，感觉路都走不稳了，看了下官网界面
              
我明白了！肯定是 yslow 开始混 node 社区了，不和谷歌还有火狐浏览器玩了。
上 npm 网站搜索下，不出所料，很多围绕 yslow 的插件，还有封装为服务的，可见nodejs+PhantomJS 配合还是蛮好的
我本地试用了下这几个版本的组建：
"yslowjs":"0.3.2"
"jQuery":"1.7.4"
"url":"0.11.0"
"jsdom":"3.1.2"
可以解析网页标题 然后出评分
                


代码很简单


whyslow.js

简单的调用下
var YSlow = require('yslowjs');
var request = require('request');
var jquery = require('jquery');
module.exports = function(siteUrl, callback)
{
makeRE(siteUrl, function(err, title) {
       if (err) {
                    callback(err)
                  } else {
                            getYSlow(siteUrl,function (err,result) {
                                             callback(null,title,result)
                             })
                 }
         })
   }
       function makeRE(siteUrl, callback) {
                     request(siteUrl, function(error, response, body) {
                                   console.log(response.statusCode)
                                   if (!error && response.statusCode == 200) {
                                              // console.log(body)
                                               getTitle(body, function(err, title) {
                                                           callback(err, title)
                                             })
                                   } else {
                                               console.log(error)
                                               callback(error)
                                  }
                   })
        }
        function getTitle(cont, callback) {
                    var env = require('jsdom').env,
                         html = cont;
                     // first argument can be html string, filename, or url
                     env(html, function(errors, window) {
                                    if (errors) {
                                                       callback(errors)
                                }    else {
                                              var $ = require('jquery')(window);
                                               var title = $('head>title').text();
                                                  callback(null, title)
                        }
            })；
            }
            function getYSlow(siteUrl,callback) {
                          console.log('getYSlowURL')
                          console.log(siteUrl)
                          var yslow = new YSlow(siteUrl, ['--info', 'grade']); //(basic|grade|stats|comps|all) [all],
                          console.log('\nRunning (Async)....');
                          yslow.run(function(error, result) {
                                   if (error) {
                                                console.trace(error);
                                                callback(error)
                                   } else {
                                              console.log('=> overall:   ' + result.o);
                                              console.log('=> load time: ' + result.lt);
                                              callback(null,result)
                         }
                 });
}

yslow.js
var whyslow = require('./webgrade/whyslow');
var fs = require('fs');
console.log('===')
whyslow('http://bbs.linuxtone.org/forum.php', function(err, title, result) {
              console.log('===')
              if (err) {
                          console.log(err)
               } else {
                           console.log(result)
                           console.log(title)
                            var str = JSON.stringify(result);
                            fs.writeFileSync('./schema/yslow.json', str, {
                                        encoding: 'utf8'
                              });
                      }
})
看下结果(我承认，有些乱。。。)
webjs@webjs-upc:~/codepalce/nodejslearn/app$ node yslow.js
===
200
getYSlowURL
http://bbs.linuxtone.org/forum.php


Running (Async)....
=> overall:   75
=> load time: 16111
===
{ w: 925579,
   o: 75,
   u: 'http%3A%2F%2Fbbs.linuxtone.org%2F',
   r: 99,
   i: 'ydefault',
  lt: 16111,
  g:
  { ynumreq:
            { score: 20,
              message: 'This page has 12 external Javascript scripts.  Try combining them into one.\nThis page has 4 external stylesheets.  Try combining them into one.\nThis page has 18 external background images.  Try combining them with CSS sprites.',
            components: [] },
            ycdn:
             { score: 0,
           message: 'There are 97 static components that are not on CDN. <p>You can specify CDN hostnames in your preferences. See <a href="https://github.com/marcelduran/yslow/wiki/FAQ#wiki-faq_cdn">YSlow FAQ</a> for details.</p>',
          components: [Object] },
           yemptysrc:
            { score: 100,
           message: '', components: [] },
          yexpires:
             { score: 0,
         message: 'There are 13 static components without a far-future expiration date.',
        components: [Object] },
         ycompress:
        { score: 56,
       message: 'There are 4 plain text components that should be sent compressed',
       components: [Object] },
  ycsstop:
    { score: 100,
   message: '',
components: [] },
yjsbottom:
    { score: 100,
   message: '',
  components: [] },
yexpressions:
{ score: 58,
message: 'There is a total of 16 expressions',
components: [Object] },
yexternal:
{ message: 'Only consider this if your property is a common user home page.',
components: [Object] },
ydns:
{ score: 70,
message: 'The components are split over more than 4 domains',
components: [Object] },
yminify:
{ score: 90,
message: 'There is 1 component that can be minified',
components: [Object] },
yredirects:
{ score: 100,
message: '',
components: [] },
ydupes:
{ score: 100,
message: '',
components: [] },
yetags:
{ score: 100,
message: '',
components: [] },
yxhr:
{ score: 100,
message: '',
components: [] },
yxhrmethod:
{ score: 100,
message: '',
components: [] },
ymindom:
{ score: 69,
message: 'There are 1448 DOM elements on the page',
components: [] },
yno404:
{ score: 100,
message: '',
components: [] },
ymincookie:
{ score: 100,
message: '',
components: [] },
ycookiefree:
{ score: 95,
message: 'There is 1 component that is not cookie-free',
components: [Object] },
ynofilter:
{ score: 100,
message: '',
components: [] },
yimgnoscale:
{ score: 100,
message: '',
components: [] },
yfavicon:
{ score: 95,
message: 'Favicon is not cacheable',
components: [] }
}
}

yslow 渐渐衰落也有一定原因


1.yslow 主要是页面结构分析，但是现在界面主要靠 js 绘制例如 react 等

2.yslow 主要用于 pc 上的浏览器，但是目前前段研究重点已经转向 mobile。

3.HTML5 接口包中的 window.performance 对象包含了判断一个网页加载状态和快慢的相关属性，移动端 也支持这个接口，安卓支持的最好，苹果最新版本操作系统也支持
悄悄话：其实就是浏览器把 yslow 干的事情自己给干了，But。。。。。。只干了一点点点点
寻找 yslow 的接盘侠
前段时间逛“前端乱炖”，在这篇帖子 "1024 征服高冷测试女神"中发现了一个专业收集浏览器错误信息和性能指标信息的工具—— OneAPM 的 Browser Insight，我猜测window.performance 也一定收集了，否则哪来性能指标呢？
在这个前端性能监控工具的源代码 (http://bi-collector.oneapm.com/static/js/bw-loader-411.4.5.js) 里面搜了下 window.performance ，果然有!
                  

毕竟都是靠 js 收集客户端信息，所以部署方式和谷歌统计一样。
关于 window.performance 里面各个属性的含义，以及在前端性能优化过程中如何去使用比较这些值，
之后有机会再聊吧~
下面是一张 Browser Insight 中一个应用模块各种指标的截图，个人觉得既清楚又形象。