测试压缩 JavaScript 代码的性能增益答案

【问题标题】：Testing out the performance gain of compressing JavaScript code测试压缩 JavaScript 代码的性能增益
【发布时间】：2011-08-31 17:47:57
【问题描述】：

我使用了 5 个 JavaScript 压缩器来压缩一个 JavaScript 库（JSMin、YUI 压缩器、Packer、闭包编译器和 UglifyJS）

现在我知道闭包编译器是减少文件大小的赢家。但是，我也想测试性能提升。有什么好的方法可以做到这一点？

我制作了一个简单的测试页面，它使用了库的所有公共方法。有没有工具可以测试这个测试页面的页面速度？例如。在浏览器上运行 X 次并返回平均加载速度。

感谢您的回答！

【问题讨论】：

您要测量什么？通过公共网络上的 HTTP 加载时间？ JavaScript 解析器解析 JavaScript 文本所花费的时间？解释器花在运行结果上的时间？您列出的大多数工具只会对第一个（HTTP 加载时间）有所帮助，Closure 编译器是个奇怪的人，因为它实际上会修改您的代码（内联函数等），而其他工具主要与符号长度有关减少和（在某些情况下）混淆。
What is the best way to profile javascript execution? 的可能重复项
整个包。我想测试用户的速度增益。秒表从获取测试页直到每个公共方法完成。
有人说用google的闭包编译器压缩代码实际上会降低性能......所以我想测试什么能提供最好的效率：未压缩、压缩或编译。
@Chielus 使用搜索。这个话题已经讨论过很多次了。最好的是闭包编译器，最慢的是 Packer。

标签： javascript compression google-closure-compiler yui-compressor packer

【解决方案1】：

不必太复杂：

<html>
<head>
    <script>
    var time = new Date();
    </script>
    <script src="..."></script>
    ... more scripts ... 
</head>

<body>
<script>
    document.write("Time: " + String((new Date() - time)/1000) + " seconds");
</script>
</body>
</html>

<head> 中的脚本通常是串行加载的，因此这应该是衡量脚本执行时间的合理方法。如果您有执行表单<body onload="..."> 的脚本，则在该函数的末尾而不是正文的末尾进行经过时间的计算。

此方法不会测量通过setTimeout 或setInterval 执行的“异步”函数的执行时间，但这些不应计入加载时间。

替代并且可能更简单的选择是使用内置于 Chrome 或 Safari 的网络检查器的 javascript 分析器。

【讨论】：

【解决方案2】：

这实际上取决于您的受众最关心该网站的内容。是时候出现在屏幕上了吗？是时候加载完成了吗？动画流畅度？交互式响应？还是原始计算速度？

您应该根据最重要的指标来分析使用不同压缩器压缩的网站。

旁注：简单模式下的闭包编译器只会产生最小的加速。它减小了文件大小，但 JavaScript 程序保持不变。要显着减少代码并优化速度，您必须使用高级模式。

【讨论】：

【解决方案3】：

使用 Firefox 上的 PageSpeed 或 YSlow 或 IE 上的 HTTPAnaylser 来测试时间负载差异。

【讨论】：

【解决方案4】：

我怀疑 the PageSpeed tool 是你要找的东西。

【讨论】：

我知道pagespeed，它的时间线功能很有用。但是，它仅对运行一次有用。最好运行 X 次并取平均值。这可以以某种方式完成吗？
在实践中，如果不使用网络限制器，很难使用它来衡量性能的实际改进。
@symcbean：是的。或者我相当于网络节流器：100Mbit（甚至 10Mbit）连接上某处的慢速 VPS 服务器。 :-)
不需要精确，只需要提供压缩机之间的比较