怎么判断页面js全部加载了

判断页面JS是否全部加载的方法包括：使用DOMContentLoaded事件、使用load事件、使用Promise.all()、使用MutationObserver、使用Performance API、使用网络请求完成回调、使用检测特定元素、使用第三方库。

其中，使用Promise.all() 是一个非常有效的方法。通过将所有需要加载的JS文件和资源包装成Promise对象，然后使用Promise.all()来等待所有Promise对象都变为resolve状态，当所有Promise都完成后，可以确定所有JS文件都已加载。

一、使用DOMContentLoaded事件

DOMContentLoaded事件会在初始的HTML文档被完全加载和解析完成后触发，而无需等待样式表、图像和子框架的完全加载。这个事件非常适用于检测页面的基本结构是否已经加载完成，但不包括外部JS文件。

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

二、使用load事件

load事件会在页面的所有资源（包括图片、样式表、和JS文件）都加载完毕后触发。这个事件比DOMContentLoaded事件更晚触发，因为它要等到所有资源都加载完毕。

window.addEventListener('load', (event) => {
    console.log('All resources finished loading!');
});

三、使用Promise.all()

如果你需要加载多个JS文件，可以使用Promise.all()方法。将每个JS文件的加载过程封装成一个Promise对象，然后使用Promise.all()等待所有Promise对象都变为resolve状态。

const script1 = new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'path/to/your/script1.js';
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
});
const script2 = new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'path/to/your/script2.js';
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
});
Promise.all([script1, script2])
    .then(() => {
        console.log('All scripts loaded');
    })
    .catch((error) => {
        console.error('One or more scripts failed to load', error);
    });

四、使用MutationObserver

MutationObserver可以监听DOM树的变化，是一种更高级的监听方式。可以监听到节点的增加、删除、属性的变化等。

const targetNode = document.getElementById('your-target-element');
const config = { attributes: true, childList: true, subtree: true };
const callback = (mutationsList, observer) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        } else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

五、使用Performance API

使用Performance API可以获取页面加载的详细时序信息。通过分析这些时序信息，可以判断JS文件是否加载完成。

window.addEventListener('load', (event) => {
    const performanceEntries = performance.getEntriesByType('resource');
    performanceEntries.forEach((entry) => {
        if (entry.initiatorType === 'script') {
            console.log(`Script ${entry.name} loaded`);
        }
    });
});

六、使用网络请求完成回调

如果你的JS文件是通过网络请求加载的，可以在请求完成的回调中执行相应的逻辑，以此判断文件是否加载完成。

fetch('path/to/your/script.js')
    .then((response) => response.text())
    .then((scriptContent) => {
        const scriptElement = document.createElement('script');
        scriptElement.textContent = scriptContent;
        document.head.appendChild(scriptElement);
        console.log('Script loaded and executed');
    })
    .catch((error) => console.error('Failed to load script', error));

七、使用检测特定元素

某些情况下，你可以通过检测页面中特定元素的存在来判断JS文件是否加载完成。例如，如果某个JS文件会生成一个特定的DOM元素，你可以通过检测这个元素是否存在来判断文件是否加载完成。

const checkIfLoaded = () => {
    const targetElement = document.getElementById('specific-element');
    if (targetElement) {
        console.log('JS file has been loaded');
    } else {
        console.log('JS file has not been loaded yet');
    }
};
setInterval(checkIfLoaded, 1000);

八、使用第三方库

例如，使用Modernizr库可以检测浏览器对各种HTML5和CSS3功能的支持，虽然它不是专门用于检测JS文件加载完成，但可以辅助判断页面的加载状态。

if (Modernizr.promises) {
    console.log('Promises are supported');
} else {
    console.log('Promises are not supported');
}

九、项目团队管理系统推荐

在项目管理过程中，尤其是涉及多个JS文件的加载和执行时，有效的团队管理工具可以极大地提升工作效率。推荐使用以下两个系统：

研发项目管理系统PingCode：专为研发团队设计，提供从需求管理、任务管理到代码管理的一站式解决方案，帮助团队更好地协作和交付高质量产品。
通用项目协作软件Worktile：适用于各类团队的通用项目管理工具，提供任务管理、时间管理、文档协作等功能，帮助团队高效协作。

通过以上方法和工具，可以更好地判断页面JS文件的加载状态，提升项目管理和开发效率。