HTML中script 标签中的那些属性

这篇具有很好参考价值的文章主要介绍了HTML中script 标签中的那些属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在HTML中, <script> 标签用于嵌入或引用JavaScript代码。

<script> 标签中,有两个属性可以用来控制脚本的加载和执行方式: async defer


当然这也是常见的一道面试题, async  和  defer 的作用和区别。

async defer 属性都可以用于异步加载脚本,从而避免了在加载脚本时阻塞浏览器渲染页面的问题。但是它们的具体行为略有不同。

当使用 async 属性时,浏览器会异步地加载脚本,并在下载完成后立即执行脚本,而不会等待页面的其他内容加载完成。如果页面中有多个异步加载的脚本,它们的执行顺序是不确定的,取决于它们完成下载的时间。 async 属性适用于不依赖于其他脚本或文档解析顺序的独立脚本。

当使用 defer 属性时,浏览器会异步地加载脚本,但是会在文档解析完毕后,按照它们在页面中出现的顺序执行它们。因此,如果页面中有多个 defer 脚本,它们会按照它们在页面中的顺序依次执行。这对于依赖于文档结构或其他脚本的脚本非常有用,因为它们需要在文档解析完成后才能正确执行。

 


以下是一个简单的例子,展示了 async defer 属性的不同行为:

<!DOCTYPE html>
<html>
  <head>
    <title>Script</title>
  </head>
  <body>
    <h1>Hello, script!</h1>
    <script src="script1.js" async></script>
    <script src="script2.js" defer></script>
  </body>
</html>

 

在这个例子中,我们在页面中引入了两个脚本: script1.jsscript2.js 。其中, script1.js 使用了 async 属性,而 script2.js 使用了 defer 属性。

当浏览器解析这个页面时,它会异步地加载 script1.js ,但会继续解析页面并渲染内容。一旦 script1.js 下载完成,它会立即执行。在此期间,浏览器可能仍在解析和渲染页面。

对于 script2.js ,浏览器也会异步加载它,但是会等待页面解析完毕后才执行。因此, script2.js 的执行会在页面解析完毕后,按照它在页面中的出现顺序执行。

 

 



总结一下:

- 不带 asyncdefer 的脚本会立即加载并阻塞HTML解析。
- 带有 async 属性的脚本会异步加载并在加载完成后立即执行,可能在HTML解析完成之前或之后。
- 带有 defer 属性的脚本会延迟执行,直到HTML文档解析完成。
- 如果在一个 <script> 标签中同时使用了 asyncdefer 属性, async 属性会被忽略。

 




除了 asyncdefer 属性外, <script> 标签还有一些其他属性和特性:


1. src 属性:用于指定外部脚本文件的URL。如果设置了 src 属性, <script> 标签内部的JavaScript代码将被忽略。

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

 


2. type 属性:用于指定脚本的MIME类型。对于JavaScript,推荐使用 text/javascript 。但是,大多数浏览器默认将 <script> 标签识别为JavaScript,因此通常不需要显式设置 type 属性。

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

 


3. charset 属性:用于指定脚本文件的字符编码。这个属性已经不太常用,因为现在大多数浏览器和服务器默认使用UTF-8编码。

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

 


4. crossorigin 属性:用于配置跨域资源共享(CORS)设置。当加载的脚本文件位于不同的域名下时,可以使用 crossorigin 属性来控制浏览器的跨域策略。

<script crossorigin="anonymous" src="https://script.com/script.js"></script>

 


5. integrity 属性:用于确保脚本文件的完整性。通过提供脚本文件的哈希值(例如,SHA-256、SHA-384或SHA-512),浏览器可以在加载文件时验证其完整性。

<script src="script.js" integrity="sha384-xxxxxxx"></script>

 


6. nomodule 属性:用于指定脚本不应在支持ES6模块的浏览器上执行。这可以用于向不支持ES6模块的旧浏览器提供回退脚本。

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

 


这些属性和特性使得 <script> 标签在不同的使用场景下更加灵活和易于配置。文章来源地址https://www.toymoban.com/news/detail-427837.html

到了这里,关于HTML中script 标签中的那些属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML <script> 标签

    在 HTML 页面中插入一段 JavaScript: (在本页底部可以找到更多实例) script 标签用于定义客户端脚本,比如 JavaScript。 script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。 必需的 type 属性规定脚本的 MIME 类型。 JavaScript 的常见应用时图像操作、表单验证以

    2024年02月14日
    浏览(66)
  • input标签,新增那些属性

    input标签作为页面与用户交互的重要入口,了解掌握input的属性,至为重要。 HTML5给input表现的type属性,添加了很多的属性值,用来丰富了文本框类型。比如: 如果是H5页面的话,在不同的手机会有不同的展示,比如: 唤醒的手机本身的输入的效果。 input标签上传文件的话,

    2024年02月09日
    浏览(42)
  • script 标签中 async 和 defer 属性的作用分别是什么?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(48)
  • 【正则表达式】获取html代码文本内所有<script>标签内容

    一. 背景 之前要对学生提交的html代码进行检查,在获取了学生提交的html代码文本后,需要使用正则去截取内部的script标签内容做进一步的检查。 假设得到html文本如下(不是代码),我们要得到全部的script标签内容并提取出来。 看上去不难,但是实际操作起来有一定的坑,

    2024年01月17日
    浏览(50)
  • 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

    2024年02月09日
    浏览(74)
  • IDEA Community html文件里的script标签没有syntax highlighting的解决方案

    在网上找到的解决方法有的是针对Ultimate版本才可以下载的plugin,对我所用的Community版本无法生效,找了一圈最后在stackoverflow上找到一个有效的方案,给需要的小伙伴分享一下:IntelliJ Community Edition: Javascript syntax highlighting 如上图,可以看到script标签里的文本没有syntax highli

    2024年02月04日
    浏览(48)
  • HTML5-1-标签及属性

    页面的组成: HTML(HyperText Markup Language,超文本标记语言)是用来描述网页的一种语言,它不是一种编程语言,而是一种标记语言。 HTML5 是下一代 HTML 标准。 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。 基本结构: HTML中不区分大小写,但

    2024年02月10日
    浏览(63)
  • [爬虫]1.2.1 HTML标签和属性

    HTML(HyperText Markup Language)是一种用于创建网页的标记语言。HTML文档由一系列的HTML标签构成,每个标签都有自己的意义和用途。HTML标签通常成对出现,由一个开始标签和一个结束标签组成,结束标签的名称前有一个斜杠。 例如, p 是一个段落标签的开始, /p 是一个段落标签

    2024年02月16日
    浏览(44)
  • HTML <iframe> 标签的常用属性--详解(附加代码)

    iframe 标签用于在网页中嵌入另一个文档(通常是外部网页)或者内嵌内容。以下是 iframe 标签的示例代码和一些常用属性: 通过使用 iframe 标签,可以将其他网页的内容嵌入到当前网页中,并提供许多可选属性来控制它们的行为和样式。上述示例演示了基本的使用方法以及一

    2024年02月12日
    浏览(43)
  • 【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

            Hello大家好, 我是【 麟-小白 】,一位 软件工程 专业的学生,喜好 计算机知识 。希望大家能够一起 学习进步 呀!本人是一名 在读大学生 ,专业水平有限,如发现 错误 或 不足之处 ,请多多指正!谢谢大家!!!         如果 小哥哥小姐姐们 对我的文章感兴趣

    2023年04月08日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包