工作慢一点_是慢一点吗？

最新推荐文章于 2024-10-06 20:16:20 发布

cunbei2644

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量362

点赞数

文章标签： java python vue linux php ViewUI

原文链接：https://www.phpied.com/yslow-er/

版权

工作慢一点

One of the hidden perks about working at Yahoo! is that you get to interact with a lot of smart people, and even some celebrities in the web dev profession. Rasmus Lerdorf, Douglas Crockford, YUI guys, the list is way too long... Those couple of weeks I had the pleasure of working closely with Steve Souders, chief performance architect, creator of YSlow and author of High-Performance Web Sites. We're in the same team (although he's in the Sunnyvale HQ and I'm in Santa Monica) and this time the project was the new YSlow release. I had a lot of fun, this was one of my first exposures to YSlow's code and to working on a Firefox extension in general.

在Yahoo!工作的隐性特权之一是您可以与很多聪明的人，甚至是网络开发人员中的一些名人互动。 Rasmus Lerdorf ， Douglas Crockford ， YUI的人太长了……这两周我很高兴与首席性能架构师， YSlow的创建者和高性能网站的作者Steve Souders紧密合作。我们在同一个团队中(尽管他在桑尼维尔总部，我在圣莫尼卡)，这次的项目是新的YSlow版本。我玩得很开心，这是我第一次接触YSlow的代码，并开始使用Firefox扩展。

I've blogged before on YSlow, but here's a word in case you're not familiar with this ultra-useful tool for speeding up your web site. YSlow inspects a page you give it for compliance with Yahoo's rules for front-end performance (my SitePoint article on the subject) and hints you how you can speed up your page, using a convenient action-oriented list. In addition to that there is a full list of the page components being inspected and also some other useful tools.

我之前曾在YSlow上发表过博客，但是如果您不熟悉这种超级有用的工具来加快网站速度，这是一个简短的提示。 YSlow检查您提供给它的页面是否符合Yahoo的前端性能规则(关于该主题的我的SitePoint文章)，并提示您如何使用方便的面向操作的列表来加快页面的速度。除此之外，还有要检查的页面组件的完整列表以及一些其他有用的工具。

So what's new?

那么有什么新消息？

网络面板集成 (Net panel integration)

YSlow used to be a DOM crawler, meaning it will look into the current page's DOM tree in order to find components. Firebug's Net panel is a packet sniffer, meaning it reports network traffic. Both of these have drawbacks. A DOM crawler doesn't see all component, like XMLHttpRequests and image beacons that are not part of the DOM. A packet sniffer doesn't see components that are read from the cache.

YSlow曾经是DOM搜寻器，这意味着它将查找当前页面的DOM树以查找组件。 Firebug的“网络”面板是一个数据包嗅探器，这意味着它报告了网络流量。这两个都有缺点。 DOM搜寻器不会看到所有组件，例如XMLHttpRequest和不属于DOM的图像信标。数据包嗅探器看不到从缓存中读取的组件。

Since the new version 0.9 YSlow is a combination of a packet sniffer and a DOM crawler. It will first crawl the DOM, looping recursively through all frames (and their frames, and their frames...) and once done, it will look into what Net panel has listed. The resulting list of components is the union of the two lists.

由于新版本0.9 YSlow是数据包嗅探器和DOM搜寻器的组合。它将首先爬网DOM，递归遍历所有框架(及其框架，以及它们的框架...)，完成后，它将查看“ Net”面板列出的内容。生成的组件列表是两个列表的并集。

So now YSlow catches XMLHttpRequests, image beacons and any other components that are requested but not included in the DOM.

因此，现在YSlow捕获了XMLHttpRequest ，图像信标以及所有其他已请求但未包含在DOM中的组件。

BTW, by image beacon I mean you do something like this in JavaScript but never add it to the DOM of the page: var im = new Image(); im.src="logo.png";

顺便说一句，通过图像信标，我的意思是您在JavaScript中做了类似的事情，但是永远不要将其添加到页面的DOM中： var im = new Image(); im.src="logo.png"; var im = new Image(); im.src="logo.png";

爬行框架 (Crawling frames)

YSlow now recursively crawls frames/iframes to discover components.

