yslow3.1.2

#4 This post is part of the Velocity countdown series. Stay tuned for the articles to come.

＃4这篇文章是Velocity倒数系列的一部分。 请继续关注未来的文章。

I'm working on tomorrow's kind of big thing, so will take it easy today, with a stroll down memory lane.

我正在研究明天的大事，所以今天走一走就可以轻松了。

I was clearing up my space at home few days ago and came across this oldish notepad. In there (among the usual amount of lists of todos and ideas in the spirit of i-wanna-do-this-tool/site/experiment!) I found these early sketches of what has since become YSlow 2.0. These are all still pretty relevant, so why not take a minute to review them and get acquainted with the YSlow internals.

几天前，我正在清理家里的空间，偶然发现了这个古老的记事本。 在这里(按照i-wanna-do-this-tool / site / experiment的精神，在通常的待办事项和想法清单中！)，我发现了这些后来成为YSlow 2.0的草图。 这些都仍然很相关，所以为什么不花一点时间来复习它们并熟悉YSlow内部。

Back at the time Steve Souders and I had just released YSlow 0.9 and Steve had moved to Google. It was the right time to have a quick bugfix-or-two release of YSlow 1.0 and in parallel get cranking on a complete YSlow 2.0 rewrite.

那时，我和Steve Souders刚刚发布了YSlow 0.9 ，Steve移居到Google。 是时候发布快速修正错误或发布两个YSlow 1.0，并同时进行完整的YSlow 2.0重写了。

