您的位置: 首页  >  文章  >  性能工具

性能工具

分类: 文章 • 2024-10-03 15:19:34

2010 update: Lo, the Web Performance Advent Calendar hath moved

2010年更新： Lo， Web Performance Advent Calendar已移动

Dec 2 This is the second in the series of performance articles as part of my 2009 performance advent calendar experiment. Stay tuned for the next articles.

12月2日，这是我2009年性能出现日历实验的一部分，系列性能文章中的第二篇。 请继续 关注下一篇文章。

While theoretically you can speed up your site by just blindly following advice from this blog and other sources, it is much better to understand what's going on on the page and what you're dealing with. That's where the tools come in. Some tools give you insight about the network activities going on between the server and the browser (packet sniffers), some help you benchmark code execution on the client (profilers), some even give recommendations specific to performance improvements. You should aim at mastering as many of the tools as possible, because there's no single one that is The Tool. And that's not a bad thing, it's normal, because performance optimization is a multi-discipline activity touching a lot of different aspects of the the development process.

从理论上讲，您可以盲目听取来自此博客和其他来源的建议来加快网站速度，但是最好了解页面上正在发生的事情以及您正在处理的事情。 这就是这些工具的用处。某些工具可让您了解服务器和浏览器之间正在进行的网络活动(数据包嗅探器)，某些工具可帮助您对客户端上的代码执行进行基准测试(探查器)，某些工具甚至可以针对性能改进提供建议。 您应该以掌握尽可能多的工具为目标，因为没有一个工具是The Tool 。 这不是一件坏事，这很正常，因为性能优化是一个涉及多个领域的活动，涉及开发过程的许多不同方面。

慢速 (YSlow)

(Full disclaimer: I helped with YSlow development and I was the architect of YSlow 2.0 so this fact may or may not have something to do with why YSlow is the first in the list. Plus, this is an unordered list.)

(完全免责声明：我曾帮助过YSlow开发，并且我是YSlow 2.0的架构师，因此，这个事实可能与是否与YSlow成为列表中第一名的原因有关。此外，这是一个无序的列表。)

性能工具

YSlow is an extension to Firebug, that:

YSlow是Firebug的扩展，它是：

  • inspects the DOM

    检查DOM
  • hooks into the Net panel to listen to network activity and discover components that are not part of the DOM

    钩入“网络”面板以侦听网络活动并发现不属于DOM的组件

Then the tool looks at the page and the components and tries to figure out how closely they match with Yahoo!'s performance best practices. Then you're given a list of findings with some advice and links for more information on how to improve.

然后，该工具查看页面和组件，并尝试找出它们与Yahoo!的性能最佳实践的匹配程度。 然后，您会得到一份发现清单，其中包含一些建议和链接，以获取有关如何改进的更多信息。

PageSpeed (PageSpeed)

性能工具

PageSpeed inspects the page and the components and checks it against conformance with Google's performance best practices.

PageSpeed会检查页面和组件，并检查其是否符合Google的性能最佳做法 。

In addition to that, PageSpeed has some quite advanced features like the Activity Panel which shows more detailed information on the page's, well, activity - such as the browser paint events, javascript parsing, execution, DNS lookups and so on. PageSpeed also tells you how many (and which) JavaScript functions were never called before onload so you can take some hints to lazy-load some of the JavaScript payload (after analysing, of course that the code is not needed in other browsers or other page use cases). Same with CSS - PageSpeed gives you a list of unused selectors so you can check whether you have leftovers from previous versions of the page.

除此之外，PageSpeed还具有一些相当高级的功能，例如“活动面板”，它显示有关页面活动的详细信息，例如浏览器绘画事件，javascript解析，执行，DNS查找等。 PageSpeed还会告诉您在onload之前从未调用过多少个(以及哪个)JavaScript函数，因此您可以采取一些提示来延迟加载一些JavaScript有效负载(在分析之后，当然其他浏览器或其他页面不需要该代码了)用例)。 与CSS相同-PageSpeed为您提供了未使用的选择器列表，因此您可以检查是否有以前页面的剩余内容。

快速 (MSFast)

性能工具

MSFast (from MySpace) inspects the page and helps answer many questions left open by YSlow and PageSpeed, such as:

MSFast (来自MySpace)检查页面并帮助回答YSlow和PageSpeed留下的许多问题，例如：

  • What's going on with IE?

    IE发生了什么事？
  • What's the memory and CPU footprint of your code?

    您的代码的内存和CPU占用空间是多少？
  • How does the page looks like (as in screenshots) while it's being loaded so you can see what the people with slower connections have to experience

    页面在加载时的外观(如屏幕截图所示)，因此您可以看到连接速度较慢的人必须经历的事情

