9

在我们公司，我们将每个 Javascript 文件合并成一个大（大约 700kb，但还在增长）压缩和 gzip 压缩的 Javascript 文件。我正在尝试评估为每个页面使用一个大 Javascript 文件（缩小和压缩）和使用多个 Javascript 文件（每个页面一个）之间的性能差异。

一个明显的区别是，大的 Javascript 文件可以在第一个页面请求加载后被浏览器缓存，之后产生的开销很小，而当使用多个 js 文件时，每个不同页面上至少会有一个未缓存的 get 请求。所以我会用较慢的初始页面加载来换取较慢的连续初始页面加载。

为了找出缓慢的初始页面加载（使用一个大的 Javascript 文件）何时会成为问题，足以证明将组合文件分解为更小的文件并更改我们的构建过程的工作，我想知道它需要多长时间需要解析代码，所以我可以估计总加载和解析时间。

到目前为止，我的方法是将脚本标记添加到需要当前时间的测试页面，使用 Javascript 附加一个大脚本，然后再次测量时间，如下所示：

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript');
script.src = 'path/700kbCombineFile.js';
start_time = new Date().getTime();
head.appendChild(script);

在 700kbCombineFile.js 的末尾，我附加了：

console.log(new Date().getTime() - start_time)

然后我减去从 firebug 获得的网络传输时间，对于 700 kb 的文件大约需要 700 毫秒，对于 300 kb 的文件大约需要 300 毫秒。

这种方法有意义吗？为什么不？有没有更好的方法/任何工具可以做到这一点？

4

2 回答 2

6

我认为 console.time("Parsetime")

和 console.timeEnd("Parsetime")

给你一个比日期对象更准确的测量，
关于javascript时间准确性的文章

于 2012-07-12T13:53:59.103 回答
3

解析 JavaScript 所需的时间在浏览器之间会有很大差异。

您所拥有的是我能想到的测量解析时间的最佳方法，但是，我会质疑这是否是判断哪种方法更有效的最佳测量方法。

就个人而言，我会考虑触发load事件window所花费的时间，从请求页面开始更好地衡量要采用哪种方法。

下载页面所花费的时间很重要，并且在第一次加载后始终缓存文件仅在完美世界中才是正确的。

于 2012-07-12T13:54:13.620 回答