script 标签的属性、事件的探究

原文地址：https://ainyi.com/48

defer 和 asnyc

只对外部文件有效 只有 Internet Explorer 支持 defer 属性 async 属性是 HTML5 中的新属性

• defer 在页面完成解析才执行代码（图片资源还没下载，只是 dom 加载完毕），带 defer 属性的 script，下载 script 的时候是异步的，下载好之后，等待解析 dom 完毕才执行 这个属性表明脚本在执行时不会影响页面的构造，在元素中设置这个属性相当于告诉浏览器 立即下载 但 延迟执行 延迟到解析 dom 完毕，但图片资源加载之前执行
• async 相对于页面其他部分异步执行脚本，带 async 属性的 script，下载 script 的时候是异步的，但是只要 script 文件下好了，那么就马上执行（如果此时 dom 未加载完毕，就会阻塞 dom 解析）
• 一般的 script 标签都是会阻塞页面执行的，一般用在不需要操作 dom 元素的脚本上，例如一些统计代码（跟页面执行逻辑无关的，不涉及 dom 操作的），可以加上 async 属性，可以避免因长时间加载而呈现白屏现象

1. 没有 defer 和 async 属性的 script，在 html 解析中，html 会在 script 下载或执行的时候，都会暂停解析
2. 带 async 属性的 script，如图所示，也就是下载 script 的时候是异步的，但是只要 script 文件下好了，那么就马上执行，执行过程中会阻塞 html 解析
3. 带 defer 属性的 script，下载 script 的时候是异步的，下载好之后，等待解析 dom 完毕才执行

区别

没有 defer 和 async，会立刻加载并执行，期间阻塞 dom 解析

有 async 没有 defer 时，会与渲染后续文档元素并行加载（加载过程不会阻塞 dom 解析），加载完自动执行（执行会阻塞 dom 解析）

有 defer 没有 async 时，后续文档元素渲染会与脚本文件加载并行，当执行所有元素解析完成之后，脚本才执行，并且是在 DOMContentLoaded 之前执行（domready 之前执行）

使用方法解决

使用动态创建的 script 标签元素来下载并执行代码

无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "file1.js";
document.getElementByTagName("head")[0].appendChild(script);

原文地址：https://ainyi.com/48