浏览器会立即加载JS文件并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行

加上async属性，加载JS文档和渲染文档可以同时进行（异步），当JS加载完成，JS代码立即执行，会阻塞HTML渲染。

加上defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），当HTML渲染完成，才会执行JS代码。

渲染阻塞的原因：

由于 JavaScript 是可操纵 DOM 的,如果在修改这些元素属性同时渲染界面（即 JavaScript 线程和 UI 线程同时运行）,那么渲染线程前后获得的元素数据就可能不一致了。

因此为了防止渲染出现不可预期的结果,浏览器设置 GUI 渲染线程与 JavaScript 引擎为互斥的关系。

当浏览器在执行 JavaScript 程序的时候,GUI 渲染线程会被保存在一个队列中,直到 JS 程序执行完成,才会接着执行。

如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉

defer和async区别的更多相关文章

  1. <script>标签中的 defer 与 async区别

    在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...

  2. 【javascript基础】 JavaScript defer和async区别

    defer该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容.例如 JavaScript代码中的document.write()方法将不会骑作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代 ...

  3. defer 和 async 区别

    defer saync 共同点: script 标签属性, 控制脚本加载时间,解决script下载阻塞的问题. 区别: defer:推推推荐! 异步加载,所有元素解析完执行. async: 异步加载, ...

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

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

  5. 脚本引用中的defer和async的用法和区别

    之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...

  6. JavaScript标记上的defer与async的作用与区别

    当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...

  7. 异步加载script,提高前端性能(defer和async属性的区别)

    一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...

  8. defer和async的详细区别

    看过javascript高级程序设计的人,在javascript高级程序设计里,应该看到了介绍了有关defer和async的区别,可是比较浅显,而且也说得不是很清楚.下面我们来通过图片来详细了解下df ...

  9. <script>标签里的defer和async属性 区别（待补充）

    defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...

  10. url，href和src的区别，defer和async的区别

    URL(Uniform Resource Locator):统一资源定位符,互联网上的每个文件都有一个唯一的URL,基本URL包含协议,IP地址,路径和文件名. 重点:herf和src的区别 href ...

随机推荐

  1. Linux使用tailf高亮显示关键字

    Linux下使用tail查找日志文件关键词高亮显示 ① 多个关键词高亮显示: tail -f 日志文件 | perl -pe 's/(关键词)/\e[1;颜色$1\e[0m/g' 示例: tail - ...

  2. linux 上使用pm2启动nodejs服务

    1.安装pm2: npm install -g pm2 2.在启动文件夹内新建文件processes.json: {   "apps": [     {       "n ...

  3. qt5 windeployqt.exe 部署后的程序，运行时仍然报错的问题 （无法定位程序输入点 _ZdlPvj）

    首先,注意自己编译执行程序所用的Qt版本: 上图 QTDIR 其次,部署后的执行程序运行时需要 libgcc_s_dw2-1.dll ,从对应的 QT目录拷一个. 最后,要在Qt自己的命令行下运行 w ...

  4. MyBatis_01(前置知识)

    1-学习思路(课程主要内容): 2-MyBatis特性 3- MyBatis下载 但是我们在使用MyBatis的时候,都是直接 "Maven导入MyBatis的jar包" (所以, ...

  5. MySQL 学习（四）并集查询

    联合查询,它是用 union 关键字把多条 select 语句的查询结果合并为一个结果集.纵向合并的前提是被合并的结果集的字段数量.顺序和数据类型必须完全一致.字段名不一样的情况下,会将第一个结果集的 ...

  6. 日志参数 %n 引起的coredump

    今天测试发现一段代码 coredump,居然是一行日志输出.看参数都乱了,以为是内存溢出造成的.查了半天,也没发现问题 最后把前边的函数调用都注释掉,只运行这一段日志输出,依然挂掉 仔细一看: TRA ...

  7. @JsonFormat

    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8" 不管是前端传后台,还是后台传前端, ...

  8. Gradle 安装配置

    1 下载 官网各版本下载地址如下: https://gradle.org/releases/ 2 安装 将下载后的压缩包(此处以 gradle-6.5-all.zip 为例)解压到某个目录进行安装. ...

  9. JS字符串拼接的方法及性能比较

    一.+和+=str += "one" + "two";这段代码在运行过程中,会经历四个步骤:1.在内存中创建一个临时字符串2.将连接后的字符串"one ...

  10. python的排序问题

    python的排序方法有两个 1 nums.sort() # 原数组上排序, 没有返回值, nums变为有序 2 # 或者 3 nums = sorted(nums) # 原数组不变, 会返回一个排好 ...