JavaScript 中 document load 和 DOMContentLoaded 事件之间的区别
要验证网页是否已完全加载，请使用 DOMContentLoaded 和 load 事件。但是，有些因素会影响人们选择其中一种。让我们看看它们两者，看看它们是如何运作的。
当触发 DOMContentLoaded 事件时，基本 HTML 页面已加载，其解析已完成。样式表、子框架和其他附加组件(如照片和图片)不会因此事件而延迟，直到它们完成加载。
当页面完全加载时，应调用另一个名为 load 的事件。当 DOMContentLoaded 更合适时，通常习惯使用 load。
DOM 解析由同步 JavaScript 暂停。如果您希望在用户请求页面后尽快解析 DOM，则可以将 JavaScript 设为异步，并优化样式表加载。加载的样式表通常会从主要 HTML 内容中"窃取"流量，并减慢 DOM 解析速度，因为它们是同时加载的。
语法
document.addEventListener("DOMContentLoaded", function(e) {
console.log("GfG 页面已加载");
});
示例
在此示例中，让我们了解指示网页 DOM 加载完成的消息。它在控制台日志窗口中可见，如下所示。
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(e) {
console.log("TutorialsPoint page has loaded for you");
});
</script>
</head>
<body style="text-align: center">
<h3>Join one of the world’s largest online learning marketplaces.</h3>
<br>
<img src="https://www.tutorialspoint.com/images/logo.png">
</body>
</html>
使用 DOMContentLoaded 事件的好处包括
当消息或内容显示得更快时，用户体验会得到增强。
页面加载所需的时间更少。
文档加载 - 加载事件使用不同的执行方法。当网页的所有元素(包括 DOM 层次结构和相关功能，如 CSS 和 JavaScript 文件、图像和照片以及外部链接)都已加载时，此事件完成。因此，加载事件本质上有助于确定页面是否已完全加载。
语法
document.addEventListener("DOMContentLoaded", function(e) {
console.log("GfG page has loaded");
});
示例
load 事件是在整个网页(HTML)完全加载后为 window 对象触发的，包括所有补充资源，如 JavaScript、CSS 和图片。您可以使用 addEventListener() 函数创建一个事件侦听器来处理 load 事件。
从历史上看，我们使用 load 事件在文档加载后执行脚本。但是，还有其他情况可能更合适。
DOMContentLoaded 和 load 是两个主要事件。根据 JavaScript.info，前者是在浏览器加载了所有外部资源(包括图像和样式表)但尚未构建 DOM 树时触发的，而后者是在加载了所有外部资源(包括图像和样式表)时触发的。
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
document.addEventListener("load", function(e) {
console.log("TutorialsPoint page has loaded completely for you");
});
</script>
</head>
<body style="text-align: center">
<h3>Enroll now in the most popular and best rated courses at TutorialsPoint.</h3>
<br>
<img src="https://www.tutorialspoint.com/images/logo.png">
</body>
</html>
使用 load 事件的好处
此事件有助于确定网页中每个元素的加载时间。
示例
浏览器窗口由 window 对象表示。元素加载完成后，onload 属性处理 load 事件。它与 window 元素一起使用，在网页加载过程完成后运行脚本。此属性的处理程序函数设置为需要运行的函数。网页加载完成后，将立即执行该函数。
语法
window.onload = function exampleFunction() {
// 要执行的函数
}
示例
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<h2 style="color: rgb(6, 94, 119)">
Learn JavaScript with TutorialsPoint! </h2>
<strong>
In javascrip, how do I start a function when the page loads?
</strong>
<p>
The script has been already executed up. For the output, look at the console.
</p>
<script>
window.onload = function exampleFunction() {
console.log('Now, your script will load.');
}
</script>
</body>
</html>
