用js计算页面执行时间的函数

首先，在计算页面执行时间之前，需要先记录页面开始加载的时间和页面加载完成的时间。我们可以使用window对象的performance属性来实现。

页面开始加载的时间：

const loadStartTime = window.performance.timing.navigationStart;

页面加载完成的时间：

window.onload = function () {
    const loadEndTime = window.performance.timing.loadEventEnd;
    const loadTime = loadEndTime - loadStartTime;
    console.log(`页面加载完成，页面执行时间为${loadTime}毫秒`);
}

接下来，我们可以将以上代码封装成一个函数。示例代码如下：

function getPageLoadTime() {
    const loadStartTime = window.performance.timing.navigationStart;
    window.onload = function () {
        const loadEndTime = window.performance.timing.loadEventEnd;
        const loadTime = loadEndTime - loadStartTime;
        console.log(`页面加载完成，页面执行时间为${loadTime}毫秒`);
    }
}

getPageLoadTime();

运行以上代码，当页面加载完成后，便会在控制台打印出页面执行时间，方便我们进行调试和优化。

另外，我们也可以通过判断DOM是否加载完成来计算页面执行时间。示例代码如下：

function getDOMLoadTime() {
    const loadStartTime = new Date().getTime();
    if (document.readyState === 'complete') {
        const loadEndTime = new Date().getTime();
        const loadTime = loadEndTime - loadStartTime;
        console.log(`DOM加载完成，页面执行时间为${loadTime}毫秒`);
    } else {
        document.addEventListener('DOMContentLoaded', function () {
            const loadEndTime = new Date().getTime();
            const loadTime = loadEndTime - loadStartTime;
            console.log(`DOM加载完成，页面执行时间为${loadTime}毫秒`);
        });
    }
}

getDOMLoadTime();

以上代码中，我们使用了document对象的readyState属性来判断DOM是否加载完成，如果加载完成则直接计算页面执行时间，否则通过DOMContentLoaded事件来计算页面执行时间。