js单线程异步加载

一、同步加载与异步加载的形式

1. 同步加载
我们平时最常使用的就是这种同步加载形式：

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。
js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。
以前的一般建议是把

简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。

2. 常见异步加载（Script DOM Element）

(function() {
            var s = document.createElement('script');
            s.src = 'xxx.js';
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
        })();

这种方法是在页面中

二、async 和 defer 属性

1. defer 属性

defer属性声明这个脚本中将不会有 document.write 或 dom 修改。
浏览器将会并行下载 file.js 和其它有 defer 属性的script，而不会阻塞页面后续处理。

defer属性在IE 4.0中就实现了，超过13年了！Firefox 从 3.5 开始支持defer属性 。
注：所有的defer 脚本保证是按顺序依次执行的。

2. async 属性

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有 IE 都支持异步加载。

• 没有 async 属性，script 将立即获取（下载）并执行，然后才继续后面的处理，这期间阻塞了浏览器的后续处理。
• 如果有 async 属性，那么 script 将被异步下载并执行，同时浏览器继续后续的处理。
• HTML4中就有了defer属性，它提示浏览器这个 script 不会产生任何文档元素（没有document.write），因此浏览器会继续后续处理和渲染。
• 如果没有 async 属性 但是有 defer 属性，那么script 将在页面parse之后执行。
• 如果同时设置了二者，那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理，而不是同步方式。
  **

三、JS 模块化管理

**
异步加载，需要将所有 js 内容按模块化的方式来切分组织，其中就存在依赖关系，而异步加载不保证执行顺序。
另外，namespace 如何管理 等相关问题。这部分已超出本文内容，可参考requireJS、commonJS

本文地址：https://blog.csdn.net/weixin_49200148/article/details/107323155