当前位置:首页 > Javascript > 正文内容

jquery统计页面加载时间

彭淇3年前 (2017-08-09)Javascript42460

有时我们想要统计页面加载时间,

但是php是服务器端的,在应用中数据显示非常不符合实际。

其实最好的方法应该是在客户端统计时间,利用js或jquery是最佳选择。

首先在<head>之后紧接着添加下面代码,利用全局变量保存开始载入的时间:

<script>var qingzzStartTime1=new Date().getTime();</script>

在需要输出的地方输出一个id为qingzzLastTimeShow的span或者font,例如:

<div class="qingzzTongji">
    页面加载耗时: <span id="qingzzLastTimeShow" color="red"></span> 秒
</div>

最后在</body>上面添加统计结束时间和改变页面显示的代码:

注意:

下面的代码中,分享了大浮点数的加减乘除法的精确算法,其中仅使用sub和div,另外两个可以删除。

加减和除是准确算法,乘法只是比较精确的方法。

<script>
function add(a, b) {
    var c, d, e;
    try {
        c = a.toString().split(".")[1].length;
    } catch (f) {
        c = 0;
    }
    try {
        d = b.toString().split(".")[1].length;
    } catch (f) {
        d = 0;
    }
    return e = Math.pow(10, Math.max(c, d)), (mul(a, e) + mul(b, e)) / e;
}

function sub(a, b) {
    var c, d, e;
    try {
        c = a.toString().split(".")[1].length;
    } catch (f) {
        c = 0;
    }
    try {
        d = b.toString().split(".")[1].length;
    } catch (f) {
        d = 0;
    }
    return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e;
}

function mul(a, b) {
    var c = 0,
        d = a.toString(),
        e = b.toString();
    try {
        c += d.split(".")[1].length;
    } catch (f) {}
    try {
        c += e.split(".")[1].length;
    } catch (f) {}
    return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
}

function div(a, b) {
    var c, d, e = 0,
        f = 0;
    try {
        e = a.toString().split(".")[1].length;
    } catch (g) {}
    try {
        f = b.toString().split(".")[1].length;
    } catch (g) {}
    return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e));
}
$(document).ready(function() {
    var qingzzStopTime1=new Date().getTime();
    var qingzzStopTime=div(qingzzStopTime1,1000);
    var qingzzStartTime=div(qingzzStartTime1,1000);
    $('#qingzzLastTimeShow').text(sub(qingzzStopTime,qingzzStartTime));
})
</script>

结束时间只有在页面文件加载完成并执行完其他jquery代码之后才会统计因此是非常准确的~

扫描二维码至手机访问

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

转载请注明出处:https://www.pengqi.club/blog/3.html

分享给朋友:

相关文章

原生js带提示留言表单验证代码

原生js带提示留言表单验证代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conten...

javascript收藏本站和设为首页代码

站长的梦想也许是每个人都能收藏自己的网站,甚至将网站设为首页,这样每个访客都能成为自己的忠实粉丝,也许很难,但是从提供收藏本站和设为首页的按钮做起吧~ 由于只有IE和Firefox才...

为网站添加点击喜庆灯笼特效

为网站添加点击喜庆灯笼特效

为网站添加对联灯笼喜庆特效。特此感谢飞翔勿扰站长提供的代码和方法效果图如下:设置方法如下:代码如下: <div class="container">...

摇一摇打开网页或拨打电话

摇一摇打开网页或拨打电话

    提到摇一摇,我们第一念头就是微信,就好像微信因为QQ的前期大力支持发杨光大一样,摇一摇也因为微信的存在,在一个短暂的时间内,成了众人所知的热门应用,微信...

网站优化如何提高页面的加载速度

网站优化如何提高页面的加载速度

加快网页的加载速度,无疑是提高用户体验的一个很好的方法。但是这里我们如何提高网页的加载速度呢?这里是我所理解的和网上搜索到的几点总结。  1. 使用良好的结构 &n...

js日历代码演示,阳历 农历 星期

js日历代码演示,阳历 农历 星期

效果图如下: 代码如下: <!doctype html> <html> <head> <meta chars...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。