[翻译]High Performance JavaScript(032)

Fiddler

 

    Fiddler is an HTTP debugging proxy that examines the assets coming over the wire and helps identify any loading bottlenecks. Created by Eric Lawrence, this is a general purpose network analysis tool for Windows that provides detailed reports on any browser or web request. Visit http://www.fiddler2.com/fiddler2/ for installation and other information.

    Fiddler是一个HTTP调试代理，检查资源在线传输情况，以定位加载瓶颈。它由Eric Lawrence创建，是一个Windows下通用的网络分析工具，可为任何浏览器或网页请求给出详细报告。其安装和其它信息参见http://www.fiddler2.com/fiddler2/。

 

    During installation, Fiddler automatically integrates with IE and Firefox. A button is added to the IE toolbar, and an entry is added under Firefox's Tools menu. Fiddler can also be started manually. Any browser or application that makes web requests can be analyzed. While running, all WinINET traffic is routed through Fiddler, allowing it to monitor and analyze the performance of downloaded assets. Some browsers (e.g., Opera and Safari) do not use WinINET, but they will detect the Fiddler proxy automatically, provided that it is running prior to launching the browser. Any program that allows for proxy settings can be manually run through Fiddler by pointing it at the Fiddler proxy (127.0.0.1, port: 8888).

    在安装过程中，Fiddler与IE和Firefox自动集成。IE工具栏上将添加一个按钮，Firefox的工具菜单中将增加一个菜单项。Fiddler还可以手工启动。任何浏览器或应用程序发起的网页请求都能够分析。它运行时，所有WinINET通信都通过Fiddler进行路由，允许它监视并分析资源下载的性能。某些浏览器（例如Opera和Safari）不使用WinINET，但它们会自动检测Fiddler代理，倘若它在浏览器启动之前正在运行的话。任何能够设置代理的程序都可以手工设置指定它使用Fiddler代理（127.0.0.1，端口：8888）。

 

    Like Firebug, Web Inspector, and Page Speed, Fiddler provides a waterfall diagram that provides insights as to which assets are taking longer to load and which assets might be affecting the loading of other assets (Figure 10-15).

    像Firebug，网页检查器，Page Speed一样，Fiddler提供一个瀑布图，可深入察看哪些资源占用了较长加载时间，哪些资源可能影响了其它资源加载（图10-15）。

Figure 10-15. Fiddler waterfall diagram

图10-15  Fiddler的瀑布图

 

    Selecting one or more resources from the panel on the left shows them in the main view. Click the Timeline tab to visualize the assets over the wire. This view provides the timing of each asset relative to other assets, which allows you to study the effects of different loading strategies and makes it more obvious when something is blocking.

    在主视窗的左侧面板中选择一个或多个资源。点击时间线标签可以看到通过网络的资源。此视图提供了每个相关联资源之间的计时信息，使你可以研究不同加载策略的效果，以及使阻塞的原因更加明显。

 

    The Statistics tab shows a detailed view of the actual performance of all selected assets—giving insight into DNS Lookup and TCP/IP Connect times—as well as a breakout of the size of and type of the various assets being requested (Figure 10-16).

    统计标签显示了所有选择资源实际性能的细节视图——包括DNS解析和TCP/IP连接的时间——以及所请求的各种资源的大小、类型等详细信息（图10-16）。

Figure 10-16. Fiddler Statistics tab

图10-16  Fiddler的统计图表

 

    This data helps you decide which areas should be investigated further. For example, long DNS Lookup and TCP/IP Connect times may indicate a problem with the network. The resource chart makes it obvious which types of assets comprise the bulk of the page load, identifying possible candidates for deferred loading or profiling (in the case of scripts).

    这些数据帮助你决策哪些地方应当进行更深入的调查。例如，DNS解析和TCP/IP连接时间过长可能意味着网络问题。资源图表中可以明显地看出哪种类型的资源在页面加载中比例较大，找出哪些可能需要延迟加载，或者需要进一步分析（如果是脚本类型）。

 

YSlow

 

    The YSlow tool provides performance insights into the overall loading and execution of the initial page view. This tool was originally developed internally at Yahoo! by Steve Souders as a Firefox addon (via GreaseMonkey). It has been made available to the public as a Firebug addon, and is maintained and updated regularly by Yahoo! developers. Visit http://developer.yahoo.com/yslow/ for installation instructions and other product details.

    YSlow工具能够深入视察初始页面视图整体加载和运行过程的性能。它最初由Yahoo!内部的Steve Souders开发，作为Firefox插件（通过GreaseMonkey）。它已经发布为一个Firebug插件，由Yahoo!开发人员维护并定期更新。安装及其他产品细节参见http://developer.yahoo.com/yslow/。

 

    YSlow scores the loading of external assets to the page, provides a report on page performance, and gives tips for improving loading speed. The scoring it provides is based on extensive research done by performance experts. Applying this feedback and reading more about the details behind the scoring helps ensure the fastest possible page load experience with the minimal number of resources.

    YSlow为页面加载的外部资源评分，为页面性能提供报告，并给出提高加载速度的建议。它提供的评分基于性能专家们广泛的研究。运用这些反馈信息，并阅读评分背后更多的细节，有助于以最小的资源数量确保最快的页面加载体验。

 

    Figure 10-17 shows YSlow's default view of a web page that has been analyzed. It will make suggestions for optimizing the loading and rendering speed of the page. Each of the scores includes a detailed view with additional information and an explanation of the rule's rationale.

    图10-17显示了YSlow默认的网页分析视图。它将提供关于优化下载和页面渲染速度的建议。每一个评分都包含一个细节视图提供附加信息，以及对规则理由的解释。

