怎么让js在页面加载

怎么让JS在页面加载：使用<script>标签加载、使用defer和async属性、把脚本放在页面底部。特别推荐使用defer属性，因为它允许脚本在页面解析完成后执行，不会阻塞HTML的加载。

使用JavaScript在页面加载时执行特定的代码是Web开发中的常见需求。合理的脚本加载方法可以显著提高页面性能和用户体验。

一、使用`<script>`标签加载

最基本的方法就是在HTML文件中使用<script>标签。这种方法会在浏览器解析到<script>标签时立即执行JavaScript代码。通常有两种方式来加载脚本：内联脚本和外部脚本。

1、内联脚本

内联脚本是将JavaScript代码直接写在HTML文件中。如下例所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Script Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        console.log('Inline script executed');
    </script>
</body>
</html>

优点：

简单直接，适合小段代码。

缺点：

难以维护，代码冗余。
无法利用浏览器缓存。

2、外部脚本

外部脚本是将JavaScript代码放在单独的.js文件中，然后通过<script>标签引入。

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

优点：

代码模块化，易于维护。
可利用浏览器缓存，提高加载速度。

缺点：

可能导致页面加载阻塞。

二、使用`defer`和`async`属性

在加载外部脚本时，可以使用defer和async属性来优化页面加载性能。

1、`defer`属性

使用defer属性可以让脚本在HTML文档完全解析之后再执行，但在DOMContentLoaded事件之前执行。如下所示：

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

优点：

不阻塞HTML解析。
保证脚本按顺序执行。

缺点：

仅适用于外部脚本。

2、`async`属性

使用async属性可以让脚本异步加载和执行，即脚本的加载和执行不会阻塞HTML的解析。

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

优点：

不阻塞HTML解析。

缺点：

无法保证脚本的执行顺序。

三、把脚本放在页面底部

另一个简单有效的方法是将<script>标签放在HTML文档的底部，即在</body>标签之前。这样可以确保在脚本执行之前，HTML内容已经完全加载。

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

优点：

简单有效。
保证页面内容先于脚本加载。

缺点：

可能导致脚本执行时页面已经完全渲染，影响用户体验。

四、使用事件监听器

在某些情况下，可能需要在页面完全加载后再执行特定的JavaScript代码。这时可以使用DOMContentLoaded或load事件监听器。

1、`DOMContentLoaded`事件

DOMContentLoaded事件在HTML文档完全加载和解析完成后触发，不必等待样式表、图像等资源加载完成。

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

优点：

不必等待所有资源加载完成。

缺点：

仅适用于需要在DOM解析完成后执行的代码。

2、`load`事件

load事件在页面及所有依赖资源（如样式表和图像）完全加载后触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Load Event Example</title>
    <script>
        window.addEventListener('load', function() {
            console.log('Page fully loaded');
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

优点：

确保所有资源加载完成后执行。

缺点：

可能延迟脚本执行时间。

五、使用JavaScript模块

现代浏览器支持JavaScript模块（ES6模块），这提供了另一种有效的脚本加载方法。通过使用<script>标签的type="module"属性，可以将JavaScript代码组织成模块，提高代码的可维护性和重用性。

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

优点：

提供模块化结构，易于维护和重用。
支持异步加载。

缺点：

需要现代浏览器的支持。

六、使用项目管理工具

在大型项目中，合理管理和加载JavaScript脚本非常重要。项目管理工具可以帮助团队更高效地协作，并优化代码加载策略。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。

1、PingCode

PingCode是一款专业的研发项目管理系统，提供了完善的代码管理和项目协作功能。它支持代码版本控制、任务分配、代码审查等功能，有助于团队高效管理和加载JavaScript代码。

优点：

专业的研发项目管理功能。
支持代码版本控制和审查。

缺点：

可能需要学习曲线。

2、Worktile

Worktile是一款通用的项目协作软件，适用于各类项目管理需求。它提供了任务管理、团队协作、文档共享等功能，有助于团队更好地协作和管理JavaScript代码。

优点：

通用的项目协作功能。
易于上手，界面友好。

缺点：

对于特定的研发需求可能不如专业工具。

七、总结

正确加载JavaScript脚本可以显著提高页面性能和用户体验。通过使用<script>标签、defer和async属性、将脚本放在页面底部以及使用事件监听器等方法，可以实现合理的脚本加载策略。此外，使用JavaScript模块和项目管理工具可以进一步优化代码结构和团队协作。

核心要点：

使用<script>标签加载：内联脚本和外部脚本。
使用defer和async属性：优化脚本加载顺序和性能。
把脚本放在页面底部：确保页面内容先于脚本加载。
使用事件监听器：DOMContentLoaded和load事件。
使用JavaScript模块：提供模块化结构。
使用项目管理工具：推荐PingCode和Worktile。

通过合理的脚本加载策略和工具使用，可以显著提升Web开发效率和页面性能。

怎么让js在页面加载

一、使用<script>标签加载