jquery统计页面加载时间
有时我们想要统计页面加载时间,以前分享过一个用php的方法。
但是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代码之后才会统计因此是非常准确的~
点赞1
支持一下