是否在页面加载前运行模块脚本？
在页面加载前运行模块脚本取决于脚本的类型和设置。通常，JavaScript 脚本可以在 HTML 文档的不同阶段执行，主要包括以下几种方式：
1. 内联脚本 (<script>)
内联脚本默认情况下会在 HTML 解析到该脚本时立即执行。这意味着脚本会在页面加载过程中执行，可能会阻塞页面的渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
console.log('Inline script executed');
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>2. 外部脚本 (<script src="...">)
外部脚本默认情况下也会在 HTML 解析到该脚本时立即执行，类似于内联脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>3. 延迟脚本 (<script defer>)
使用 defer 属性的脚本会在 HTML 文档完全解析完成后，但在 DOMContentLoaded 事件触发之前执行。
<!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>4. 异步脚本 (<script async>)
使用 async 属性的脚本会在下载完成后立即执行，不会阻塞 HTML 解析，但也不会保证执行顺序。
<!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>5. 模块脚本 (<script type="module">)
模块脚本默认情况下会在 HTML 解析到该脚本时立即执行，类似于普通脚本，但它们支持 ES6 模块语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="module" src="module.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>应用场景
- 内联脚本和外部脚本适用于需要在页面加载过程中执行的脚本。
- 延迟脚本适用于需要在 HTML 解析完成后执行的脚本，且不关心执行顺序。
- 异步脚本适用于需要尽快下载和执行的脚本，且不关心执行顺序。
- 模块脚本适用于需要使用 ES6 模块语法的脚本。
常见问题及解决方法
- 脚本阻塞页面渲染：
- 使用
defer或async属性来延迟或异步执行脚本。 - 将脚本放在
</body>标签之前，确保 HTML 解析完成后再执行脚本。
- 使用
- 脚本执行顺序问题：
- 使用
defer属性来保证脚本在 HTML 解析完成后按顺序执行。 - 使用模块脚本的
import和export语法来控制模块加载顺序。
- 使用
通过合理使用这些方法，可以有效地控制脚本的执行时机，提升页面加载性能和用户体验。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
