HTML中script标签中的那些属性 script标签属性有哪些
zhezhongyun 2024-12-27 17:49 52 浏览
HTML中的<script>标签详解
在HTML中，<script> 标签用于包含或引用JavaScript代码，是前端开发中不可或缺的一部分。通过合理使用 <script> 标签及其属性，可以优化网页的加载性能，提升用户体验。本文将深入探讨 <script> 标签的各种属性，包括 src、type、async、defer、charset 等，并通过示例代码和详尽解释，帮助你全面掌握这些属性的用法和最佳实践。
目录
- <script> 标签概述
- 常用属性详解src 属性type 属性async 属性defer 属性charset 属性其他属性
- <script> 标签的最佳实践
- async 与 defer 的对比分析
- <script> 标签的工作流程 ?
- 示例代码详解
- 总结
- 附录：<script> 标签示意图
<script>标签概述
<script> 标签用于在HTML文档中嵌入或引用JavaScript代码。它可以放置在HTML文档的任意位置，通常位于 <head> 或 <body> 标签内。合理使用 <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），增强安全性。
总结
<script> 标签在HTML文档中扮演着至关重要的角色，通过合理配置其属性，可以显著优化网页的加载性能和用户体验。以下是关键要点：
- src 属性：用于引入外部脚本，促进代码复用和模块化。
- type 属性：指定脚本类型，现代浏览器默认 text/javascript，可省略。
- async 属性：适用于独立脚本，异步加载和执行，不阻塞页面渲染。
- defer 属性：适用于依赖DOM或其他脚本的脚本，延迟执行，保持执行顺序。
- charset 属性：指定脚本字符编码，确保正确解析脚本内容。
- 其他属性：如 crossorigin 和 integrity，增强脚本的安全性和跨域能力。
通过掌握这些属性的用法和最佳实践，开发者可以编写出高效、稳定且安全的前端代码，提升整体应用性能和用户体验。
以下流程图展示了不同属性对 <script> 标签加载和执行流程的影响：
解释：
- 当浏览器遇到不同属性的 <script> 标签时，加载和执行脚本的行为会有所不同。
- 无 async 和 defer：脚本会立即下载并执行，阻塞HTML解析。
- async：脚本异步下载，下载完成后立即执行，不保证执行顺序。
- defer：脚本异步下载，等待HTML解析完成后按顺序执行。
通过本文的详尽解析，相信你已经对HTML中的 <script> 标签及其属性有了全面的了解。合理运用这些属性，可以有效优化网页的加载性能，提升用户体验，同时确保脚本的安全性和稳定性。在实际开发中，根据具体需求和场景，选择合适的 <script> 标签属性，是编写高效、可靠前端代码的关键一步。
相关推荐
- Python入门学习记录之一:变量_python怎么用变量
-
写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...
- python变量命名规则——来自小白的总结
-
python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...
- Python入门学习教程:第 2 章 变量与数据类型
-
2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...
- 绘制学术论文中的“三线表”具体指导
-
在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...
- Python基础语法知识--变量和数据类型
-
学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...
- 一文搞懂 Python 中的所有标点符号
-
反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...
- Python变量类型和运算符_python中变量的含义
-
别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...
- 从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序
-
在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...
- Python中下划线 ‘_’ 的用法，你知道几种
-
Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...
- 解锁Shell编程:变量_shell $变量
-
引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...
- 一文学会Python的变量命名规则!_python的变量命名有哪些要求
-
目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...
- 更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for
-
src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...
- C++第五课:变量的命名规则_c++中变量的命名规则
-
变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....
- Rust编程-核心篇-不安全编程_rust安全性
-
Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...
- 探秘 Python 内存管理:背后的神奇机制
-
在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- opacity 属性 (32)
- transition 属性 (33)
- 1-1. 变量声明 (31)