yslow chrome

If you haven't seen it yet, YSlow for Chrome hit the streets couple of weeks ago. (And Google's own PageSpeed did too yesterday. (And there's now DynaTrace for Firefox. (And WebPageTest for Chrome. (What a month for x-browsering (word?) the performance tools! (And the month's not even over yet)))))

如果您还没有看到， Chrome的YSlow几周前就出现在了大街上。 (而且Google自己的PageSpeed昨天也做过。(现在有适用于Firefox的DynaTrace 。(以及适用于Chrome的WebPageTest 。)(性能浏览工具需要x个月浏览(单词？)？(这个月还没有结束))) ))

BTW, I closed all the parentheses (or else...).

顺便说一句，我关闭了所有括号(否则... )。

So anyway, I was eavesdropping on a twitter conversation where Sergey (of ShowSlow) was asking for beacons from YSlow for Chrome, more specifically - when will they start working. I thought I should check how my old baby YSlow 2.0 (this presentation is still pretty relevant) is doing in its new environment.

因此，无论如何，我正在窃听Twitter对话，其中Sergey (来自ShowSlow )正在向YSlow请求Chrome的信标，更具体地说-他们何时开始工作。 我想我应该检查一下我的大婴儿YSlow 2.0 (这个演示仍然很有意义)在新环境中的表现。

慢速2.0 (YSlow 2.0)

In YSlow 2.0 things are pretty decoupled. Makes it easier to bring to any possible environment or browser. So rules are rules (you can add, remove, tweak them, combine them into rulesets), results are results, presentation is separate, and so are the additional tools, HAR import/export (forthcoming), etc. Only (ideally) small additions are needed to glue the core of YSlow (the linting part) with a new environment.

在YSlow 2.0中，事情已经解耦了。 使它更容易带入任何可能的环境或浏览器。 因此，规则就是规则(您可以添加，删除，调整它们，将它们组合成规则集)，结果是结果，表示形式是分开的，其他工具，HAR导入/导出(即将推出)等也是如此。需要添加一些新的环境来粘合YSlow的核心(棉绒部分)。

在Chrome中 (In Chrome)

It's my first time touching anything Chrome-y, but turned out its pretty easy. Just a bit of file system hunting revealed where code for the extension goes.

这是我第一次接触任何Chrome-y，但事实证明它非常简单。 只是一点文件系统搜寻就揭示了扩展代码的去向。

/Users/[USERNAME]/Library/Application Support/Google/Chrome/Default/Extensions/[WEIRD-EXTENSION-ID]/

/Users/[USERNAME]/Library/Application Support/Google/Chrome/Default/Extensions/[WEIRD-EXTENSION-ID]/

e.g.

例如

/Users/stoyanstefanov/Library/Application Support/Google/Chrome/Default/Extensions/ninejjcohidippngpapiilnmkgllmakh/

/Users/stoyanstefanov/Library/Application Support/Google/Chrome/Default/Extensions/ninejjcohidippngpapiilnmkgllmakh/

On Windows:

在Windows上：

C:\Documents and Settings\[USERNAME]\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\ninejjcohidippngpapiilnmkgllmakh\

C:\Documents and Settings\[USERNAME]\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\ninejjcohidippngpapiilnmkgllmakh\

In there you can find three JavaScript files. I could be wrong but here's what I think goes in there:

在其中可以找到三个JavaScript文件。 我可能是错的，但这是我的想法：

1. yslow-chrome.js looks like it contains the reusable parts - rules, etc - packaged for Chrome minus the Firefox stuff and bundled into a single file

   yslow-chrome.js看起来包含了可重复使用的部分-规则等-为Chrome打包，减去了Firefox内容，并捆绑到一个文件中

2. content.js is small and not too exciting

   content.js很小，不太令人兴奋

3. controller.js is the Chrome-related parts

   controller.js是与Chrome相关的部分

In controller.js is where we hack.

在controller.js中，我们可以进行黑客攻击。

YSlow事件 (YSlow events)

In YSlow 2.0 we decided to make use of a simple observer pattern implementation and fire events whenever interesting stuff happens. Especially useful since figuring all the data for all resources better be asynchronous.

在YSlow 2.0中，我们决定使用简单的观察者模式实现，并在发生有趣的事件时触发事件。 由于计算所有资源的所有数据最好是异步的，因此特别有用。

Once yslow "peels" the page figuring out the components, gets each component data, headers, etc, then runs the lint rules, finally it fires a lintResultsReady event.

