浏览器会立即加载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. JAVA的作用

    JAVA的用途广泛:1 .银行系统,政企信息系统,支付系统,大数据平台,网站平台. 2 .Saas云,手机app,云管理系统后台,电商系统后台,桌面工具. JAVA和PYTHON的抉择:JAVA是C语 ...

  2. automagic webUI 自动化

    https://www.cnblogs.com/tsbc/p/6244268.html

  3. Python学习的第三次的总结

    元组 #组内元素可读,不能被改变 tup1=() #空元组 tup2=(1,) #一个元素后添加逗号 嵌套列表 a = [[1,2,3],'lyyyyy',4,(2,3,4)] b = a[0]   ...

  4. TP开发项目时遇到的问题记录

    1.下载功能. TP自带Http下载类,使用时new一个就行,示例代码: public function download(){ //接收公文id $id = I('get.fid'); //根据公文 ...

  5. Eclipse编程工具的使用( for Jave EE )

    一.下载安装 Eclipse IDE for Java EE Developers 1.1 下载 官方下载:https://www.eclipse.org/downloads/ 推荐下载2021-09 ...

  6. Pods与Nodes

    Pod是Kubernetes抽象出来表示一组应用容器(比如Docker.rkt),还有这些容器共享的资源.这些资源包括: 共享存储,比如Volumes 网络,比如独立的集群IP地址 如何去运行每个容器 ...

  7. windows server的应用软件限流QoS

    原因: 生产环境中程序员写的redis调用方法有逻辑问题, 导致流量高达800~900Mbps导致服务器其它网络服务有丢包现象, 他又有别的项目紧急需要修改,只能通过系统自带的QoS临时限流控制. 1 ...

  8. mongodb对Obeject对象进行增删改操作

    1.插入某个对象,如User对象 mongoTemplate.insert(user, "users");//第一个参数是实体类对象User, 第二个参数是mongodb对应的集合 ...

  9. 95、linux安装es

    参考大佬文章 https://blog.csdn.net/b13001216978/article/details/110817204 1.由于elasticsearch7.4.0需要jdk11支持, ...

  10. C#当窗体大小改变时，窗体中的控件大小也随之改变

    第一种:推荐 在窗体中加上如下代码即可实现,但窗体点击放大按钮时却不能改变控件大小. private Size beforeResizeSize = Size.Empty;protectedoverr ...