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

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

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Script</title>
  5.   </head>
  6.   <body>
  7.     <h1>Hello, script!</h1>
  8.     <script src="script1.js" async></script>
  9.     <script src="script2.js" defer></script>
  10.   </body>
  11. </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代码将被忽略。

  1. <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编码。

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

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

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

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

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

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

  1. <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. java比较器：Comparable和Comparator

    java比较器 Comparable 一.java中对象可以通过==或!=比较地址值是否相同,在开发场景中还需要对对象做出大小比较以排序 需要利用接口Comparable或Comparator Com ...

  2. 01 docker容器技术基础入门

    本章内容: 1.container是什么? 2.LXC技术介绍 3.namespaces-名称空间,实现资源隔离 4.容器的资源分配--Cgroup,实现资源分配 5.LXC与dockers ---- ...

  3. 转发：All in one：项目级 monorepo 策略最佳实践

    0. 前言 在最近的项目开发中,出现了一个令我困扰的状况.我正在开发的项目 A,依赖了已经线上发布的项目 B,但是随着项目 A 的不断开发,又需要不时修改项目 B 的代码(这些修改暂时不必发布线上), ...

  4. Springboot ehcache/redis双缓存问题

    问题1:两个CacheManager 会报两个相同的实现类错误需要继承CachingConfigurerSupport 重写cacheManager方法,指定默认一个返回缓存提供者 @Configur ...

  5. qemu4.0+libvirt5.6.0编译使用

    1. qemu4.0.0 apt install pythonapt install libpixman-1-dev./configure --prefix=/usrmakemake install ...

  6. Linux Broadcom Bluetooth BCM43142A0 蓝牙驱动安装

    Linux Broadcom Bluetooth BCM43142A0 蓝牙驱动安装 想转到Linux,奈何蓝牙鼠标不识别. 经历了4个发行版的努力(Linux Mint,Pop!OS,OpenSus ...

  7. idea连接服务器发包配置插件AlibabaCloudExplorer

    添加配置信息: 启动项选择:Edit Configurations,添加插件选择插件Deploy to Host

  8. 代码大全_V2（1，2章笔记）

    译序 这本书讲什么 代码大全 原名叫 code complete,它是什么,又不是什么? 不是IDE中的代码自动补全功能 不是软件源代码 "大全" 是 "编码完成&quo ...

  9. FastJson 反序列化漏洞原理分析

    Fastjson 简介 fastjson框架:https://github.com/alibaba/fastjson fastjson-jndi:https://github.com/earayu/f ...

  10. .NET/C#操作Redis的简单方法

    本文属于Redis初级应用,只起初步引路作用,高手们可略过. 支持.Net Core(2.0及以上)/.Net Framework(4.5及以上),可以部署在Docker, Windows, Linu ...