script 标签默认是阻塞加载的，也就是先下载src内容，然后执行src内容，然后再往后读文档

head 中的 script 按顺序加载执行，然后再加载 body 的元素。

把 script 移动到文档最后，自然就会先加载body，再加载script，页面看上去更快了

如果加了 defer 属性，表示这个 script 下载后不急着执行，等到html解析结束后再执行。浏览器会下载a.js和b.js，同时一起加载 dom，加载完后再按顺序执行a.js 和 b.js

如果加了 async，就表示下载这两个脚本，下载好了和dom一起执行。浏览器会下载a.js和b.js，js下载时渲染dom，下载完后转到js执行，但一方面此时dom可能还没读完，所以不要操作 dom。一方面两个script的执行顺序可能不一样了，所以他们不能相互依赖；

HTML 中 script 标签的属性和加载顺序的更多相关文章

  1. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  2. html5中script的async属性

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

  3. script标签crossorigin属性及同源策略和跨域方法

    首先介绍(同源策略) 同源策略是浏览器最核心且基本的安全约定,要求协议.域名.端口都相同为同源,如果非同源时请求数据浏览器会在控制台抛出跨域异常错误,同源策略是浏览器的行为,即使客户端请求发送了,服务 ...

  4. Spring中bean标签的属性和值：

    Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...

  5. Spring Boot的属性加载顺序

        伴随着团队的不断壮大,往往不需要开发人员知道测试或者生产环境的全部配置细节,比如数据库密码,帐号信息等.而是希望由运维或者指定的人员去维护配置信息,那么如果要修改某项配置信息,就不得不去修改项 ...

  6. 如何将 JavaScript 代码添加到网页中，以及 <script> 标签的属性

    Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...

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

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

  8. HTML中script 标签中的那些属性

    在HTML中, <script> 标签用于嵌入或引用JavaScript代码. 在 <script> 标签中,有两个属性可以用来控制脚本的加载和执行方式: async 和 de ...

  9. html中script标签的使用方法

    向HTML页面中插入JavaScript的主要方法,就是使用<script>元素.这个元素由Netscape创造并在Netscape Navigator2中首先实现.后来,这个元素被加入到 ...

  10. html中各种标签和属性（最基础的基本都有）

    1.标题标签: h1~h6  ctrl+1~6 2.段落标签: p      ctrl+shift+p 3.换行标签: br     shift+回车 4.水平线:   hr 5.加粗标签: stro ...

随机推荐

  1. mujoco安装报错：mujoco_py/cymj.pyx:67:5: Exception check on 'c_warning_callback' will always require the GIL to be acquired.

    参考: https://blog.csdn.net/weixin_49373427/article/details/131981583 https://blog.csdn.net/CCCDeric/a ...

  2. 微信支付APIV3私钥与证书配置

    1.加载商户私钥(privateKey:私钥字符串) 这个私钥是下载证书的的:apiclient_key.pem 2.转换下单时的证书 文档:https://github.com/wechatpay- ...

  3. css居中的多种方式

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  4. linux中级——libcurl库访问百度

    libcurl简介: libcurl是一个跨平台的网络协议库,支持http, https, ftp, gopher, telnet, dict, file, 和ldap 协议.libcurl同样支持H ...

  5. Linux 网络设备命名规则

    在 Linux 系统中,网络接口的命名规则已经经历了几次重要变化,特别是从传统的以 eth 和 wlan 开头的名称,转变到更现代.更具描述性的命名方式.以下是这些变化的概述: 1. 传统命名约定 在 ...

  6. android 反编译APK取源代码。

    坑,自己写的Android APK 程序,发现线上版本是 1.9.4 ,本地的代码版本却是 1.9.1.不知道到底怎么回事,svn里面也没有日志记录.....只能从线上apk反编译来看看了,幸好这个升 ...

  7. Angular Material 18+ 高级教程 – Material Ripple

    介绍 Ripple (波纹) 是 Material Design 中一个标志性的特色. 点击 button 会溅起水波的感觉. 参考 Docs – Ripples When to use it? 一般 ...

  8. 常见的 HTTP Status Codes

    前言 网页开发做久了, 自然而且会接触到许多 status code. 这篇列出一些常见的 status code. 初学者可以把它们学上来. 真的很常见哦. 参考 Wikipedia – List ...

  9. Qml 实现星级评分组件 已发布

    [写在前面] 在现代应用程序中,星级评分是一个常见的用户界面元素,它允许用户对产品.服务或内容进行评价. 想必大家在用各种带有评分的软件中看到过这个组件: 本文将指导你如何使用 Qml 创建一个简单而 ...

  10. webpack 5.88.2

    原理 webpack的运行过程大致可以分为以下几个步骤:webpack的运行过程实际上就是等待上一个钩子结束调用下一个钩子的过程 初始化:webpack接收命令行参数或配置文件,创建一个Compile ...