在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. 磊磊零基础打卡算法：day18 c++模拟哈希表来模拟散列表

    5.21 哈希表 Hash表又称为散列表,一般由Hash函数(散列函数)与链表结构共同实现,与离散化思想类似. 一般要求:防止冲突,便于查询 模拟hash表: 拉链法:两个核心操作insert(),f ...

  2. SDC细节归纳

    能否写出一份严谨的SDC约束文件,决定了芯片tapeout后数字电路能否正常工作,或者少一些bug.所以写好SDC约束文件,是芯片设计的关键一步. 因此,归纳.整理SDC约束的细节要点很重要,有助于减 ...

  3. 深入理解css 笔记（9）

    模块化 CSS 是指把页面分割成不同的组成部分,这些组成部分可以在多种上下文中重复使用,并且互相之间没有依赖关系.最终目的是,当我们修改其中一部分 css 时,不会对其他部分产生意料之外的影响.    ...

  4. Python Type Hint中Optional[str]=None和str=None的区别

    Python Type Hint中Optional[str]=None和str=None的区别 1 问题来源 在读到Fluent Python, 2ed Edition, P260时产生了一些疑问: ...

  5. 解决df.to_csv 时增加重复双引号的问题

    df.to_csv("test.csv", sep='|',quoting=csv.QUOTE_NONE,index=False,header=True) 转载自 df.to_cs ...

  6. AppScan的安装及破解1

    (一)AppScan的安装及破解   IBM AppScan是一款目前最好用的Web 应用安全测试工具,Rational AppScan 可自动化 Web 应用的安全漏洞评估工作,能扫描和检测所有常见 ...

  7. k8s 关于pull image failed 问题

    问题描述: Failed to pull image "nginx": rpc error: code = Unknown desc = failed to pul 解决办法: 1 ...

  8. Git添加SSH密钥步骤

    1.先去本机上面看看用户主目录里面有没有.ssh这个文件夹 如果有的话,再看看该目录下有没有id_rsa和id_rsa_pub这两个文件: 若还是有,就直接跳过这一步到下一步:若是没有,我们需要创建S ...

  9. Python常见加密解密算法

    Python爬虫常见加密解密算法 url encode加密 简介:当url地址含有中文,或者参数有中文的时候,这个算是很正常了,但是把这样的url作为参数传递的时候(最常见的callback) ,需要 ...

  10. 百炼成钢 —— 声网实时网络的自动运维丨Dev for Dev 专栏

    本文为「Dev for Dev 专栏」系列内容,作者为声网大数据算法工程师黄南薰. 01 自动运维介绍 2016 年,Gartner 创新性地提出了 AIOps 的概念[1],开创了人工智能辅助运维决 ...