如何使用jQuery计算页面加载时间并展示在页脚？

jQuery实现代码 #

// 监听DOM加载完成事件
$(document).ready(function() {
    // 核心计算逻辑和原生JS保持一致
    const loadTime = (function () {
        const now = new Date().getTime();
        const pageLoadTime = now - performance.timeOrigin;
        return (pageLoadTime / 1000).toFixed(4);
    })();
    // 选中页脚元素插入计算结果，可根据实际页脚的选择器调整
    $('footer').append(`<span>页面加载耗时：${loadTime} 秒</span>`);
});

注意事项 #

• 执行这段代码前必须先引入jQuery库，否则会出现$未定义的报错
• 代码中的$('footer')是默认选中<footer>标签作为页脚容器，如果你的页脚用的是类名/ID标识，替换成对应选择器即可：
  • 页脚ID为site-footer：$('#site-footer')
  • 页脚类名为footer-container：$('.footer-container')
• 如果需要等待页面所有静态资源（图片、字体、样式表等）全部加载完成后再统计时间，把第一行的$(document).ready替换为$(window).on('load', function() {即可
• 如果需要覆盖页脚原有内容而不是追加显示，把append方法替换为html即可

内容的提问来源于stack exchange，提问作者Толя Коверин