如何获取js执行时间

2012-12-21 10:12 20636 次阅读分类: JS+jQuery, 前端相关已关闭评论

免打扰阅读

编写的js执行效率高低衡量的一大参考标准就是看js语句运行自身所占用的时间。

通过比较js执行时间，我们可以筛选出执行效率更高，性能更好的js语句，供实际项目使用。

我们可以直接用console.time(arg1) & console.timeEnd(arg1) 方法来确认js的运行时间，arg1为该方法的参数。

需要注意的是2语句必须同时成对出现，并且参数(中英文都可)必须一致！

实例代码：

<select id="page"></select> <script type="text/javascript"> $(function(){ console.time('高性能写法，执行时间');//测试js执行时间开始位置，参数作为前缀输出，console.time()同console.timeEnd()配套使用，参数必须一致！ var $page = $('#page'),option; for(var i=1;i<1000;i++){ option+="<option value="+i+">第 "+i+" 页</option>"; } //dom 操作一次 $page.append(option); console.timeEnd('高性能写法，执行时间');//测试js执行时间结束位置 console.time('低性能写法，执行时间'); var $page = $('#page') for(var i=1;i<1000;i++){ //dom 操作999次 $page.append("<option value="+i+">第 "+i+" 页</option>"); } console.timeEnd('低性能写法，执行时间'); }); </script>

提示：你可以先修改部分代码再运行。

运行以上代码可以用chrome 或 firefox的调试工具查看到2段js的实际执行时间。

补充说明下：ie系列的浏览器并不支持console.time(arg1) & console.timeEnd(arg1) 方法，默默的鄙视下.....

鉴于ie的调试问题，我们可以直接使用Date()方法来实现js运行时间计时，来获取js运行时间，方法如下：

<select id="page"></select> <script type="text/javascript"> $(function(){ var now=Date.now(); var $page = $('#page'),option; for(var i=1;i<1000;i++){ option+="<option value="+i+">第 "+i+" 页</option>"; } //dom 操作一次 $page.append(option); console.log(new Date()-now); now=Date.now(); var $page = $('#page') for(var i=1;i<1000;i++){ //dom 操作999次 $page.append("<option value="+i+">第 "+i+" 页</option>"); } console.log(new Date()-now); }); </script>

提示：你可以先修改部分代码再运行。