HTML中script标签中的那些属性
myzbx 2024-12-02 22:38 35 浏览
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> 标签属性，是编写高效、可靠前端代码的关键一步。
相关推荐
- 砌体植筋拉拔试验检验值到底是6.0KN，还是10.2KN，如何计算确定
-
砌体拉结筋植筋养护完成后，需对所植钢筋进行拉拔试验，以检验植筋的锚固强度是否满足设计要求。检测时，按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013，以同品种、同...
- 柴油机功率如何计算?计算柴油机功率需要哪些参数?
-
在汽车领域，对于柴油机功率的计算是一项重要的工作，它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先，我们要了解计算柴油机功率常用的公式。在...
- 变压器短路阻抗的作用和计算方法（变压器短路阻抗的作用和计算方法是什么）
-
变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据，它是二次侧短接并流过额定电流时，一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢？其实变压器的阻抗电压乃是...
- 9.35m层高高支模支撑架计算书（支模架多高属于高支模）
-
某工厂新扩建的建筑面积为1989.2m^2，建筑物总体分为2层，但局部为4层。建筑物檐高19.4m，建筑物总高23m。建筑物呈长方形设置，长度为48.20m，宽度为23.88m，结构形式为框架结构...
- 吊篮(悬挂装置前梁加长)安全复核计算书
-
吊篮（悬挂装置前梁加长）安全复核计算书一种超常规搭设的高处作业吊篮，因使用要求将吊篮悬挂装置前梁加长设置，本计算书针对这种工况的校核，以作参考。计算依据：1、《高处作业吊篮》GB/T19155-...
- 电功率计算公式精编汇总（电功率计算视频讲解）
-
一、电功率计算公式：1在纯直流电路中：P=UIP=I2RP=U2/R式中：P---电功率（W），U---电压（V），I----电流（A），R---电阻（Ω)。2在单相交流电路中：P=UIcosφ...
- 灌注桩承载力检测方法及步骤（灌注桩承载力不够怎么办）
-
检测灌注桩的承载力是确保基础工程安全可靠的关键环节，检测结果的精细能准确为我们提供可靠的数据，让我们能准确判断桩基础的承载力，方便后续施工安排，同样也能让我们根据数据分辨出有问题桩基，采取可靠有效的措...
- 很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法
-
高中数学必看：向量叉乘，体积的神。大家都知道a、b的向量是什么意思，但是a、b的向量又是什么？很多同学都不知道，向量的向量在高中阶段非常有用，虽然它是大学的知识，在高中阶段可以干两件事。·第一件事，表...
- 施工升降机基础(设置在地库顶板回顶)计算书
-
施工升降机基础（设置在地库顶板回顶）计算书计算依据：1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...
- 剪力墙水平钢筋根数如何计算?（剪力墙水平钢筋绑扎搭接规范）
-
剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素，具体步骤如下及依据：1.基本计算公式水平钢筋根数计算公式为：根数=（墙高-起步距离）/间距（墙高-起步距离）/间距...
- 直流电路常用计算公式（直流电路常用计算公式有哪些）
-
1、电阻导体阻碍电流通过的能力叫做电阻，用字母R表示，单位欧(Ω)。R=ρl/s式中R-导体的电阻，欧(Ω)；ρ-导体的电阻率，欧·米(Ω·m)；l-导体的长度，米(m)；s-导体的截面积，平方米(m...
- 电气主电路图的绘制特点（电气原理图主电路）
-
1、电气主电路图中的电气设备、元件，如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制，而母线则水平绘制。电气主电路图除特殊情况外，几乎无一例外地画成单线图，并以母线为核心将各个项目(如...
- 中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)
-
中考物理专题：功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度，需满足两要素：作用在物体上的力、物体沿力方向移动距离。例如推箱子时，若箱子未移动，推力不做功；若箱子滑动，推力做...
- 40亿QQ号，不超过1G内存，如何去重?
-
分享一道网上很火的面试题：40亿QQ号，不超过1G的内存，如何去重？这是一个非常经典的海量数据去重问题，并且做了内存限制，最多只能1GB，本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...
- 填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!
-
今天分享下植筋间距及保护层要求：根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm，植筋为两根及以上时水平间距为不应小于5d（d为钢筋直径）。根据混凝土结构后锚固技...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)