JS是怎么页面加载完的：DOMContentLoaded事件、load事件、readystatechange事件
在JavaScript中，可以通过监听不同的事件来确定页面的加载状态。DOMContentLoaded事件、load事件和readystatechange事件是最常用的方法。DOM是指文档对象模型（Document Object Model），它是HTML和XML文档的编程接口。DOMContentLoaded事件会在HTML文档被完全加载和解析后触发，但不等待样式表、图像和子框架的完全加载。load事件则是在页面的所有资源，包括样式表、图像等都完全加载后触发。readystatechange事件会在文档的加载状态改变时触发，从loading到interactive再到complete。下面将详细介绍DOMContentLoaded事件。
一、DOMContentLoaded事件
DOMContentLoaded事件是指浏览器完全加载并解析HTML文档后触发的事件，但不等待样式表、图像和子框架的完全加载。这意味着你可以在页面的内容还没有完全显示出来之前，执行一些JavaScript代码。以下是如何使用DOMContentLoaded事件的详细介绍。
1、事件触发机制
当浏览器完成HTML文档的解析，并且所有的DOM节点都已经加载完毕，但不包括样式表、图像和子框架时，DOMContentLoaded事件将被触发。这个事件非常适合在页面结构已经加载完成但其他资源还未加载时执行一些初始化操作。
2、使用方法
可以通过document.addEventListener方法来监听DOMContentLoaded事件。下面是一个简单的示例：
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM fully loaded and parsed');
// 这里可以放置需要在DOM加载完成后执行的代码
});
这种方法非常适合在DOM加载完成后执行一些初始化操作，如绑定事件监听器、修改DOM结构等。
3、与其他事件的对比
与DOMContentLoaded事件相比，load事件会在页面的所有资源（包括样式表、图像等）都完全加载后才触发。因此，如果你只关心DOM的加载状态，DOMContentLoaded事件会更适合。而readystatechange事件则会在文档的加载状态改变时触发，可以提供更细粒度的控制。
4、实际应用
在实际项目中，DOMContentLoaded事件可以用来确保DOM结构已经加载完成，从而避免在DOM还未加载完成时操作DOM元素导致的错误。例如：
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
});
这种方式可以确保在绑定事件监听器时，DOM节点已经存在。
二、load事件
load事件是在页面的所有资源（包括样式表、图像等）都完全加载后触发的。这意味着当你需要确保页面的所有资源都已经加载完成时，可以使用load事件。
1、事件触发机制
load事件会在页面的所有资源都完全加载后触发，包括外部资源如样式表、图像和子框架。这使得它非常适合在需要确保所有资源都已经加载完成后执行一些代码的场景中使用。
2、使用方法
同样地，可以通过window.addEventListener方法来监听load事件。下面是一个简单的示例：
window.addEventListener('load', function() {
console.log('All resources finished loading!');
// 这里可以放置需要在所有资源加载完成后执行的代码
});
3、实际应用
在实际项目中，load事件可以用来确保所有资源都已经加载完成，从而避免在资源还未加载完成时进行操作导致的错误。例如：
window.addEventListener('load', function() {
const image = document.getElementById('myImage');
image.style.display = 'block';
});
这种方式可以确保在操作图像元素时，图像已经完全加载完成。
三、readystatechange事件
readystatechange事件会在文档的加载状态改变时触发，可以提供更细粒度的控制。文档的加载状态包括loading、interactive和complete。
1、事件触发机制
readystatechange事件会在文档的加载状态改变时触发，具体的状态包括：
loading：文档仍在加载中interactive：文档已经解析完毕，但资源（如图像、样式表等）仍在加载中complete：文档和所有资源都已经完全加载完成
2、使用方法
可以通过document.addEventListener方法来监听readystatechange事件。下面是一个简单的示例：
document.addEventListener('readystatechange', function() {
if (document.readyState === 'interactive') {
console.log('Document is interactive but resources are still loading');
} else if (document.readyState === 'complete') {
console.log('Document and all resources are fully loaded');
}
// 这里可以放置需要在不同加载状态下执行的代码
});
3、实际应用
在实际项目中，readystatechange事件可以用来在文档的不同加载状态下执行不同的操作。例如：
document.addEventListener('readystatechange', function() {
if (document.readyState === 'interactive') {
// 文档已经解析完毕，可以进行一些初始化操作
const initElement = document.createElement('div');
initElement.innerText = 'Document is interactive';
document.body.appendChild(initElement);
} else if (document.readyState === 'complete') {
// 文档和所有资源都已经完全加载完成，可以进行一些后续操作
const completeElement = document.createElement('div');
completeElement.innerText = 'Document and all resources are fully loaded';
document.body.appendChild(completeElement);
}
});
这种方式可以在文档的不同加载状态下执行不同的操作，从而提供更细粒度的控制。
四、结合使用
在实际项目中，可以根据具体需求结合使用DOMContentLoaded、load和readystatechange事件。例如：
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM fully loaded and parsed');
// 初始化操作
});
window.addEventListener('load', function() {
console.log('All resources finished loading!');
// 资源加载完成后的操作
});
document.addEventListener('readystatechange', function() {
if (document.readyState === 'interactive') {
console.log('Document is interactive but resources are still loading');
} else if (document.readyState === 'complete') {
console.log('Document and all resources are fully loaded');
}
});
通过结合使用不同的事件，可以确保在不同的加载状态下执行相应的操作，从而提高代码的健壮性和可靠性。
五、延伸阅读
1、异步脚本和延迟脚本
在现代Web开发中，异步脚本和延迟脚本也是确保页面加载顺利的重要技术。异步脚本（async）会在下载完成后立即执行，而不等待其他脚本或资源的加载。延迟脚本（defer）会在文档解析完成后执行，但会按照顺序执行。
<script src="example.js" async></script>
<script src="example.js" defer></script>
2、性能优化
为了提高页面加载性能，可以使用各种性能优化技术，如懒加载（lazy loading）、预加载（preloading）等。这些技术可以确保页面在加载过程中不会出现卡顿，从而提高用户体验。
3、项目管理工具
在复杂的Web项目中，使用高效的项目管理工具可以大大提高开发效率。例如，研发项目管理系统PingCode和通用项目协作软件Worktile都是非常优秀的项目管理工具，可以帮助团队更好地进行项目管理和协作。
// 示例代码
const projectManagementTool = new PingCode();
projectManagementTool.createProject('New Web Project');
const collaborationTool = new Worktile();
collaborationTool.addTeamMember('John Doe');
通过使用这些工具，可以更好地进行项目管理和团队协作，从而提高项目的成功率。
结论
通过本文的介绍，相信你已经了解了如何通过DOMContentLoaded、load和readystatechange事件来确定页面的加载状态。在实际项目中，可以根据具体需求结合使用不同的事件，从而确保在不同的加载状态下执行相应的操作。此外，使用异步脚本和延迟脚本、性能优化技术以及高效的项目管理工具也可以大大提高页面加载性能和开发效率。希望本文对你有所帮助。
相关问答FAQs：
1. 页面加载完后，如何使用JavaScript来执行特定的操作？
在页面加载完毕后，您可以使用JavaScript来执行各种操作。您可以通过使用window.onload事件来确保在页面完全加载后执行代码。例如，您可以使用以下代码执行某些操作：
window.onload = function() {
// 在这里编写您的代码
// 例如，修改页面元素，发送AJAX请求等等
}
2. 如何使用JavaScript在页面加载完毕后显示一个弹窗？
如果您希望在页面加载完毕后显示一个弹窗，您可以在window.onload事件处理程序中使用alert()函数来实现。例如：
window.onload = function() {
alert("页面加载完毕！");
// 在这里可以添加其他操作
}
3. 如何使用JavaScript在页面加载完毕后执行动画效果？
如果您想在页面加载完毕后执行动画效果，您可以使用JavaScript库（如jQuery）来实现。首先，将库文件链接到您的页面中，然后使用document.ready事件来执行动画效果。例如：
$(document).ready(function() {
// 在这里编写您的动画代码
// 例如，使用jQuery的animate()函数来实现动画效果
});
请注意，这只是JavaScript页面加载完成后执行操作的一些示例。具体要执行的操作取决于您的需求和代码能力。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3871887
