如何衡量JavaScript的解析时间

Question

在我们公司,我们将每个Javascript文件合并为一个大的(大约700kb但正在增长)缩小和压缩的Javascript文件.我试图评估每个页面使用一个大的Javascript文件(缩小和gzip)和使用几个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文件接收大约700ms,对于300 kb文件接收大约300ms.

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

Answer 1

我认为 console.time("Parsetime")

和 console.timeEnd("Parsetime")

为您提供更精确的测量,然后是日期对象,
文章关于javascript时间的准确性

Answer 2

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

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

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

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