如何在网站上显示网页加载时间和网站运行时间?

很多网站都会在网站底部显示网页加载时间和网站运行时间,无论目的是为了测试还是装 X(反正我是用来装 X 的),加上后网站的逼格确实会上升一个档次。可恶的是想要百度找添加的方法时,总是会找到一些网页加载优化提升网站运行速度之类的文章,很难找到正确的教程,可能是我搜索时的姿势不太对吧。

别怕,文章还没结束,请继续往下看……😂

网站加载时间显示

网页加载时长统计的原理是在网站的 <head> 里面添加获取时间的代码,然后在 <footer> 里面再获取一次,两个时间相减来得到具体的加载时间。

当然,得确保网页每次加载,都会加载到这两个标签,譬如 Hexo 就不会,所以对于 Hexo 来说,只能算是 网站首次访问加载时长……辨别的方法也很容易,把代码加上后,切换页面是查看加载时长有没有变化就是了。

其中 <head> 里面添加的代码为:

<!-- 添加网页加载时长统计 -->
<script language=javascript>
var t1 = new Date().getTime();
</script>

<footer> 里面添加的代码为:

<!-- 添加网页加载时长统计 -->
<script type="text/javascript">
window.onload = function() {document.getElementById("TimeShow").innerHTML = "网页加载耗时 "+": "+ (new Date().getTime()-t1) +" 毫秒";}
</script>

调用方式:

<!-- 网页加载时长展示 -->
<div id="TimeShow"></div>

调用方式 中的代码放到想要展示的位置就行。

网站运行时间

这个也并没有那么高大上,反而有点扯,哈哈。因为它其实并不知道你的网站是什么时间建立以及运行的,需要你指定个时间进行统计。So,我可以展示我的网站已经安全运行了100年,嘿嘿。😏

统计及展示代码如下:

<div>
    <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
    <script>
        var now = new Date();
        function createtime() {
            var grt= new Date("11/09/2017 00:00:00");
            now.setTime(now.getTime()+250);
            days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
            hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
            if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
            seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
            document.getElementById("timeDate").innerHTML = "本站已悄悄运行了 "+dnum+" 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
        setInterval("createtime()",250);
    </script>
</div>

把以上代码粘贴到任意的地方,即可显示。修改 var grt= new Date("11/09/2017 00:00:00"); 中的时间,就能从不同的时间开始进行统计。

发表评论

邮箱地址不会被公开。 必填项已用*标注

Captcha Code