浏览器会立即加载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. JQuery 的$.each取值

    原文:https://www.cnblogs.com/zhaixr/p/7069857.html 1.遍历一维数组 var arr1=['aa','bb','cc','dd']; $.each(arr ...

  2. read the docs

    1. 在 GitHub 新建一个repo 2. git clone git@github.com:readthedocs/tutorial-template.git 3. 把刚刚 clone 的 re ...

  3. WebSocket 使用记录

    WebSocket 主要解决的问题是 后端数据更新主动像前端推送数据所需依赖<dependency> <groupId>org.springframework.boot< ...

  4. eFuse技术

    1. 基本概况及介绍   不同于大多数FPGA使用的SRAM阵列,eFuse一次只有一根熔丝能够被编程,这是该方法的配置能力存在限制范围的原因.但当与日益成熟的内置自测试(BIST)引擎组合使用时,这 ...

  5. C 标准 C89/C90/C99/C11/C17

    C89/C90 PDF:https://www.yodaiken.com/wp-content/uploads/2021/05/ansi-iso-9899-1990-1.pdf C99 PDF:htt ...

  6. eclipse配置tomcat环境

    Eclipse配置tomcat环境 第一步:进行下面操作: window–>Preference–>Server–>Runtime Environments ->Add 搜索s ...

  7. drop table后，约束会被删除吗？

    create table test1(id number); insert into test1 values(11);insert into test1 values(22);insert into ...

  8. Webrtc audio

    整体理解 在 WebRTC 中,Call 是peer connection 的. 为 WebRTC Call 注入的 AudioState 来自于全局的 MediaEngine 的 VoiceEngi ...

  9. js 动态给table添加、删除行。

    1.添加table 行 function addtablTr() { var $table = $("#abc"); var vTr = '<tr><td> ...

  10. PaddlePaddleOCR安装教程

    1.首先下载并安装python3.7.8 链接地址: 注:安装时Add path勾选 2.进入命令提示符界面 3.升级pip版本 python -m pip install --upgrade pip ...