Figure 10-17. YSlow: All results

图10-17  YSlow：全部结果

 

    In general, improving the overall score will result in faster loading and execution of scripts. Figure 10-18 shows the results filtered by the JAVASCRIPT option, with some advice about how to optimize script delivery and execution.

    一般情况下，提高整体评分将意味着更快的加载和脚本运行。图10-18显示出由JAVASCRIPT选项过滤后的结果，还有一些建议，关于如何优化脚本的传输和运行。

Figure 10-18. YSlow: JavaScript results

图10-18  YSlow：JavaScript结果

 

    When interpreting the results, keep in mind that there may be exceptions to consider. These might include deciding when to make multiple requests for scripts versus combining into a single request, and which scripts or functions to defer until after the page renders.

    在分析结果时，请记住要考虑到一些意外情况。包括决定是否将多个脚本请求合并成一个单独请求，以及哪些脚本或函数应当在页面渲染之后延迟加载。

 

dynaTrace Ajax Edition  Ajax版的dynaTrace

 

    The developers of dynaTrace, a robust Java/.NET performance diagnostic tool, have released an "Ajax Edition" that measures Internet Explorer performance (a Firefox version is coming soon). This free tool provides an end-to-end performance analysis, from network and page rendering to runtime scripts and CPU usage. The reports display all aspects together, so you can easily find where any bottlenecks may be occurring. The results can be exported for further dissection and analysis. To download, visit http://ajax.dynatrace.com/pages/.

    dynaTrace是一个强大的Java/.NET性能诊断工具，它的开发人员已经发布了一个“Ajax版”用于测量Internet Explorer的性能（Firefox版很快就会出现）。这个免费工具提供了一个“终端到终端”性能分析器，从网络和页面渲染，到脚本运行时间和CPU占用率都能分析。报告显示将所有信息汇总在一起，所以你可以容易地发现瓶颈之所在。结果可导出用于进一步剖析。它可在这里下载：http://ajax.dynatrace.com/pages/。

 

    The Summary report shown in Figure 10-19 provides a visual overview that allows you to quickly determine which area or areas need more attention. From here you can drill down into the various narrower reports for more granular detail regarding that particular aspect of performance.

    总结报告如图10-19所示，提供了一个图形化的概貌，使您马上知道哪些区域需要更多关注。从这里您可以深入到各种具体的报告中，察看某一方面性能的更多细节。

 

    The Network view, shown in Figure 10-20, provides a highly detailed report that breaks out time spent in each aspect of the network life cycle, including DNS lookup, connection, and server response times. This guides you to the specific areas of the network that might require some tuning. The panels below the report show the request and response headers (on the left) and the actual request response (on the right).

    网络视图如图10-20所示，提供了关于网络生命周期每个阶段花费时间的非常详细的报告，包括DNS解析，连接，和服务器响应时间。它指引你进入网络中可能需要调整的特定区域。下面面板中的报告显示了请求和响应报文头（左侧）和实际请求的响应（右侧）。

Figure 10-19. dynaTrace Ajax Edition: Summary report

图10-19  dynaTrace Ajax Edition：总结报告

 

    Selecting the JavaScript Triggers view brings up a detailed report on each event that fired during the trace (see Figure 10-21). From here you can drill into specific events ("load", "click", "mouseover", etc.) to find the root cause of runtime performance issues.

    选择JavaScript触发器视图将看到跟踪过程中所发出的每个事件的详细报告（如图10-21）。从这里你可以深入到每个特定的事件中（“load”，“click”，“mouseover”等等）去发现运行时性能问题的根本原因。

 

    This view includes any dynamic (Ajax) requests that a event may be triggering and any script "callback" that may be executed as a result of the request. This allows you to better understand the overall performance perceived by your users, which, because of the asynchronous nature of Ajax, might not be obvious in a script profile report.

    此视图包括一个事件可能触发的任意动态（Ajax）请求，以及作为请求结果而运行的任意脚本“回调”。这使您更好地理解用户所体会到的整体性能，由于Ajax的异步特性，在一个脚本分析报告中可能不怎么明显。

Figure 10-20. dynaTrace Ajax Edition: Network report

图10-20  dynaTrace Ajax Edition：网络报告

Figure 10-21. dynaTrace Ajax Edition PurePaths panel

图10-21  Ajax版dynaTrace的PurePaths面板