js先让页面加载怎么

要让JavaScript在页面加载后执行，可以使用以下几种方法：在HTML文档的末尾加载JavaScript、使用window.onload事件监听器、使用DOMContentLoaded事件监听器。这些方法可以确保JavaScript代码在页面完全加载后才执行，从而避免因资源未加载完成而导致的错误。

其中，使用DOMContentLoaded事件监听器是最推荐的方法，因为它能确保在HTML文档完全加载和解析完成后立即执行JavaScript代码，而不必等待样式表、图片等外部资源加载完成。下面我们将详细介绍这些方法，并提供代码示例。

一、在HTML文档的末尾加载JavaScript

这种方法是最简单的，只需将JavaScript代码放在HTML文档的底部，即</body>标签之前。这种方法确保了整个HTML文档在加载JavaScript之前已经完成解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="script.js"></script>
</body>
</html>

在上面的示例中，script.js中的JavaScript代码将在HTML文档完全加载后执行。

二、使用`window.onload`事件监听器

window.onload事件监听器会在页面的全部内容（包括样式表、图片等）加载完成后触发。这种方法确保了所有资源都已加载，但相对较慢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        window.onload = function() {
            console.log("Page fully loaded including stylesheets, images, etc.");
        };
    </script>
</body>
</html>

在上面的示例中，console.log语句将在页面的全部内容加载完成后执行。

三、使用`DOMContentLoaded`事件监听器

DOMContentLoaded事件会在HTML文档完全加载和解析完成后触发，而不必等待样式表、图片等外部资源加载完成。这种方法执行速度较快，是推荐的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("HTML fully loaded and parsed");
        });
    </script>
</body>
</html>

在上面的示例中，console.log语句将在HTML文档完全加载和解析完成后立即执行。

四、使用`defer`和`async`属性加载外部脚本

HTML5引入了defer和async属性，用于控制外部脚本的加载和执行顺序。

1. `defer`属性

defer属性告诉浏览器脚本在文档解析完成后执行。这种方法适用于需要按照顺序执行的脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，script.js将在HTML文档解析完成后执行。

2. `async`属性

async属性告诉浏览器脚本在后台异步加载，并在加载完成后立即执行。这种方法适用于不依赖其他脚本的独立脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js" async></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，script.js将在后台异步加载，并在加载完成后立即执行。

五、使用JavaScript模块（ES6）

现代浏览器支持使用ES6模块，这种方式不仅能确保代码在页面加载后执行，还能利用模块化的优势进行代码组织和管理。

1. 使用`type="module"`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="module">
        import { myFunction } from './module.js';
        myFunction();
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，myFunction将在HTML文档解析完成后立即执行。

2. 使用外部模块文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在main.js文件中：

import { myFunction } from './module.js';
myFunction();

这种方法利用了ES6模块的优势，确保代码在页面加载后执行，并且代码更加模块化和可维护。

六、总结

让JavaScript在页面加载后执行的方法有多种，包括在HTML文档的末尾加载JavaScript、使用window.onload事件监听器、使用DOMContentLoaded事件监听器、使用defer和async属性加载外部脚本以及使用ES6模块。推荐使用DOMContentLoaded事件监听器，因为它能确保在HTML文档完全加载和解析完成后立即执行JavaScript代码，从而提高页面加载速度和用户体验。

无论选择哪种方法，都应根据具体需求和场景进行选择，以确保JavaScript代码在合适的时机执行，并避免因资源未加载完成而导致的错误。

js先让页面加载怎么

一、在HTML文档的末尾加载JavaScript

二、使用window.onload事件监听器

三、使用DOMContentLoaded事件监听器

四、使用defer和async属性加载外部脚本

1. defer属性

2. async属性