当前位置：首页 > 行业动态 > 正文

htmljs引用

HTML引用JS需用` 标签，可内联或外链，外链时src 指定路径，常置于

HTML引用JavaScript的常见方式

内部脚本（直接在HTML中编写）

将<script>标签直接放在<body>或<head>中,适用于少量逻辑。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">内部脚本示例</title>
  <script>
    // 页面加载时直接执行
    alert("欢迎访问本站！");
  </script>
</head>
<body>
  <h1>内部脚本演示</h1>
</body>
</html>

外部脚本（链接独立JS文件）

通过<script src="路径">引入外部文件,便于复用和维护。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">外部脚本示例</title>
  <script src="main.js"></script> <!-引入外部脚本 -->
</head>
<body>
  <h1>外部脚本演示</h1>
</body>
</html>

异步与延迟加载（async/defer）

控制脚本加载和执行时机，优化页面性能。
| 属性 | 加载方式 | 执行时机 | 适用场景 |
|———|————————|———————————–|—————————|
| 无 | 同步阻塞 | 立即下载并执行，阻塞后续内容渲染 | 少量关键脚本 |
| async | 异步非阻塞 | 下载后立即执行，不保证执行顺序 | 第三方库（如广告代码） |
| defer | 异步但保持顺序 | 全部下载后按顺序执行，先于DOM加载 | 自定义逻辑脚本 |

示例：

<script src="analytics.js" async></script>
<script src="main.js" defer></script>

常见问题与解答

问题1：如何确保外部脚本加载完成后再执行？

解答：
使用defer属性或监听load事件。

<script src="main.js" defer></script> <!-自动等待 -->
<script>
  document.querySelector('script[src="main.js"]').addEventListener('load', () => {
    console.log('main.js 已加载');
  });
</script>

问题2：多个脚本的加载顺序如何控制？

解答：

  • 同步脚本：按代码顺序执行,会阻塞页面渲染。
  • defer脚本：按顺序执行,但允许页面先渲染。
  • async脚本：并发加载，执行顺序不确定。
    建议：将关键逻辑放在defer脚本中,第三方库使用`
0

相关文章