HTML中script标签中的那些属性 script标签属性有哪些
zhezhongyun 2024-12-27 17:49 31 浏览
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> 标签属性，是编写高效、可靠前端代码的关键一步。
相关推荐
- 不看必后悔!15个三星GoodLock隐藏小技巧~(上)
-
很多刚用三星手机的星粉们，一定对三星GoodLock这个宝藏App还不是很了解，今天就带大家一起详细去看看GoodLock这个大家族究竟有多少宝藏功能及成员呢？让我们一起来看看吧~由于Good...
- 惊魂幻象理智值监控WA!大字体+范围提示一目了然
-
一个WA助你轻松监控大幻象理智值，不再错过恢复时机这个WA用大字体实时同步我们的理智值下面的图标提示恢复宝珠的剩余次数上面的图标高亮则意味着我们在宝珠的恢复范围内我们可以将图标随意移动到适合自己观察的...
- 盘点十个超炫的jQuery插件（jquery插件是干什么的）
-
“DevExpress14.2新版发布会”即将推出。心动不如行动，赶快报名吧！我们期待与您相约。今天小编为大家搜罗了十个超酷的jQuery插件，这可以使你的网站界面更加友好。jQuery创造了令人难...
- Google官方梳理，Android 多返回栈技术详解
-
用户通过系统返回按钮导航回去的一组页面，在开发中被称为返回栈(backstack)。多返回栈即一堆"返回栈"，对多返回栈的支持是在Navigation2.4.0-alpha0...
- 说三星手机系统不好用，因为没有玩明白三星，三星Diy功能超强大
-
都说三星手机系统不好用，其实真正用起来，挺好用的三星手机系统像块没打磨的玉，默认设置是基础款，用着普通。但你要是肯花点时间，它能变得特别顺手。关键就在一个叫GoodLock的工具，它是三星自家出的...
- Sam Helper三星手机用户必装神器（三星手机必装app）
-
SamHelper这款软件集合了三星手机主题工具当前主题o主题路径o主题安装系统设置屏幕模式o状态栏o文件o频段o暗码Lock&LabsGoodLockoGalaxyLa...
- 外卖套餐搭配的探索和应用（外卖套餐搭配技巧）
-
本文系外卖美食知识图谱系列的第三篇文章，从技术层面我们会介绍外卖套餐搭配的技术方案，包括离线、实时的套餐搭配的迭代，套餐质量评估方案，同时会介绍套餐搭配的业务应用。1.背景让用户更方便快捷地选购到满...
- 用几行原生JS就可以实现丝滑的元素过渡效果
-
作者：ConardLi大家可以看下下面这个应用的页面切换体验，是不是很丝滑～做过体验优化的朋友应该都清楚，如果用原生的CSS或者JS动画去实现，想要实现出类似的效果，不会特别简单，而且也要考...
- 速腾车主RNS315固件及2016年6月地图升级详细教程
-
本来打算买个大众原厂的地图卡，后来在网上看其实不需要原厂地图卡也可以升级，于是开始在网上收集资料，开始天真的以为只要有密匙文件修改一下就可以免费升级了，其实最主要的还是破解的固件，不知道为什么，网上找...
- 学习一个母词act，一次解析一串关联、复合、衍生词族
-
首先形义解读一下act的原始意象，A是力量与行动的开始C是范围的覆盖T是目标目的的接触与刻度合在一起，行动行为艺术力量的复合行为以下是关于act的复合词、词根词缀衍生词及其变形后的词根衍生词的详细...
- 优迈系统(一体化控制柜)快车调试(八)
-
逻辑故障和驱动故障分析段码管上显示警告码和故障码对照表警告码操作模式故障码操作模式或驱动故障AL000EPC（紧急电源管制模式）ER100DTC（门在设定时间内不能关到位）AL001COR（复位模式）...
- Layui简单实现左侧菜单和Tab选项卡动态操作
-
<!DOCTYPEhtml><html><head><metacharset="utf-8">...
- 码农如何快速打造一个有设计感的网站
-
像我这样的程序员来说经常被“设计”这个词吓到，因为我是一名程序员而不是设计师，我拥有的是计算机学位证，另外我对ComicSans字体并不介意。（注：ComicSans字体是Win95附带...
- vue3 新特性 computed、watch、watchEffect 看完就会
-
1、watchEffectwatchEffect侦听器是一个副作用函数，不需要指定监听的某个属性，监视的回调中用到哪个属性，就会监听哪个属性，一旦运行就会立即执行。watchEffect与com...
- 10个冷门但非常实用前端开发者很少用的CSS规则
-
许多开发者只学了基础——比如修改颜色、设置字体或创建弹性布局——就止步不前。但CSS是一门精深而多用途的语言，掌握后能帮你构建优雅、高效且无障碍的界面。无论你是从零搭建还是微调设计系统，掌握一些高...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- 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)
- CSS 水平对齐 (Horizontal Align) (30)