HTML中script标签中的那些属性 script标签属性有哪些
zhezhongyun 2024-12-27 17:49 45 浏览
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> 标签属性，是编写高效、可靠前端代码的关键一步。
相关推荐
- Go语言标准库中5个被低估的强大package
-
在Go语言的世界里，开发者们往往对fmt、net/http这些“明星包”耳熟能详，却忽略了标准库里藏着的一批“宝藏工具”。它们功能强大却低调内敛，能解决并发控制、内存优化、日志管理等核心问题。今天就带...
- 作为测试人，如何优雅地查看Log日志?
-
作为一名测试工程师，测试工作中和Linux打交道的地方有很多。比如查看日志、定位Bug、修改文件、部署环境等。项目部署在Linux上，如果某个功能发生错误，就需要我们去排查出错的原因，所以熟练地掌握查...
- Java 从底层与接口实现了解String、StringBuffer、StringBuilder
-
String、StringBuffer和StringBuilder的接口实现关系：String：字符串常量，字符串长度不可变。Java中String是immutable（不可变）的。用于存放字符...
- FluentData 从入门到精通:C#.NET 数据访问最佳实践
-
简介FluentData是一个微型ORM（micro-ORM），主打「FluentAPI」风格，让开发者在保持对原生SQL完全控制的同时，享受链式调用的便捷性。它与Dapper、Massi...
- 团队协作-代码格式化工具clang-format
-
环境：clang-format:10.0.0前言统一的代码规范对于整个团队来说十分重要，通过git/svn在提交前进行统一的ClangFormat格式化，可以有效避免由于人工操作带来的代码格式问题。C...
- C# 数据操作系列 - 15 SqlSugar 增删改查详解(超长篇)
-
0.前言继上一篇，以及上上篇，我们对SqlSugar有了一个大概的认识，但是这并不完美，因为那些都是理论知识，无法描述我们工程开发中实际情况。而这一篇，将带领小伙伴们一起试着写一个能在工程中使用的模...
- Mac OS 下 Unix 使用最多的100条命令(收藏级)
-
MacOS内置基于Unix的强大终端（Terminal），对开发者、运维工程师和日常用户来说，掌握常用的Unix命令是提升效率的关键。本文整理了100条在MacOS下最常用的U...
- C语言字符串操作总结大全(超详细)
-
C语言字符串操作总结大全(超详细)1）字符串操作strcpy(p,p1)复制字符串strncpy(p,p1,n)复制指定长度字符串strcat(p,p1)附加字符串strncat...
- 经常使用到开源的MySQL，今天我们就来系统地认识一下
-
作为程序员，我们在项目中会使用到许多种类的数据库，根据业务类型、并发量和数据要求等选择不同类型的数据库，比如MySQL、Oracle、SQLServer、SQLite、MongoDB和Redis等。今...
- 电脑蓝屏代码大全_电脑蓝屏代码大全及解决方案
-
0X0000000操作完成0X0000001不正确的函数0X0000002系统找不到指定的文件0X0000003系统找不到指定的路径0X0000004系统无法打开文件0X0000005拒绝...
- 8个增强PHP程序安全的函数_php性能优化及安全策略
-
安全是编程非常重要的一个方面。在任何一种编程语言中，都提供了许多的函数或者模块来确保程序的安全性。在现代网站应用中，经常要获取来自世界各地用户的输入，但是，我们都知道“永远不能相信那些用户输入的数据”...
- css优化都有哪些优化方案_css性能优化技巧
-
CSS优化其实可以分成几个层面：性能优化、可维护性优化、兼容性优化以及用户体验优化。这里我帮你梳理一份比较系统的CSS优化方案清单，方便你参考：一、加载性能优化减少CSS文件体积压缩CSS...
- 筹划20年，他终于拍成了这部电影_筹划20年,他终于拍成了这部电影英语
-
如果提名好莱坞最难搞影星，你第一时间会联想到谁？是坏脾气的西恩·潘，还是曾因吸毒锒铛入狱的小罗伯特·唐尼，亦或是沉迷酒精影响工作的罗素·克劳？上述大咖，往往都有着这样或那样的瑕疵。可即便如此，却都仍旧...
- Keycloak Servlet Filter Adapter使用
-
KeycloakClientAdapters简介Keycloakclientadaptersarelibrariesthatmakeitveryeasytosecurea...
- 一些常用的linux常用的命令_linux常用命令有哪些?
-
在Linux的世界里，命令是与系统交互的基础。掌握常用命令不仅能让你高效地管理文件、进程和网络，还能为你进一步学习系统管理和自动化打下坚实的基础。本文将深入探讨一些最常用且功能强大的Linux...
- 一周热门
- 最近发表
- 标签列表
-
- 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)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)