yslow一旦“剥离”了页面，找出了组件，获取了每个组件的数据，标题等，然后运行了lint规则，最后将触发lintResultsReady事件。

("Peeling a page" I heard for the first time from Steve Souders and for what I know he should be credited with this term describing the activity of figuring all components that go into a page)

(我第一次听到Steve Souders所说的“剥离页面”，因为我知道他应该用这个术语来描述页面中所有组成部分的活动)。

All we need to do is listen to this event and send the beacon.

我们需要做的就是监听此事件并发送信标。

YSLOW.util.event.addListener(
  'lintResultReady', 
  function (o) {
    //...b-b-beacon! ...
  }
);

There's a YSLOW.util.sendBeacon() which does precisely that, so we need to call it and we're done.

有一个YSLOW.util.sendBeacon()正是这样做的，所以我们需要调用它并完成。

首选项 (Preferences)

Firefox has a built-in (native) system to manage preferences. You know, the stuff you tweak in about:config. This is where we put the preferences - beacon yes/no, beacon URL, beacon data verbosity.

Firefox具有内置的(本机)系统来管理首选项。 您知道，您在about:config调整。 这是我们放置首选项的地方-信标是/否，信标URL，信标数据详细程度。

In Chrome such native preference system probably exists, but YSlow is currently not taking advantage. (Just guessing here.)

在Chrome中，可能存在这样的本机首选项系统，但是YSlow当前没有利用。 (只是在这里猜测。)

Luckily all calls to get preferences are abstracted in YSLOW.util.Preferences.getPref(prefname, defaultvalue). The default value is returned if a better one cannot be found.

幸运的是，所有获取首选项的调用都在YSLOW.util.Preferences.getPref(prefname, defaultvalue)中抽象。 如果找不到更好的值，则返回默认值。

So we can just overwrite the getPref() method to return the default value, unless it's a preference we care about, such as the beacon URL:

因此，我们可以覆盖getPref()方法以返回默认值，除非它是我们关心的首选项，例如信标URL：

YSLOW.util.Preference.getPref = function(what, defaultval) {
  switch (what) {
    case 'beaconUrl':
      return 'http://www.phpied.com/beacon.png';
    case 'beaconInfo':
      return 'all'; // or "basic"
    default:
      return defaultval;
  }
};

积分 (Integration)

As mentioned we'll hack into the controller.js, we don't want to touch the yslow core stuff. The controller.js is just one immediate function and our hack goes right before the last line. (Or even after it, probably doesn't matter)

如前所述，我们将侵入controller.js ，我们不想触及yslow核心内容。 controller.js只是一个即时功能，我们的技巧就在最后一行之前。 (或者即使之后，也可能没关系)

(function () {
    // ... yslowy stuff ...
 
    // hack start
    // ...
    // hack end
 
    doc.ysview.setSplashView(...
}());

The complete thing is something like:

完整的事情是这样的：

(function () {
 
    // ... slo, slo ...
 
    // hack start
    YSLOW.util.Preference.getPref = function(what, defaultval) {
      switch (what) {
        case 'beaconUrl':
          return 'http://www.phpied.com/beacon.png';
        case 'beaconInfo':
          return 'all'; // or "basic"
        default:
          return defaultval;
      }
    };
 
    YSLOW.util.event.addListener('lintResultReady', function (o) {
      var con = o.yslowContext,
          result = con.result_set;
      YSLOW.util.sendBeacon(result.url, result.overall_score, con);
    });
    // hack end
 
    doc.ysview.setSplashView(...
}());

结论 (Conclusion)

So there - you can run YSlow in Chrome and send yourself (or showslow.com) beacons.

因此，在那里-您可以在Chrome中运行YSlow并发送自己(或showslow.com )信标。

You probably don't need that so bad that you can't wait till next YSlow for Chrome ships with this thing working. But here it is.

您可能不需要那么糟糕，以至于等到下一个Chrome版YSlow发行时，此功能就可以正常工作了。 但是在这里。

And hopefully you learned a bit about YSlow internals so that you can start hacking yourself and/or wait till YSlow shows up on github (soon!) and start sending diffs. I personally can't wait.

希望您对YSlow的内部知识有所了解，以便可以开始黑客攻击自己和/或等到YSlow出现在github上(很快！)并开始发送差异。 我个人等不及了。

Shoutout goes out to Marcel and Betty who are doing awesome stuff with YSlow (slides). And looks like even more is to come!

大喊大叫的是Marcel和Betty，他们正在使用YSlow(幻灯片)进行出色的处理。 并且看起来还会有更多！

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/yslow-chrome-hacking/

yslow chrome