当前位置:编程学习 > JS >>

如何用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) 方法

补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,