在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> 标签在不同的使用场景下更加灵活和易于配置。

HTML中script 标签中的那些属性的更多相关文章

  1. JS添加验证页面中script标签中是否存在jquery文件

    window.onload = function() { var al = document.getElementsByTagName("script"); var new_ele ...

  2. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  3. script标签中的async、defer属性

    Script标签是我们常用的引用js脚本的一种方式. 撸代码的时候,我们常常只写src属性,直接忽略其他属性. 最近发现了2个可以利用的属性:async.defer. 顾名思义async就是异步,在不 ...

  4. html中script标签使用async属性和defer属性的区别

    相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...

  5. 浅谈script标签中的async和defer

    script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了.直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染 ...

  6. 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面

    script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...

  7. script标签中type为"text/x-template"或"text/html"

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  8. script标签中type为<script type="text/x-template">是个啥

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  9. javaScript中的小细节-script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数( ...

  10. 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?

    <!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...

随机推荐

  1. LINUX下的VSCODE-C/C++配置

    LINUX下的VSCODE-C/C++配置 1.生成默认的任务文件 2.lunch.json,调整"configurations"里的成员,如下 ①添加 "preLaun ...

  2. 持续集成环境(3)-Jenkins用户权限管理

    我们可以利用Role-based Authorization Strategy 插件来管理Jenkins用户权限 安装Role-based Authorization Strategy插件 开启权限全 ...

  3. JSTL常用便签choose和JSTL常用便签foreach

    2. choose :相当于 java 代码的 switch 语句 1．使用 choose 标签声明    相当于switch 2．使用 when 标签做判断   相当于case 3,使用 other ...

  4. Java学习笔记-BigDecimal类型

    1.介绍 Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更 ...

  5. 6Sampling Configuration Space: 6.3 Using Accelerated Molecular Dynamics (aMD) to enhance sampling

    6.3 Using Accelerated Molecular Dynamics (aMD) to enhance sampling 英文官网:http://ambermd.org/tutorials ...

  6. 红米k40稳定版本刷开发版开启DC调光记录

    刷个开发版还要申请资格.要么去淘宝买资格的账号,要么用其他方法: 包21.4.15,直接有有防闪烁功能下载地址:https://bigota.d.miui.com/21.4.15/miui_ALIOT ...

  7. 华大单片机HC32L13X软件设计时候要注意的事项

    1.系统启动时默认设置主频为内部4MHz; 2.调试超低功耗程序或者把SWD端口复用为GPIO功能都会把芯片的SWD功能关掉,仿真器将会与芯片失去连接,建议在main函数开始后加上1到2秒的延时,仿真 ...

  8. 项目构建node-sass源码报错 SyntaxError:Unexpectedtoken"?"

    背景 vue2项目,之前一直构建正常.今天改了代码,构建时报错,报错原因显示编译node-sass源码时出错. 报错信息: Modulebuild failed:/node_modules/node- ...

  9. Django笔记四之字段属性

    这篇笔记介绍的 field options,也就是 字段的选项属性. 首先,关于 model,是数据库与 python 代码里的一个映射关系,每一个 model 是django.db.models.M ...

  10. flutter ui---->一些类QQ的实现

    整理一下比较有意思的类QQ的UI实现.Nothing that has meaning is easy. Easy doesn't enter into grown-up life. darken t ...