背景

去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。

没有计划的阅读，收效甚微。

新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。

这个“玩法”虽然常见且板正，但是有效，已经坚持阅读十一个月。

已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（中卷）》、《你不知道的JavaScript（下卷）》、《数据结构与算法JavaScript描述》、《WebKit技术内幕》、《前端架构：从入门到微前端》、《秒懂算法：用常识解读数据结构与算法》、《JavaScript权威指南》、《JavaScript异步编程设计快速响应的网络应用》。

当前阅读周书籍：《编写可测试的JavaScript代码》。

浏览器性能测试

查看HAR文件

我们已经有了生成的HAR文件，仅仅是JSON格式，我们可以任意幻想，将它们保持在数据库或保存在文件里，以便查看应用程序配置的趋势。但在有些时候，确实要查看这些东西。

将HAR文件的数据进行可视化是很容易的。最简单的方法是访问标准的Web查看器；简单地将一个HAR文件拖拽到页面（HTML5页面！），并拖放到任何现代浏览器中，就会看到HAR数据的瀑布图。上载HAR文件之前，确保不要选择“Validate data before processing”。我还没有见到过能够验证正确的HAR文件。

对于不需要上传到远程网站就可以查看HAR文件的其他选择方案也是有的。首先，下载HAR查看器的源代码。也可以嵌入HAR查看器生成的HAR图到我们自己的页面上（HAR文件可以远程抓取）。

另外一个查看HAR文件的工具是JSlow。YSlow除了是一个可以统计负载性能的浏览器插件以外，也可以作为一个可以读取HAR文件并导出YSlow输出的命令行工具。可以从命令行运行YSlow，或者通过如下命令使用Node.js脚本运行：

npm install yslow -g

YSlow输出可以是XML、纯文本或者JSON格式。要图形化YSlow输出，可以将其发送到YSlow可视化工具，如果不想把宝贵的YSlow数据发送给第三方，也可以在本地安装该可视化工具。

让我们看看这一切是如何结合在一起的。安装YSlow之后，生成HAR文件，并在Showslow.com网站查看结果：

yslow -i all -b http://www.showslow.com/beacon/yslow/yahoo.com.har

这将会把我们的Yahoo.com HAR输出进行可视化。然后访问SHowSlow，在最近列表记录里找到我们的URL，以便查看完整的图形输出（https://www.showslow.com/details/6005/https://www.yahoo.com/）。

在这种情况下，很多人都有YSlow化的Yahoo.com，所以就会有一个很好的历史图表，当然，所有的成绩都是A！页面底部是返回Yahoo.com的HAR查看器的链接——圆满完成。

可以使用-beacon功能（https://yslow.org/user-guide/）生成可视化——仪表盘提供的数据很详细。

浏览器性能测试

HAR文件非常有趣，并且容易生成，但这并不是其全部。除了具有网络性能外，浏览器还必须能够解析HTML、解析并执行JavaScript、布局并绘制浏览器窗口，这些步骤都需要时间。那时间是多少呢？有一些工具可以在Web应用程序运行时，精确估量浏览器都做了哪些工作。用于Firefox和IE（仅用于Windows版）的dynaTrace AJAX Edition以及Chrome版的Speed Tracer就是这样的工具。两种工具都完成相同的基本任务。在页面加载时，这些工具收集可以立即图形化的时间信息，或者稍后进行保存、生成图像并检查。通过检查图形化输出，可以确定性能问题并对其进行修复。这些底层时间的收集过程特定于每种浏览器；因此，不可能有像HAR proxy这样通用的收集器。

Speed Tracer是Google Chrome的一个扩展。安装扩展，然后点击绿色的stopwatch小图标弹出Speed Tracer 界面。点击红色的record按钮将启动跟踪浏览器内幕信息，主要是由网络获取资源、解析HTML和JavaScript、布局和绘制浏览器窗口。这些信息都在熟悉的瀑布图中。界面顶部是一个延迟图和网络图。网络图本质上与之前看到的HAT图标是相同的。延迟图更有趣一点，在指定的时间可视化用户界面的响应（或没有响应）。高的峰值表明浏览器的单一UI线程被阻塞了——这很糟糕！

Speed Tracer会提供应用程序的有关问题提示（与YSlow一样）；例如，Speed Tracer将标记持续时间超过100毫秒的事件。事件触发时，其事件处理块会阻塞主UI线程，所以超过100毫秒的事件处理会让UI看起来无精打采。

最后，Speed Tracer提供了一个保存（save）按钮用于保存数据，这样以后就可以再次加载并检查——在自动化构建过程中，这是一个非常好的特性。这就是说，作为我们构建的一部分，我们可以为应用程序自动生成Speed Tracer数据，确保改变不会影响性能（在第8章我们将进一步研究）。图6-5展示了Speed Tracer对Yahoo.com的分析结果。

总结

除了网络问题，与性能测试相关的还有，要深入了解浏览器来确定应用程序到底是什么，需要运行多少时间，因为它可以让我们深入理解应用程序。像dynaTrace AJAX Edition和Speed Tracer这样的工具提供了高度依赖浏览器的数据，以便进行数据分析。

作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。