在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. 磊磊零基础打卡算法：day17 c++堆排序

    5.20 前言吐槽: 今天是5.20啦,但是作为单身修狗的我只能和代码过啦...继续加油算法打卡!!! 堆排序: 堆就是一棵完全二叉树 二叉堆是一种支持插入,删除,查询最值的数据结构.他其实是一棵满足 ...

  2. 如何快速开发一套cesium三维系统

    首先我们需要明确我们做的三维应该具有哪些功能,常见的三维系统主要用于展示三维数据,常见的功能应该有,缩放平移,漫游浏览,定位,量测,图层控制等基础功能.在这些基础功能上根据业务需要,再继续扩展,添加一 ...

  3. 【前端样式】关于Element-plus 菜单 unique-opened不生效的问题

    需要保证el-sub-menu 的唯一性,即index得写在el-sub-menu上,否则 unique-opened 属性不生效.

  4. Python第八章实验报告

    一.实验对象:<零基础学Python>第八章的3道实例和4道实战 二.实验环境:IDLE Shell 3.9.7 三.实验要求:学习使用标准模块和第三方模块 四.实验过程: 实例01 创建 ...

  5. ls和mkdir

    ls  查看当前目录的内容 1) ls -l 显示详细列表 2) Ls -lh 吧文件大小以人性化的方式展开 3) ls -a 显示所有的文件,包括隐藏文件,隐藏文件是已.开头的文件 4) ll 等于 ...

  6. 9. 实现包括前端后台的预约洗狗功能 - 使用Power App处理预约信息 - 创建Power Canvas App并实现基础功能

    ​ Power Canvas App可以通过画布设计和构建业务应用,无需通过传统编写代码的形式来构建,通过将元素拖动到画布上来设计我们的Power Canvas APP,可以与Miceosoft和第三 ...

  7. ajax缓存和fiddler——http协议调试代理工具

    1.在ie9下,ajax请求可能会有缓存,需要在请求上一个随机数 如:Math.random(); 2.fiddler2 打开以后可以查看所有的http请求情况,也可以使用本地脚本代替要请求的js文件 ...

  8. linux java 环境搭建

    java -version 是否安装 yum -y remove java-1.7.0-openjdk* yum -y install java-1.7.0-openjdk* vim /etc/pro ...

  9. SpringBoot笔记--事件监听+启动流程+监控+项目部署

    事件监听 ApplicationContextInitializer SpringApplicationRunListener ApplicationRunner CommandLineRunner ...

  10. Spring--AOP通知类型

    AOP通知类型 前置通知 通知类中的数据在原始数据的前面 后置通知 通知类中的数据在原始数据的后面 环绕通知 若是只是加一个注解: 我们需要这样做:加一个参数: 若是面对有返回值的方法,又有一点不同之 ...