html怎么加载时加载js

HTML加载时加载JS的方法有：通过script标签嵌入、通过外部引用、放置在页面底部、使用async和defer属性。其中，将JavaScript文件放置在页面底部可以显著提升页面加载性能，因为浏览器会先加载HTML内容，再加载JavaScript。这种方法不仅优化了页面加载速度，还减少了用户等待时间。

一、通过script标签嵌入

在HTML中直接嵌入JavaScript代码是最基础的方法。使用<script>标签可以在HTML文件中直接编写JavaScript。虽然这种方法简单直观，但对大型项目不太适用，因为它会使HTML文件变得冗长且难以维护。

<!DOCTYPE html>
<html>
<head>
    <title>嵌入式JavaScript</title>
</head>
<body>
    <h1>嵌入JavaScript示例</h1>
    <script>
        document.write('Hello, World!');
    </script>
</body>
</html>

在上面的例子中，JavaScript代码直接嵌入在HTML文件中，浏览器在解析HTML时会立即执行该JavaScript代码。

二、通过外部引用

另一种常见的方法是将JavaScript代码存储在外部文件中，并在HTML中通过<script>标签的src属性进行引用。这种方法有助于分离HTML结构和JavaScript逻辑，使代码更加模块化和易于维护。

<!DOCTYPE html>
<html>
<head>
    <title>外部JavaScript</title>
</head>
<body>
    <h1>外部JavaScript示例</h1>
    <script src="scripts.js"></script>
</body>
</html>

外部文件scripts.js的内容如下：

document.write('Hello, World!');

这种方法的优点是代码更清晰、易于管理，并且可以在多个HTML文件中重复使用相同的JavaScript文件。

三、放置在页面底部

将JavaScript代码放置在页面底部是提升页面加载性能的一种有效方法。这样做的原因是浏览器在解析HTML时会阻塞后续的内容加载，直到JavaScript代码执行完毕。因此，将JavaScript代码放在页面底部可以确保浏览器优先加载和渲染HTML内容，提高页面响应速度。

<!DOCTYPE html>
<html>
<head>
    <title>底部JavaScript</title>
</head>
<body>
    <h1>底部JavaScript示例</h1>
    <script src="scripts.js"></script>
</body>
</html>

在这个例子中，<script>标签放置在</body>标签之前，确保浏览器在加载和解析HTML内容后才执行JavaScript代码。

四、使用async和defer属性

HTML5引入了async和defer属性，进一步优化了JavaScript的加载和执行方式。这两个属性可以让开发者更灵活地控制JavaScript的执行时机。

使用async属性

async属性表示异步加载JavaScript文件，即浏览器在继续解析HTML内容的同时加载JavaScript文件。一旦文件加载完成，立即执行，不会阻塞页面的其他操作。

<!DOCTYPE html>
<html>
<head>
    <title>Async JavaScript</title>
    <script src="async-script.js" async></script>
</head>
<body>
    <h1>Async JavaScript示例</h1>
</body>
</html>

在使用async属性时，多个脚本文件的执行顺序可能与它们在HTML中的出现顺序不同，因此要注意脚本之间的依赖关系。

使用defer属性

defer属性表示延迟执行JavaScript文件，即浏览器会在完成HTML解析后再执行JavaScript文件。这种方式保证了脚本的执行顺序与它们在HTML中的出现顺序一致。

<!DOCTYPE html>
<html>
<head>
    <title>Defer JavaScript</title>
    <script src="defer-script.js" defer></script>
</head>
<body>
    <h1>Defer JavaScript示例</h1>
</body>
</html>

使用defer属性可以确保JavaScript代码在HTML内容完全加载和解析后执行，适用于需要等待DOM结构加载完毕的脚本。

五、模块化加载

随着现代Web开发技术的发展，模块化加载JavaScript代码变得越来越流行。使用模块化加载可以将代码拆分成多个独立的模块，根据需要按需加载，进一步提升页面加载性能和代码可维护性。

使用ES6模块

ES6引入了模块化语法，可以通过import和export关键字实现模块化加载。

<!DOCTYPE html>
<html>
<head>
    <title>ES6模块</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <h1>ES6模块示例</h1>
</body>
</html>

main.js文件内容如下：

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

module.js文件内容如下：

export function greet() {
    document.write('Hello, World!');
}

使用ES6模块可以将代码拆分成多个独立的文件，根据需要按需加载，提升代码的可维护性和复用性。

使用Webpack等模块打包工具

Webpack是一个流行的模块打包工具，可以将多个JavaScript模块打包成一个或多个文件，实现按需加载和代码分割。

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    }
};

通过Webpack打包后，可以在HTML中引用打包后的文件：

<!DOCTYPE html>
<html>
<head>
    <title>Webpack模块</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    <h1>Webpack模块示例</h1>
</body>
</html>

使用Webpack等工具可以实现复杂的模块化加载和代码优化，提高开发效率和代码质量。

六、总结

通过上述方法，我们可以灵活地控制JavaScript在HTML加载时的行为，从而提升页面加载性能和用户体验。具体选择哪种方法取决于项目的具体需求和复杂性。在实际开发中，可以结合多种方法，合理安排JavaScript的加载和执行顺序，确保页面的高效运行。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来更好地管理和协作项目，提高开发效率。