HTML中的

说明：

• 详细解释：

  • 当浏览器解析到带有 src 属性的

    详细解释：

    • type 属性用于告诉浏览器脚本的类型，默认值为 text/javascript，因此在现代浏览器中可以省略。
    • 适用于引入非JavaScript脚本，如 TypeScript 或 JSONP，需要明确指定类型。

    示例：

    注意事项：

    • 如果不需要指定非默认类型，可以省略 type 属性，简化代码。

    async属性 ?

    作用： 指示浏览器在下载脚本时是否异步执行脚本。当设置为 async 时，脚本会在下载过程中并行执行，不会阻塞页面的渲染。

    示例：

    详细解释：

    • 异步加载：脚本下载和页面解析是并行进行的，脚本下载完成后立即执行，可能会在页面解析完成之前执行。
    • 适用于独立的脚本，不依赖于其他脚本或页面内容。

    优点：

    • 提高页面加载速度，减少阻塞。
    • 用户体验更佳，因为页面可以更快地显示。

    缺点：

    • 执行顺序不确定：多个 async 脚本的执行顺序不固定，可能导致依赖问题。

    适用场景：

    • 广告脚本、分析脚本等独立脚本，不依赖于页面内容或其他脚本。

    defer属性 ?

    作用： 指示浏览器在解析完整个文档后再执行脚本。当设置为 defer 时，脚本会在文档解析完毕后按照顺序执行，但在 DOMContentLoaded 事件触发之前执行。

    示例：

    详细解释：

    • 延迟执行：脚本下载和页面解析是并行进行的，但脚本执行会被延迟到文档解析完成后。
    • 保持执行顺序：多个 defer 脚本会按照它们在HTML中的顺序依次执行。

    优点：

    • 保持脚本执行顺序，适用于依赖关系明确的脚本。
    • 不阻塞页面渲染，提高加载性能。

    缺点：

    • 仅在HTML文档完全解析后执行，可能导致脚本执行稍有延迟。

    适用场景：

    • 依赖DOM元素的脚本，如页面初始化、交互功能等。

    charset属性

    作用： 指定脚本的字符编码。

    示例：

    详细解释：

    • 确保浏览器以正确的字符编码解析和执行脚本，避免乱码问题。
    • 在引入非ASCII字符的脚本时尤为重要。

    注意事项：

    • 在现代开发中，建议统一使用 UTF-8 编码，并在HTML文档中通过 设置全局编码，通常无需单独为
    • integrity：用于子资源完整性检查，通过哈希值验证脚本的完整性，防止脚本被篡改。
    • 示例：
    • nomodule：用于指定脚本不应在支持ES6模块的浏览器中加载，常用于加载传统脚本与模块脚本的兼容。
    • 示例：

    ---

  • 使用 async 和 defer 属性：
  • 根据脚本的依赖关系和执行时机，合理选择 async 或 defer 属性，优化脚本的加载和执行。
  • 避免使用全局变量：
  • 尽量减少全局命名空间的污染，使用模块化开发（如ES6模块）来管理变量和函数，提升代码的可维护性和可复用性。
  • 利用子资源完整性（SRI）：
  • 使用 integrity 属性确保引入的外部脚本未被篡改，增强安全性。
  • 压缩和合并脚本文件：
  • 通过压缩和合并脚本文件，减少HTTP请求次数和文件大小，提升加载速度。
  • 按需加载脚本：
  • 根据用户的操作或页面的需要，动态加载脚本，避免一次性加载所有脚本，提升初始加载性能。

  ---

  async与defer的对比分析

  async 和 defer 是

  欢迎访问

  解释：

  • 在 部分引入了一个外部脚本 external-script.js。
  • 默认情况下，浏览器会在解析到

    欢迎访问

    解释：

    • async 属性指示浏览器异步下载脚本 async-script.js。
    • 脚本下载完成后立即执行，不会阻塞HTML解析。
    • 适用于独立脚本，不依赖其他脚本或DOM元素。

    示例 3：使用defer属性

    
    
    
      
      
      
    
    
      
    欢迎访问
    
    
    

    解释：

    • defer 属性指示浏览器异步下载脚本 defer-script.js，并在HTML解析完成后按顺序执行。
    • 脚本执行不会阻塞HTML解析，适用于依赖DOM元素或其他脚本的情况。

    示例 4：内联脚本与type属性

    
    
    
      
      
      
    
    
      
    欢迎访问
    
    
    

    解释：

    • 在 部分使用内联脚本，指定了 type="text/javascript"。
    • 在现代浏览器中，type 属性可以省略，因为默认值为 text/javascript。

    示例 5：使用charset属性

    
    
    
      
      
      
    
    
      
    欢迎访问
    
    
    

    解释：

    • 指定脚本文件 script-with-charset.js 的字符编码为 UTF-8。
    • 确保脚本内容以正确的编码方式解析，避免乱码。

    示例 6：使用crossorigin和integrity属性

    
    
    
      
      
      
    
    
      
    欢迎访问
    
    
    

    解释：

    • 子资源完整性（SRI）：integrity 属性提供了脚本文件的哈希值，浏览器会在下载脚本后验证其完整性，防止脚本被篡改。
    • CORS：crossorigin="anonymous" 属性指定CORS请求模式，确保脚本请求不携带用户凭证（如Cookies），增强安全性。

    ---

    总结