网页测试 (PageTest)

性能工具

AOL's PageTest is an IE plugin but also a hosted service which is a great way to show your boss/client performance details without inconveniencing them with challenging download and installation activities. PageTest gives you a waterfall view of the page load and a checklist of things to improve, plus some screenshots of interesting moments during load and even a video - an excellent view of how the page looks like in slow speeds. The hosted service can show you the dial-up experience in 4 different places in the world.

AOL的PageTest是IE插件，也是一项托管服务 ，是一种很好的方式来显示老板/客户的性能详细信息，而又不会因挑战性的下载和安装活动而给他们带来麻烦。 PageTest为您提供页面加载的瀑布视图和要改进的事项的清单，以及一些加载过程中有趣的时刻的屏幕截图，甚至还有视频-可以很好地查看页面在低速状态下的外观。 托管服务可以向您显示世界上4个不同地方的拨号体验。

DynaTrace的Ajax版 (DynaTrace's Ajax Edition)

性能工具

Dynatrace Ajax is a very detailed lower level tool that not only shows the waterfall of components downloads but also the rendering time, CPU consumption, JavaScript parsing and execution. The screenshot above is just the tip of the iceberg of the tool's plethora of views and insights. It's highly recommended. (free, registrationware)

Dynatrace Ajax是一个非常详细的底层工具，它不仅显示组件下载的瀑布，而且还显示渲染时间，CPU消耗，JavaScript解析和执行。 上面的屏幕截图只是该工具过多视图和见解的冰山一角。 强烈建议。 (免费，注册软件)

封包嗅探器 (Packet sniffers)

A good packet sniffer is indispensable for inspecting the HTTP traffic and figuring out how the page loads and what the request/responses and their headers look like. Here's a list of recommended sniffers, each with something good on top of the others:

良好的数据包嗅探器对于检查HTTP流量并弄清页面如何加载以及请求/响应及其标头的外观是必不可少的。 以下是推荐的嗅探器列表，每个嗅探器都具有其他优点：

  • IBM PageDetailer - a mature tool, somewhat simple which makes it a good start, requires registration to download

    IBM PageDetailer-一个成熟的工具，虽然有些简单，但却是一个好的开始，需要注册才能下载

  • Fiddler - very powerful, extensible

    提琴手 -非常强大，可扩展

  • HTTPWatch - (paid, but with a free version) integrates into the browser (both IE and FF) as a panel - very convenient to use. Extensible.

    HTTPWatch (收费，但有免费版本)作为面板集成到浏览器(IE和FF)中，使用非常方便。 可扩展

  • Microsoft Visual Round Trip analyser (and an excellent writeup)- goes even lower into the packet level of the requests and draws a different view of the waterfall, one that visualizes the TCP packets and the TCP slow start. It also gives recommendations for performance improvements. Built on top of NetMon (Microsoft Network Monitor) to present the data in a more useful and friendly way.

    Microsoft Visual Round Trip分析器 (以及出色的编写工具 )-甚至进入了请求的数据包级别，并绘制了瀑布的不同视图，该视图可视化了TCP数据包和TCP慢启动。 它还提供了有关性能改进的建议。 建立在NetMon(Microsoft网络监视器)之上，以更有用和友好的方式显示数据。

  • Charles proxy - the only non-windows tool in the list is an excellent packet sniffer for Mac

    Charles Proxy-列表中唯一的非Windows工具是Mac出色的数据包嗅探器

Time for a little rant - a more detailed view into the HTTP chunks is something that I think is important (will blog about it as part of this series) and missing from the current tools. HTTPWatch is the only tool that at least tells you the number of chunks and Fiddler prompts you to de-chunk HTTP responses when inspecting the body, which gives you a hint that the response was chunked. I hope to see more in that area, hopefully soon.

我需要花些时间-对HTTP块进行更详细的了解是我认为很重要的事情(本系列文章的一部分将对此进行博客介绍)，而当前工具中则没有。 HTTPWatch是唯一一个至少可以告诉您块的数量的工具，并且Fiddler会在检查正文时提示您取消对HTTP响应的分组，这可以提示您响应已分块。 我希望很快能在该领域看到更多。

谢谢阅读 (Thanks for reading)

That concludes day 2 of the performance advent calendar. Hope you'll have fun installing and playing with new toys!

演出开始日历的第二天到此结束。 希望您会在安装和玩新玩具时获得乐趣！

Did I miss a tool that should've been in the list? Let me know.

我是否错过了本应包含在清单中的工具？ 让我知道。

Tell your friends about this post on Facebook and Twitter

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

翻译自: https://www.phpied.com/performance-tools/

相关推荐