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

栏目: CSS · 发布时间: 5年前

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

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执行，阻塞渲染的根本原因）

因此一些解决方法：