js window加载完成

基础概念

window 对象是 JavaScript 中的全局对象，代表了浏览器窗口。当浏览器完成页面的加载并准备好执行 JavaScript 时，会触发 load 事件。这个事件通常用于确保在执行某些脚本之前，所有的资源（如图像、CSS、脚本等）都已经加载完毕。

类型与应用场景

一次性事件：load 事件只会触发一次，适合用于页面加载完成后的初始化操作。
资源依赖：当脚本依赖于页面上的某些资源（如图片、外部脚本）时，使用 load 事件可以确保这些资源已经加载完毕。

示例代码

以下是一个简单的示例，展示了如何使用 window.onload 来执行一些初始化操作：

window.onload = function() {
    console.log("页面加载完成");
    
    // 初始化操作
    document.getElementById("myButton").addEventListener("click", function() {
        alert("按钮被点击了！");
    });
};

可能遇到的问题及解决方法

问题1：事件覆盖

如果多次设置 window.onload，后面的设置会覆盖前面的设置。

解决方法：

使用 addEventListener 来添加多个事件处理程序，这样可以避免覆盖问题：

window.addEventListener('load', function() {
    console.log("第一个加载完成事件");
});

window.addEventListener('load', function() {
    console.log("第二个加载完成事件");
});

问题2：性能问题

如果 onload 事件处理程序中执行的操作非常耗时，可能会导致页面响应缓慢。

解决方法：

将耗时操作分解为多个小任务，或者使用 requestAnimationFrame 来优化性能：

window.onload = function() {
    console.log("页面加载完成");
    
    // 使用 requestAnimationFrame 优化性能
    function init() {
        // 执行一些初始化操作
        requestAnimationFrame(init);
    }
    
    requestAnimationFrame(init);
};