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.js 和 script2.js 。其中, script1.js 使用了 async 属性,而 script2.js 使用了 defer 属性。

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

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

 

 

总结一下:

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

 

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

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

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

 

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

html
<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.cnblogs.com/ronaldo9ph/p/17360990.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML中script 标签中的那些属性 - Python技术站

(0)
上一篇 2023年4月27日
下一篇 2023年4月28日

相关文章

  • js获取时间精确到秒(年月日)

    获取时间是日常开发中常见的操作,而对于一些特殊应用,我们需要获取更加精确的时间,例如获取时间精确到秒(年月日)。下面给出完整的攻略。 方法一:使用Date对象的方法 获取时间最简单和最常见的方法就是使用JavaScript内置的Date对象,其中getDate()方法、getMonth()方法、getFullYear()方法、 getHours()方法、ge…

    JavaScript 2023年5月27日
    00
  • JS简单生成由字母数字组合随机字符串示例

    当我们需要生成随机字符串的时候,可以使用JS代码来实现。下面是一些简单的JS代码示例可以生成由字母数字组合随机字符串。 方法一:使用Math.random()方法生成随机数 代码示例: /** * 生成指定长度的随机字符串(由字母数字组成) * @param {number} length 需要生成的字符串长度 * @returns {string} 生成的…

    JavaScript 2023年5月28日
    00
  • 如何利用JavaScript 实现继承

    关于如何利用JavaScript实现继承的完整攻略,下面是详细的说明和示例。 什么是继承 在面向对象的编程语言中,继承是一种重要的特性,它允许创建新类(子类)从已有的类(基类或父类)中派生出来。子类可以继承父类的属性和方法,也可以通过重载和覆盖来对父类的方法进行修改。 在JavaScript中,对象之间没有一个类明确的概念,但是我们可以使用原型链来实现继承的…

    JavaScript 2023年5月27日
    00
  • JavaScript对象扩展方法的用法详解

    JavaScript对象扩展方法的用法详解 JavaScript对象扩展方法,是指在原有对象上添加新的属性或方法,使得对象拥有更多的功能和特性。使用对象扩展方法的好处在于,能够避免繁琐的重复代码,提高代码的可维护性。 添加对象属性 直接添加 可以使用点号(.)或方括号([])来添加对象属性。下面是两个添加属性的示例。 // 使用点号添加属性 var obj …

    JavaScript 2023年5月27日
    00
  • json2.js的初步学习与了解

    Json2.js的初步学习与了解 1. 什么是Json2.js? Json2.js是一个JS库,提供了一组非常方便的json解析和生成工具,可以用来编码和解码JSON数据。提供了两个核心方法 JSON.parse(str)和JSON.stringify(obj)。JSON.parse(str)方法可以把一个包含JSON格式的字符串转换为JavaScript对…

    JavaScript 2023年6月11日
    00
  • JavaScript定时器详解及实例

    JavaScript定时器详解及实例 定时器(Timer)是JavaScript中的一个常用功能,它可以用来执行一些计划任务或者延迟执行某个任务。JavaScript中提供了两种类型的定时器:setTimeout() 和 setInterval()。本文将会详细介绍这两种定时器的使用方法以及一些示例说明。 setTimeout() setTimeout() …

    JavaScript 2023年5月27日
    00
  • jQuery 动画与停止动画效果实例详解

    jQuery 动画与停止动画效果实例详解 本次攻略将会重点讲解jQuery中动画效果的运用与实现,同时还会包括如何停止动画效果。 jQuery 动画的基本使用方法 我们知道,jQuery提供了许多丰富的动画方法,如animate()、fadeIn()、fadeOut()、slideDown()、slideUp()等等,这里我们以animate()为例进行详细…

    JavaScript 2023年6月10日
    00
  • JavaScript学习小结(一)——JavaScript入门基础

    JavaScript学习小结(一)——JavaScript入门基础 JavaScript是一种用于Web开发的脚本语言,主要用于增强网页的交互性和动态性。本篇文章将为初学者介绍JavaScript的入门基础。 语法结构 JavaScript代码通常嵌入在HTML文件中,可以使用<script>标签来定义JS代码块。JavaScript的语法结构包…

    JavaScript 2023年5月17日
    00
合作推广
合作推广
分享本页
返回顶部