现在，YSlow递归爬网框架/ iframe以发现组件。

NET面板工具提示 (a la Net panel tooltips)

When you mouse over an image asset inside the Components view or the Performance view, you now get an image preview, just like in Firebug.

现在，当您将鼠标悬停在“组件”视图或“性能”视图中的图像资产上时，您将获得图像预览，就像在Firebug中一样。

在YSlow内部搜索 (Search inside YSlow)

Another feature you might be used to in Firebug is now part of YSlow.

您可能在Firebug中惯用的另一个功能现在是YSlow的一部分。

突出显示4xx (Highlighting 4xx)

All components that respond with a 4xx status code, like for example 404 Not Found are now highlighted.

现在将突出显示所有以4xx状态代码响应的组件，例如404 Not Found。

大个子-您的分数可能更低！ (The biggie - your score might be lower!)

This may be bad news, or good news, depending on how you look at it. Since now YSlow examines more components (frames, XHR) there is a greater chance that some of the newly discovered components are not following the performance rules. So you get a lower score, which is bad. But it is actually good that you're now informed about more improvements you can make, such as make sure your XHRs calls return gzipped responses.

根据您的看法，这可能是好消息，也可能是好消息。从现在开始，YSlow检查更多的组件(框架，XHR)，因此，一些新发现的组件更有可能不遵循性能规则。这样您会得到较低的分数，这是不好的。但是，现在可以将更多的改进信息告知您，实际上是一件好事，例如确保您的XHR调用返回压缩后的响应。

The following screenshots take you through how YSlow works (now and before).

以下屏幕截图将带您了解YSlow的工作原理(现在和之前)。

检查www.yahoo.com (Examining www.yahoo.com)

If you take a look around on yahoo.com, there are some areas that are only displayed after you mouse over (Mail, Messenger, Radio) or click (Entertainment, Sports, Video, World, Local, etc). The content for the hidden areas is not available on page load. It's requested via XHR or dynamic script tags. What does this mean for examining the page with YSlow? It means that if you run YSlow right after the page is loaded you get one "static" list of components. But if you first mouse over or click around to bring up some extra content and run YSlow afterwards, you'll get a larger list of components. This even results in a different YSlow grade.

如果您在yahoo.com上浏览，则只有在将鼠标悬停在(邮件，信使，广播)或单击(娱乐，体育，视频，世界，本地等)之后，才会显示某些区域。隐藏区域的内容在页面加载时不可用。通过XHR或动态脚本标签进行请求。用YSlow检查页面意味着什么？这意味着，如果在页面加载后立即运行YSlow，则会获得一个“静态”组件列表。但是，如果您首先将鼠标悬停或单击以显示一些额外的内容，然后再运行YSlow，则将获得更多的组件列表。这甚至导致不同的YSlow等级。

The new YSlow version will give you an even larger list of components as it now includes XHRs among others.

新的YSlow版本将为您提供更大的组件列表，因为它现在包括XHR。

运行YSlow 0.8。初始加载后立即在yahoo.com上访问 (Running YSlow 0.8. on yahoo.com right after initial load)

YSlow gives an A (95) which is pretty impressive for such a busy page. The total number of examined components is 34.

YSlow给出了A(95) ，对于如此繁忙的页面而言，这是非常令人印象深刻的。检查的组件总数为34 。

运行YSlow 0.8。经过严重的活动后在yahoo.com上 (Running YSlow 0.8. on yahoo.com after some serious activity)

Now I reloaded the page, and hovered over and clicked anything that I believed that will result in extra components being downloaded.

现在，我重新加载了页面，将鼠标悬停并单击了我认为会导致下载额外组件的任何内容。

The result is YSlow grade of B (88) now based on the 92 components being inspected.

根据正在检查的92个组件，结果是YSlow等级为B(88) 。

运行YSlow 0.9 (Running YSlow 0.9)

Same as before - reload the page, click around, mouse over, etc. In 0.9. now XHRs and everything over the wire is inspected, so the result is all of a sudden - grade D (63) based on 141 components.

与以前相同-重新加载页面，单击，鼠标悬停等。在0.9中。现在对XHR和所有导线进行了检查，结果突然变成了D级(63)，基于141个组件。