jq的ready原生js怎么写

在网页加载完成后执行JavaScript代码的原生方法有多种，常见的方法包括：使用DOMContentLoaded事件、load事件和readystatechange事件。 其中，DOMContentLoaded事件是最常用的，因为它会在HTML文档完全加载和解析完毕后立即触发，而不必等待样式表、图片和子框架的加载。以下是一些常用的方法：DOMContentLoaded事件、load事件、readystatechange事件。 我们重点讲解DOMContentLoaded事件。

document.addEventListener('DOMContentLoaded', function() {

    // 你的代码在这里运行
    console.log('DOM 已加载完毕');
});

一、理解DOMContentLoaded事件

1、事件触发时机

DOMContentLoaded事件在HTML文档完全加载和解析完成后触发，此时所有的DOM元素都可以被操作，但是其他资源（如图片、样式表等）可能尚未加载完毕。这个事件非常适合用于初始化需要直接操作DOM的脚本。

document.addEventListener('DOMContentLoaded', function() {

    // 你的DOM操作代码
    let element = document.getElementById('myElement');
    element.textContent = 'DOM 已加载完毕';
});

2、事件监听器的注册方式

DOMContentLoaded事件的监听器可以通过addEventListener方法注册，这种方法是推荐的，因为它支持多个监听器并且不会覆盖已有的监听器。

document.addEventListener('DOMContentLoaded', function() {

    // 初始化代码
    console.log('这是第一个监听器');
});
document.addEventListener('DOMContentLoaded', function() {
    // 更多初始化代码
    console.log('这是第二个监听器');
});

二、使用load事件

1、事件触发时机

load事件在页面的所有资源（包括图片、样式表、脚本等）都完全加载完毕后触发。它适用于需要确保所有外部资源都已加载的情况。

window.addEventListener('load', function() {

    // 你的代码在这里运行
    console.log('页面的所有资源已加载完毕');
});

2、与DOMContentLoaded的区别

与DOMContentLoaded事件相比，load事件触发得更晚，因为它等待所有资源都加载完毕。如果你的脚本只需要DOM元素，那么DOMContentLoaded事件更适合。

// 使用DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM 已加载完毕');
});
// 使用load
window.addEventListener('load', function() {
    console.log('页面的所有资源已加载完毕');
});

三、使用readystatechange事件

1、事件触发时机

readystatechange事件在文档的加载状态改变时触发。文档的加载状态包括loading、interactive和complete。

document.addEventListener('readystatechange', function() {

    if (document.readyState === 'interactive') {
        // 你的代码在这里运行
        console.log('文档已加载且解析完毕');
    }
});

2、结合不同状态的使用

你可以结合不同的加载状态来执行不同的代码。例如，在interactive状态下，DOM已加载完毕，但资源可能尚未全部加载；在complete状态下，所有资源都已加载完毕。

document.addEventListener('readystatechange', function() {

    if (document.readyState === 'interactive') {
        console.log('文档已加载且解析完毕');
    } else if (document.readyState === 'complete') {
        console.log('页面的所有资源已加载完毕');
    }
});

四、兼容旧版浏览器

1、使用window.onload

对于非常旧的浏览器，可以使用window.onload事件。需要注意的是，window.onload只能注册一个事件处理器，后注册的会覆盖先注册的。

window.onload = function() {

    // 你的代码在这里运行
    console.log('页面的所有资源已加载完毕');
};

2、兼容性解决方案

为了兼容更多的浏览器，可以使用一个简单的自定义函数来处理DOMContentLoaded事件。

function ready(callback) {

    if (document.readyState !== 'loading') {
        callback();
    } else {
        document.addEventListener('DOMContentLoaded', callback);
    }
}
ready(function() {
    console.log('DOM 已加载完毕');
});

五、使用现代JavaScript框架

1、使用jQuery

尽管我们主要讨论原生JavaScript，但了解一下常用库的解决方案也是有益的。jQuery提供了简洁的$(document).ready方法。

$(document).ready(function() {

    console.log('DOM 已加载完毕');
});

2、使用框架的生命周期钩子

现代JavaScript框架如React、Vue等提供了组件生命周期钩子，这些钩子可以在组件挂载、更新和卸载时执行相应的代码。例如，在Vue中，可以使用mounted钩子。

new Vue({

    el: '#app',
    mounted() {
        console.log('组件已挂载');
    }
});

六、代码优化与性能考虑

1、避免阻塞加载

尽量避免在DOMContentLoaded事件中执行耗时操作，以免阻塞页面加载。可以将耗时操作放在load事件中，或使用requestIdleCallback来延迟执行。

document.addEventListener('DOMContentLoaded', function() {

    console.log('DOM 已加载完毕');
    requestIdleCallback(function() {
        // 延迟执行的代码
        console.log('在空闲时间执行耗时操作');
    });
});

2、异步加载外部资源

尽量使用异步或延迟加载外部资源，如脚本和样式表，以提高页面加载速度。

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<script src="script.js" async></script>

七、调试和排错

1、使用浏览器开发者工具

利用浏览器开发者工具的网络和性能面板，可以分析页面加载时间和资源加载顺序，帮助定位和解决加载问题。

2、日志记录

在关键事件中添加日志记录，有助于了解代码执行顺序和加载状态。

document.addEventListener('DOMContentLoaded', function() {

    console.log('DOMContentLoaded 事件触发');
});
window.addEventListener('load', function() {
    console.log('load 事件触发');
});

通过以上几种方法，我们可以在不同阶段执行JavaScript代码，实现页面加载后的不同需求。掌握这些技巧，可以帮助我们更好地控制页面加载过程，提高用户体验和页面性能。

相关问答FAQs：

1. 原生JavaScript中如何实现类似于jq的ready函数？
在原生JavaScript中，我们可以通过以下方式来实现类似于jQuery的ready函数：

document.addEventListener("DOMContentLoaded", function() {
  // 在这里编写页面加载完成后需要执行的代码
});

这段代码使用addEventListener函数来监听DOMContentLoaded事件，当页面的DOM结构加载完成时，会触发该事件。在事件回调函数中，我们可以编写需要在页面加载完成后执行的代码。

2. 如何在原生JavaScript中检查DOM是否已经加载完毕？
要检查DOM是否已经加载完毕，可以使用以下代码：

if (document.readyState === "complete" || document.readyState === "interactive") {
  // DOM已经加载完成，可以执行相应操作
} else {
  // DOM尚未加载完成，可以在DOMContentLoaded事件中执行相应操作
}

上述代码中，通过检查document.readyState属性来判断DOM的加载状态。当document.readyState的值为"complete"或"interactive"时，表示DOM已经加载完毕，可以执行相应操作。

3. 如何在原生JavaScript中延迟执行代码，等待DOM加载完成？
在原生JavaScript中，我们可以使用setTimeout函数来延迟执行代码，以等待DOM加载完成。例如：

setTimeout(function() {
  // 在这里编写需要延迟执行的代码
}, 1000);

上述代码中，setTimeout函数用于延迟执行代码，第一个参数是一个回调函数，第二个参数是延迟的时间（单位为毫秒）。在回调函数中，可以编写需要延迟执行的代码。在这个例子中，代码会在延迟1秒后执行。这样可以确保在执行代码时，DOM已经完全加载完成。