百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> 如何用JS获取页面执行时间
分享文章到:

如何用JS获取页面执行时间

发布时间:01/15 来源: 浏览: 关键词:
获取程序的执行时间我们在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) 方法

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有2人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板