async与defer的作用与区别以及阻塞优化

最新推荐文章于 2023-06-06 19:21:14 发布

weixin_34356310

最新推荐文章于 2023-06-06 19:21:14 发布

阅读量197

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/4045971/blog/3045546

版权

2019独角兽企业重金招聘Python工程师标准>>>

async和defer的作用是什么？有什么区别?

1. 在浏览器在渲染时，在html文件中读取<script>，会立即停止渲染，执行JS代码，如果没有 defer属性或 async属性，会等script文件下载执行完后才继续渲染。

2. `<script async src="script.js"></script>`(异步下载)会下载脚本，但是不会立即执行，并且不一定按照script顺序触发；这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说，async可能在 DOMContentLoaded 触发之前或之后执行，但一定会在 load 触发之前执行。

(1)HTML5属性；Chorme,FireFox,IE9+浏览器支持
(2)async属性仅适用于外部脚本
(3)执行顺序是不确定的
(4)async 属性表示异步执行引入的 JavaScript
(5)与 defer 的区别在于，如果已经加载好，就会开始执行，无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后

3. `<script defer src="script.js"></script>`(延迟执行)是否对脚本执行延迟，直到页面加载为止

(1). 兼容所有浏览器

(2). defer 与相比普通 script，有两点区别：载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到HTML标签解析完成之后；

(3). 如果脚本不改变文档的内容，可以用defer属性，以便加快处理文档速度

(4).defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时HTML 并未停止解析，这两个过程是并行的

(5).defer 不会改变 script 中代码的执行顺序，整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的JavaScript 代码，然后触发 DOMContentLoaded 事件。

(6)所有设置了defer属性的脚本按顺序执行,async是无顺序的加载

(7)无论设置了defer或async,该script会在onload前执行；

(8)IE/chrome在设置defer时，与firefox不同，前者会等脚本执行后才执行DOMContentLoaded;而后者会先于脚本执行

script脚本阻塞有什么解决方法？(script异步加载的四种方式)

（1）引入jquery

$(document).ready(function(){
内容

})

（2）async属性

（3）defer属性

(4)动态创建<script>标签--->兼容所有浏览器

 (function(){
	 var script =document.createElement('script');
	 script.type='text/javascript';
	 script.src="http://code.jquery.com/jquery-1.7.2.min.js";
	 var tmp=document.getElementsByTagName('script')[0],
	tem.parentNode.insertBefore(script,tmp);
 })

- css阻塞有什么解决方法？

css的加载并不会导致html解析和渲染的停止，但是会影响到js脚本的执行。因为js脚本不仅可以读取修改到dom，也可以读取修改到cssom。故在js脚本执前，browser必须保证到css文件完全加载并解析完成，即cssom树完全构建好。这就导致了js执行的延迟，也因此导致html解析和渲染延迟。（这就是css阻塞js执行，阻塞渲染的根本原因）因此一些解决方法：