HTML中script标签中的那些属性

myzbx 2024-12-02 22:38 51 浏览

HTML中的<script>标签详解

在HTML中，<script> 标签用于包含或引用JavaScript代码，是前端开发中不可或缺的一部分。通过合理使用 <script> 标签及其属性，可以优化网页的加载性能，提升用户体验。本文将深入探讨 <script> 标签的各种属性，包括 src、type、async、defer、charset 等，并通过示例代码和详尽解释，帮助你全面掌握这些属性的用法和最佳实践。

<script>标签概述

基本语法：

<script src="path/to/script.js" type="text/javascript"></script>

说明：

<script> 标签可以包含内联JavaScript代码，也可以通过 src 属性引用外部JavaScript文件。
默认情况下，<script> 标签会阻塞页面的解析，直到脚本下载和执行完成。

常用属性详解

src属性

作用： 指定外部JavaScript文件的URL，通过该属性可以引入外部的JavaScript文件。

示例：

<script src="script.js"></script>

详细解释：

当浏览器解析到带有 src 属性的 <script> 标签时，会停止解析HTML，下载并执行指定的JavaScript文件。
外部脚本文件有助于代码的模块化和复用，提升代码维护性。

注意事项：

相对路径与绝对路径都可以使用。
使用外部脚本可以减少HTML文件的大小，加快初始加载速度。

type属性

作用： 指定脚本的内容类型，通常使用 text/javascript 来表示JavaScript代码。

示例：

<script type="text/javascript">
  console.log('Hello, World!');
</script>

详细解释：

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

示例：

<script type="application/json" id="config">
  {
    "apiKey": "12345",
    "theme": "dark"
  }
</script>

注意事项：

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

async属性 ?

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

示例：

<script src="script.js" async></script>

详细解释：

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

优点：

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

缺点：

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

适用场景：

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

defer属性 ?

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

示例：

<script src="script.js" defer></script>

详细解释：

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

优点：

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

缺点：

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

适用场景：

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

charset属性

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

示例：

<script src="script.js" charset="UTF-8"></script>

详细解释：

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

注意事项：

在现代开发中，建议统一使用 UTF-8 编码，并在HTML文档中通过 <meta charset="UTF-8"> 设置全局编码，通常无需单独为 <script> 标签设置 charset。

其他属性

除了上述主要属性外，<script> 标签还支持其他一些属性：

crossorigin：用于指定CORS请求的模式，支持 anonymous 和 use-credentials。
示例：
<script src="script.js" crossorigin="anonymous"></script>
integrity：用于子资源完整性检查，通过哈希值验证脚本的完整性，防止脚本被篡改。
示例：
<script src="script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxB1ZrZ5u8G8H3M3mZUqG3yN5Jw5bK" crossorigin="anonymous"></script>
nomodule：用于指定脚本不应在支持ES6模块的浏览器中加载，常用于加载传统脚本与模块脚本的兼容。
示例：
<script src="legacy-script.js" nomodule></script>

<script>标签的最佳实践

为了优化网页性能和提升用户体验，以下是使用 <script> 标签的一些最佳实践：

将 <script> 标签放置在页面底部：
将 <script> 标签放在 <body> 结束标签之前，可以避免阻塞页面的渲染，提升首屏加载速度。
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>最佳实践示例</title> </head> <body> <h1>欢迎访问</h1>   <script src="script.js"></script> </body> </html>
使用 async 和 defer 属性：
根据脚本的依赖关系和执行时机，合理选择 async 或 defer 属性，优化脚本的加载和执行。
避免使用全局变量：
尽量减少全局命名空间的污染，使用模块化开发（如ES6模块）来管理变量和函数，提升代码的可维护性和可复用性。
利用子资源完整性（SRI）：
使用 integrity 属性确保引入的外部脚本未被篡改，增强安全性。
压缩和合并脚本文件：
通过压缩和合并脚本文件，减少HTTP请求次数和文件大小，提升加载速度。
按需加载脚本：
根据用户的操作或页面的需要，动态加载脚本，避免一次性加载所有脚本，提升初始加载性能。

async与defer的对比分析

async 和 defer 是 <script> 标签中用于控制脚本加载和执行行为的重要属性。它们都可以在一定程度上优化脚本的加载性能，但适用场景和行为有所不同。

特性	async	defer ?
加载方式	异步加载，下载与页面解析并行	异步加载，下载与页面解析并行
执行时机	下载完成后立即执行，可能在页面解析前执行	页面解析完成后，DOMContentLoaded 事件前执行
执行顺序	不保证顺序，取决于脚本下载完成的先后	按照HTML中出现的顺序执行
适用场景	独立脚本，不依赖其他脚本或页面内容	依赖DOM元素或其他脚本，需保持执行顺序
阻塞页面渲染	不阻塞	不阻塞
浏览器支持	大部分现代浏览器支持	大部分现代浏览器支持

详细对比

加载和执行顺序：
async：脚本下载完成后立即执行，不保证执行顺序。如果有多个 async 脚本，谁先下载完就先执行，可能导致依赖问题。
defer：所有 defer 脚本按照在HTML中出现的顺序执行，即使某个脚本下载较慢，也会等待其他脚本执行完毕。
适用场景：
async 适用于那些独立的脚本，如广告代码、统计代码等，不依赖于页面内容或其他脚本。
defer 适用于那些需要操作DOM或依赖其他脚本的脚本，确保脚本在页面完全解析后执行。

图示对比

HTML解析开始

遇到

异步下载脚本

脚本下载完成

async脚本立即执行

defer脚本等待页面解析完成

继续HTML解析

页面解析完成后按顺序执行defer脚本