The motivation behind the total rewrite was (aside from the usual "I didn't make this mess" ego-driven desire to start fresh and do a better job the second time around) was that we were getting a lot of "meh, these are Yahoo's problems/rules, not yours". For example a normal mere mortal blog with no CDN budget should still try to get an A in most other checks. Another, somewhat forward thinking, as opposed to reactive reason was that I was a big fan of letting others contribute rules and checks of their own. The idea was to make YSlow your own tool, not only Yahoo's. For example if you want to set a rule that there should be no more than 5 images on a page, you should be able to codify this into a rule. And share the rule with the rest of team or the world. (Here's an example). Another thing was also to decouple the tool from Firebug. Make it work without Firebug and even without Firefox. Go back to having a bookmarklet version (Steve's original very first version) and versions for other browsers. (Thanks to Marcel Duran this is also becoming a reality now)

完全重写背后的动机是(除了通常的“我没有让这个烂摊子”，自我驱动的渴望重新开始，并在第二次工作中做得更好)是，我们得到了很多“嗯，这些是Yahoo的问题/规则，而不是您的问题/规则”。 例如，没有CDN预算的普通纯属虚构的博客仍应设法在大多数其他检查中获得A。 与React式理性相对，另一种有点前瞻性的思维是我非常乐于让别人贡献自己的规则和检查。 这个想法是让YSlow成为您自己的工具，而不仅仅是Yahoo的工具。 例如，如果您要设置一个规则，即一个页面上的图像不得超过5张，则应该可以将其编入规则。 并与团队其他成员或世界分享规则。 (这是一个示例)。 另一件事是将工具与Firebug分离。 使它在没有Firebug的情况下甚至在没有Firefox的情况下也可以工作。 返回到具有书签版本(Steve最初的第一个版本)和其他浏览器的版本。 (感谢Marcel Duran，这现在也已成为现实)

So the new architecture (a big name for a bunch of objects) was conceived on these sketches while en route a red-eye flight to Bulgaria. My little kids were asleep taking over my seat as well, so here I was standing up in the aisle on the plane or sitting on the seat's handrail, scribbling these notes.

因此，在向保加利亚进行红眼飞行时，这些草图中构思了新的体系结构(一堆物体的大名)。 我的小孩们也都睡着了，接管了我的座位，所以在这里我站在飞机的过道上，或者坐在座位的扶手上，these着这些笔记。

The main idea was divide and conquer. Split this monolithic piece of code into smaller components.

主要思想是分而治之。 将此单片代码拆分为较小的组件。

When you run YSlow, it starts by "peeling off" the page, extracting all possible information. Hence the Peeler singleton.

当您运行YSlow时，它首先“剥离”页面，提取所有可能的信息。 因此， Peeler单身人士。

Peeler has methods such as getJavaScript() and getDocuments() (as in document + any frames). This can work most anywhere (bookmarklet too). Then if YSlow is running inside Firebug and has access to Net Panel (or any other browser or environment that lets you access stuff happening on the network, not only DOM crawling), it can also find things such as XHR requests or image beacons, which are not part of the DOM, using a NetMonitor listener object of some sorts.

Peeler具有诸如getJavaScript()和getDocuments() (如document +任何框架中一样)。 这在大多数地方都可以使用(书签也是如此)。 然后，如果YSlow在Firebug中运行并且可以访问Net Panel(或其他任何可以让您访问网络上发生的事情的浏览器或环境，不仅是DOM爬网)，它还可以找到诸如XHR请求或图像信标之类的内容。使用某种NetMonitor侦听器对象不属于DOM。

Whatever Peeler finds, it sticks into a ComponentSet which is just an array of components along with some convenience methods such as getComponentsByType('css').

无论Peeler找到什么，它都会粘贴到ComponentSet ，该ComponentSet只是一个组件数组以及一些便捷方法，例如getComponentsByType('css') 。

Moving on, the ComponentSet contains Component objects which have all the data, like headers, type, content, URL, the whole thing.

继续前进， ComponentSet包含具有所有数据的Component对象，例如标头，类型，内容，URL和整个对象。

K, now we have a bunch of components waiting and willing to be inspected. To make this inspection as lego-like as possible, there's no big-ass inspector, but there are many little Rule objects. Each Rule object has a bunch of properties like name, URL with more info, etc, but the main thing is - it needs to implement a lint() method. The lint() method takes a reference to the ComponentSet and then returns a Result object.

K，现在我们有一堆组件正在等待并且愿意接受检查。 为了使这种检查尽可能地像乐高玩具一样，没有大检查器，但是有很多小Rule对象。 每个Rule对象都有一堆属性，例如name ，具有更多信息的URL等，但主要是-它需要实现lint()方法。 lint()方法引用ComponentSet ，然后返回Result对象。

The Result objects are fairly simple - they have a grade/score, message and optionally a list of offending components (e.g. images without Expires header). A bunch of result objects make a ResultSet which has methods to get the final total score.

Result对象非常简单-它们具有等级/分数，消息以及可选的违规组件列表(例如，没有Expires标头的图像)。 一堆结果对象组成一个ResultSet ，该方法具有获取最终总分的方法。

A bunch of Rule objects go into a RuleSet. The idea is to mash those up as you wish. So a Rule object is for example "Use CDN". (it's also configurable, e.g. how many score points to take away for each offender). Also within a RuleSet you can define what is the relative weight of each Rule. E.g. is F on "Expires" rule as bad as F on "CSS expressions". You can create your own RuleSets (e.g. "Small blog") including an configuring any of the existing rules you like and also add more custom Rules. It's one big happy pool of Rules to pick from and configure. In fact YSlow 2.0 shipped with three rulesets - the new one with more rules, the old yslow1 and a "small site or blog"

一堆Rule对象进入RuleSet 。 想法是按照您的意愿将它们捣碎。 因此， Rule对象例如是“使用CDN”。 (它也是可配置的，例如，每个罪犯可以带走多少分数)。 同样，在RuleSet您可以定义每个Rule的相对权重。 例如，“ Expires”规则上的F与“ CSS表达式”上的F一样差。 您可以创建自己的RuleSet (例如，“ Small blog”)，包括配置所需的任何现有规则，还可以添加更多自定义Rules 。 这是可供选择和配置的一大堆规则。 实际上，YSlow 2.0附带了三个规则集-新规则集包含更多规则，旧yslow1和一个“小型网站或博客”

At the end there is one central lint() method which takes a RuleSet, loops over the Rules in it, calls each Rule's lint() and collects the results into a ResultSet.

最后，有一个中央的lint()方法，它使用一个RuleSet ，循环遍历其中的Rule ，调用每个Rule的lint()并将结果收集到ResultSet 。

From there it's a question of rendering the ResultSet, grades, offenders, etc. Additionally there are tools that can run on the ComponentSet (e.g. JSLint) and stats. In addition to the YSlow UI, you should be able to render these results in any way you like, including exporting a JSON or whathaveyou.

从那里开始，存在一个渲染ResultSet ，等级，违规者等的问题。此外，还有一些可以在ComponentSet上运行的工具(例如JSLint)和统计信息。 除了YSlow UI，您还应该能够以自己喜欢的任何方式呈现这些结果，包括导出JSON或其他内容。

ew！ (Whew!)

I may have missed some details but that's about all there is to the core of YSlow 2.0

我可能错过了一些细节，但这就是YSlow 2.0核心的全部

Here's also a presentation that talks about these things and offers some diagrams that hopefully clarify even further

这也是一个讨论这些事情的演示，并提供了一些图表，希望可以进一步阐明

谢谢阅读！(Thanks for reading!)

That was it for today, only 4 days to go to Velocity. Hope you learned something you can use and you're ready to start coding your own rules and create rulesets to customize what YSlow can do for you.

到今天为止，仅4天即可到达Velocity。 希望您学到了可以使用的东西，并准备开始编写自己的规则并创建规则集以自定义YSlow可以为您做的事情。

To stay connected, there's now a Facebook page for YSlow and there's always the YDN (Yahoo! Developer Network) section about YSlow

保持联系，现在有用于YSlow的Facebook页面，并总是有YDN(雅虎开发者网络)部分有关的YSlow

Tell your friends about this post on Facebook and Twitter

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

翻译自: https://www.phpied.com/yslow-2-0-the-first-sketches/

yslow3.1.2