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

html导入js

html导入js 第1张

HTML导入JS通过“标签实现，支持src路径

HTML导入JavaScript的常见方式

基本<script>标签导入

  • 语法：直接在HTML中通过<script>标签引入JavaScript文件或内联代码。
  • 位置：通常放在<head>或<body>标签内。
  • 示例： 
    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>导入JS示例</title>
    <!-外部JS文件 -->
    <script src="main.js"></script>
    <!-内联JS代码 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成');
        });
    </script>
</head>
<body>
    <!-也可以将<script>放在底部 -->
    <script src="utils.js"></script>
</body>
</html>

异步加载（async属性）

  • 作用：并行加载脚本，不阻塞页面解析,加载完成立即执行。
  • 适用场景：第三方库（如广告、分析工具）,无需等待其执行即可渲染页面。
  • 示例： 
    <script src="analytics.js" async></script>

延迟加载（defer属性）

  • 作用：并行加载脚本,但延迟到HTML解析完成后按顺序执行。
  • 适用场景：依赖DOM元素的脚本,需确保页面结构加载完成。
  • 示例： 
    <script src="app.js" defer></script>

ES6模块化导入

  • 语法：使用type="module"启用ES6模块，通过import语句引入。
  • 特点：支持import/export语法,需注意路径和浏览器兼容性。
  • 示例： 
    <script type="module" src="main.js"></script>
    // main.js
import { greet } from './utils.js';
greet('World');

不同导入方式的对比表

特性 基本<script> async defer ES6模块
加载顺序 同步阻塞 并行无序 并行有序 按需加载依赖
执行时机 立即执行 加载完立即执行 HTML解析后执行 依赖解析后执行
浏览器兼容性 IE5+ IE10+ IE10+ IE11+（需Polyfill）
适用场景 简单脚本 第三方资源 依赖DOM的脚本 现代化项目
缓存机制 支持 支持 支持 需服务器配置CORS

常见问题与解答

问题1：如何选择async或defer？

  • 解答：
    • 若脚本不依赖DOM元素且需尽快加载（如广告、统计代码），使用async。
    • 若脚本依赖DOM结构或需按顺序执行（如页面初始化逻辑），使用defer。
    • 若无特殊需求，建议将脚本放在<body>底部,避免阻塞渲染。

问题2：ES6模块化导入时报错Failed to fetch怎么办？

  • 解答：
    • 检查路径：确保<script>标签的src路径正确，且服务器允许跨域访问。
    • CORS配置：若模块文件来自不同域名，需服务器设置Access-Control-Allow-Origin。
    • 本地开发：使用开发服务器（如live-server）或打包工具（如Webpack）处理
0

相关文章