JS异步那些事 五 （异步脚本加载）
异步脚本加载
阻塞性脚本
JavaScript在浏览器中被解析和执行时具有阻塞的特性，也就是说，当JavaScript代码执行时，页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕
浏览器是按照从上到下的顺序解析页面，因此正常情况下，JavaScript脚本的执行顺序也是从上到下的，即页面上先出现的代码或先被引入的代码总是被先执行，即使是允许并行下载JavaScript文件时也是如此。注意我们这里标红了”正常情况下”，原因是什么呢？我们知道，在HTML中加入JavaScript代码有多种方式，概括如下(不考虑require.js或sea.js等模块加载器)：
（1）正常引入：即在页面中通过<script>标签引入脚本代码或者引入外部脚本
（2）通过document.write方法向页面写入<script>标签或代码
（3）通过动态脚本技术，即利用DOM接口创建<script>元素，并设置元素的src，然后再将元素添加进DOM中。
（4）通过Ajax获取脚本内容，然后再创建<script>元素，并设置元素的text，再将元素添加进DOM中。
（5）直接把JavaScript代码写在元素的事件处理程序中或直接作为URL的主体
具体参考 http://www.jb51.net/article/77920.htm
脚本延迟运行
一般在JS页面延迟执行一些方法。可以使用以下的方法:
Window.setTimeout jQuery.delay jQuery.queue和jQuery.dequeue <script src="deferdemo.js" defer></script>加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活！
<script type="text/javascript" src="demo_async.js" async="async"></script>使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构）
SeaJS与RequireJS
网上写amd和cmd的文章很多，当然也有很多都是误人子弟的片面的看法，所以还是推荐自己看官方文档多加尝试去理解。
“RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范”。
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
amd 规划 https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)
cmd 规范 https://github.com/seajs/seajs/issues/242
区别：
-
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）
-
CMD 推崇依赖就近，AMD 推崇依赖前置。
ECMAScript6 Moudle
历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import到了ES6，实现了模块化的功能，功能上基本可以取代 cmd和amd的规范，
模块的功能主要由两个命令构成，export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
export的写法，
// profile.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year};上面代码在export命令后面，使用大括号指定所要输出的一组变量。
import写法：
// main.js import {firstName, lastName, year} from './profile'; function setName(element) { element.textContent = firstName + ' ' + lastName; }ES6模块加载的实质
ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的”符号连接“，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
// mod.js function C() { this.sum = 0; this.add = function () { this.sum = 1; }; this.show = function () { console.log(this.sum); } } export let c = new C();上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。
// x.js import {c} from './mod'; c.add(); // y.js import {c} from './mod'; c.show(); // main.js import './x'; import './y';现在执行main.js，输出的是1。
证明加载的是同一个实例
参考 http://es6.ruanyifeng.com/#docs/module
总结
写这篇博客参考了很多网上的文章和一些书籍，因为太多就没有一一列举，这也算是我学习js异步知识的一个记录吧。
毕竟马上就要去以一个前端工程师的身份去鹅厂实习了，所以还是要多学点东西，拿点干货出来。
关于JS异步那些事就写到这里了，很多地方理解的不够深刻希望大家多多指教。
正文到此结束
热门推荐
相关文章
近期评论
-
你这基本没有更新呀，最近文章显示还是2019年的文章。不符合要求哈
-
关键词：慕云博客 链接：https://www.lilun.me 描述：分享原创文字的个人博客
-
-
-
可以提供一下源码吗
-
不是商业站，鸡娃学习笔记
-
-
-
-
听他们说很厉害的样子
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
