分享JavaScript网页加载耗时统计功能的代码
要实现JavaScript网页加载耗时统计功能，可以使用`performance.timing`对象。首先，在页面加载完成后，记录当前时间戳。然后，在`window.onload`事件中，再次记录当前时间戳。最后，计算两个时间戳之间的差值，即为网页加载耗时。 代码如下： ```javascript // 记录页面加载开始时间 var startTime = performance.now(); // 页面加载完成事件 window.onload = function() { // 记录页面加载结束时间 var endTime = performance.now(); // 计算页面加载耗时 var loadTime = endTime - startTime; // 输出页面加载耗时 console.log("页面加载耗时：" + loadTime + "毫秒"); }; ```
有没有见过人家网站底部有一个网页加载耗时统计功能，如下图：
可以统计网站打开加载完成共用了多少秒，看着是不是很专业的感觉，其实这个功能非常的简单。只需要利用JS计算出加载页面所用的时间，然后显示就可以了。
操作方法
1、在网站页面Head加入初始时间的js代码
<scriptlanguage=javascript>vart1=newDate().getTime();</script>
2、在Body页加入以下代码
<SCRIPTLANGUAGE="JavaScript">window.onload=function(){document.getElementById("TimeShow").innerHTML="加载耗时"+(newDate().getTime()-t1)+"ms";}</SCRIPT>3、最后在需要显示的地方加入以下代码
<divid="TimeShow"></div>
个人觉得在底部最合适。