DOMContentLoaded事件触发

解释：

当浏览器解析到带有 async 属性的 <script> 标签时，会异步下载脚本，下载完成后立即执行，不影响后续的HTML解析。
当浏览器解析到带有 defer 属性的 <script> 标签时，同样异步下载脚本，但执行会延迟到HTML文档解析完毕后，按顺序执行所有 defer 脚本，然后触发 DOMContentLoaded 事件。

<script>标签的工作流程 ?

理解 <script> 标签的工作流程，有助于优化网页的加载性能和用户体验。以下是 <script> 标签在浏览器中的加载和执行流程：

HTML解析开始
浏览器开始解析HTML文档，从上到下逐行解析。
遇到 <script> 标签
当解析器遇到 <script> 标签时，根据属性决定加载和执行方式。
根据属性决定行为 ??
无 async 和 defer 属性：浏览器会立即停止HTML解析，下载并执行脚本，执行完成后继续解析HTML。
async 属性：浏览器会异步下载脚本，下载完成后立即执行，可能在HTML解析完成前执行。
defer 属性：浏览器会异步下载脚本，等待HTML解析完成后按顺序执行脚本。
脚本执行
脚本执行可能会影响页面的DOM操作和其他脚本的执行。
继续HTML解析 ?♂?
脚本执行完成后，浏览器继续解析HTML文档，直至完成。
触发事件
完成HTML解析后，触发 DOMContentLoaded 事件，表示文档已完全加载和解析。

工作流程示意图

无 async & defer

async

defer

HTML解析开始

遇到

立即下载并执行脚本

异步下载脚本，下载完成后立即执行

异步下载脚本，等待HTML解析完成后执行

继续HTML解析

HTML解析完成后执行脚本

触发DOMContentLoaded事件

解释：

<script> 标签的属性决定了脚本的加载和执行方式，影响页面解析的顺序和性能。

示例代码详解

以下通过几个示例，详细说明 <script> 标签及其属性的使用方法和效果。

示例 1：引入外部脚本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部脚本示例</title>
  <script src="external-script.js"></script>
</head>
<body>
  <h1>欢迎访问</h1>
</body>
</html>

解释：

在 <head> 部分引入了一个外部脚本 external-script.js。
默认情况下，浏览器会在解析到 <script> 标签时，暂停HTML解析，下载并执行脚本，然后继续解析HTML。

示例 2：使用async属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Async脚本示例</title>
  <script src="async-script.js" async></script>
</head>
<body>
  <h1>欢迎访问</h1>
</body>
</html>

解释：

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

示例 3：使用defer属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Defer脚本示例</title>
  <script src="defer-script.js" defer></script>
</head>
<body>
  <h1>欢迎访问</h1>
</body>
</html>

解释：

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内联脚本示例</title>
  <script type="text/javascript">
    console.log('这是一个内联脚本');
  </script>
</head>
<body>
  <h1>欢迎访问</h1>
</body>
</html>

解释：

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

示例 5：使用charset属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Charset脚本示例</title>
  <script src="script-with-charset.js" charset="UTF-8"></script>
</head>
<body>
  <h1>欢迎访问</h1>
</body>
</html>

解释：

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

示例 6：使用crossorigin和integrity属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>SRI示例</title>
  <script src="https://example.com/script.js" 
          integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxB1ZrZ5u8G8H3M3mZUqG3yN5Jw5bK" 
          crossorigin="anonymous"></script>
</head>
<body>
  <h1>欢迎访问</h1>
</body>
</html>

解释：

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

总结

src 属性：用于引入外部脚本，促进代码复用和模块化。
type 属性：指定脚本类型，现代浏览器默认 text/javascript，可省略。
async 属性：适用于独立脚本，异步加载和执行，不阻塞页面渲染。
defer 属性：适用于依赖DOM或其他脚本的脚本，延迟执行，保持执行顺序。
charset 属性：指定脚本字符编码，确保正确解析脚本内容。
其他属性：如 crossorigin 和 integrity，增强脚本的安全性和跨域能力。

通过掌握这些属性的用法和最佳实践，开发者可以编写出高效、稳定且安全的前端代码，提升整体应用性能和用户体验。

以下流程图展示了不同属性对 <script> 标签加载和执行流程的影响：

解释：

当浏览器遇到不同属性的 <script> 标签时，加载和执行脚本的行为会有所不同。
无 async 和 defer：脚本会立即下载并执行，阻塞HTML解析。
async：脚本异步下载，下载完成后立即执行，不保证执行顺序。
defer：脚本异步下载，等待HTML解析完成后按顺序执行。

通过本文的详尽解析，相信你已经对HTML中的 <script> 标签及其属性有了全面的了解。合理运用这些属性，可以有效优化网页的加载性能，提升用户体验，同时确保脚本的安全性和稳定性。在实际开发中，根据具体需求和场景，选择合适的 <script> 标签属性，是编写高效、可靠前端代码的关键一步。

HTML 属性

上一篇：前端开发必读!7个HTML属性助你提升用户体验
下一篇：2021系列——2021年你必须知道的HTML标记和属性

HTML中script标签中的那些属性

HTML中的<script>标签详解

目录

<script>标签概述

常用属性详解

src属性

type属性

async属性 ?

defer属性 ?

charset属性

其他属性

<script>标签的最佳实践

async与defer的对比分析

详细对比

图示对比

<script>标签的工作流程 ?

工作流程示意图

示例代码详解

示例 1：引入外部脚本

示例 2：使用async属性

示例 3：使用defer属性

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

示例 5：使用charset属性

示例 6：使用crossorigin和integrity属性

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