如何用JS获取页面执行时间
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 获取程序的执行时间我们在php中是页面开头加一个定时器到结束再由结束时间减去开始时间就是程序所执行的时间了，在js中也可以使用此方法来操作。...
|
具体的JS代码如下：
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
var st=new Date().getTime();
</script>
<p>例如，在这里得到时间。</p>
<p>在这里创建一个div，然后。</p>
<p>再在这里取一次时间，然后两个时间想减。就可以得到这段代码的执行时间了。效果如下：</p>
<script type="text/javascript">
var st2=new Date().getTime() - st;
document.write("上面三个自然段的执行时间为"+st2+"毫秒");
</script>
|
可以使用这个方法统计JavaScript代码的执行时间，单位为毫秒。
jquery实现代码详解
通过比较js执行时间，我们可以筛选出执行效率更高，性能更好的js语句，供实际项目使用。
我们可以直接用console.time(arg1) & console.timeEnd(arg1) 方法来确认js的运行时间，arg1为该方法的参数。
需要注意的是2语句必须同时成对出现，并且参数(中英文都可)必须一致
| 代码如下 |
复制代码 |
|
<select id="page"></select>
<script type="text/javascript" src="jquery.min.js"></script>
<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执行时间结束位置</p>
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) 方法 |
