YSlow 老矣尚能饭否

 赵保森  2015-11-04

 6916

 0

YSlow 前端性能优化

----Browser Insight 前端调研

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

为什么我的 YSlow 用不了 - Firefox 火狐浏览器 - 火狐社区

火狐中 yslow 点击运行没有反应,是为什么,版本不兼容吗?...._火狐社区

火狐浏览器中有 yslow 插件,前一天运行的好好的,第二天就..._百度知道

看了几个帖子，原来 yslow 在最新的谷歌和火狐浏览器下已经无法使用了，开发者难道出去度假了？

转了一圈明白了，最新的火狐浏览器有了自己的调试工具，不在需要安装 Firebug 了，而 yslow 依赖于 Firebug 的，故而，yslow 就在火狐浏览器上玩不转了。

还好 yslow 有谷歌浏览器插件，下载之后折腾了半天，装上后，依然是点击没有反应。。。。唉！

以前老用 yslow 的评分做自我考核，现在 yslow 挂掉了，尺子没了，感觉路都走不稳了，看了下官网界面

YSlow 老矣尚能饭否技术分享第1张

我明白了！肯定是 yslow 开始混 node 社区了，不和谷歌还有火狐浏览器玩了。

上 npm 网站搜索下，不出所料，很多围绕 yslow 的插件，还有封装为服务的，可见nodejs+PhantomJS 配合还是蛮好的

我本地试用了下这几个版本的组建：

"yslowjs":"0.3.2" "jQuery":"1.7.4"
"url":"0.11.0" "jsdom":"3.1.2"

可以解析网页标题然后出评分

YSlow 老矣尚能饭否技术分享第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. You can specify CDN hostnames in your preferences. See YSlow FAQ for details.', 
        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 渐渐衰落也有一定原因

yslow 主要是页面结构分析，但是现在界面主要靠 js 绘制例如 react 等
yslow 主要用于 pc 上的浏览器，但是目前前段研究重点已经转向 mobile。
HTML5 接口包中的 window.performance 对象包含了判断一个网页加载状态和快慢的相关属性，移动端也支持这个接口，安卓支持的最好，苹果最新版本操作系统也支持

悄悄话：其实就是浏览器把 yslow 干的事情自己给干了，But。。。。。。只干了一点点点点