JS异步那些事五（异步脚本加载）

terasum 发布于2019-08-21 13:50 / 3418人阅读

摘要：遵循的是异步模块定义规范，遵循的是通用模块定义规范。不同的脚本加载这个模块，得到的都是同一个实例。关于异步那些事就写到这里了，很多地方理解的不够深刻希望大家多多指教。

JS异步那些事一（基础知识）
JS异步那些事二（分布式事件）
JS异步那些事三（Promise）
JS异步那些事四（HTML 5 Web Workers）
JS异步那些事五（异步脚本加载）

异步脚本加载 阻塞性脚本

JavaScript在浏览器中被解析和执行时具有阻塞的特性，也就是说，当JavaScript代码执行时，页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕

浏览器是按照从上到下的顺序解析页面，因此正常情况下，JavaScript脚本的执行顺序也是从上到下的，即页面上先出现的代码或先被引入的代码总是被先执行，即使是允许并行下载JavaScript文件时也是如此。注意我们这里标红了"正常情况下"，原因是什么呢？我们知道，在HTML中加入JavaScript代码有多种方式，概括如下(不考虑require.js或sea.js等模块加载器)：

（1）正常引入：即在页面中通过

加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活！

使用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异步那些事就写到这里了，很多地方理解的不够深刻希望大家多多指教。

idc机房托管云服务器异步脚本加载 js异步加载数据异步加载js文件 js异步加载css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87766.html

JS异步那些事四（HTML 5 Web Workers）

摘要：向添加一个事件监听器当传递消息时，会执行事件监听器中的代码。终止当我们创建对象后，它会继续监听消息即使在外部脚本完成之后直到其被终止为止。 JS异步那些事一（基础知识）JS异步那些事二（分布式事件）JS异步那些事三（Promise）JS异步那些事四（HTML 5 Web Workers）JS异步那些事五（异步脚本加载）什么是 Web Worker？当在 HTML ...

ZoomQuiet 2019-08-21 13:48 评论0 收藏0
JS异步那些事四（HTML 5 Web Workers）

摘要：向添加一个事件监听器当传递消息时，会执行事件监听器中的代码。终止当我们创建对象后，它会继续监听消息即使在外部脚本完成之后直到其被终止为止。 JS异步那些事一（基础知识）JS异步那些事二（分布式事件）JS异步那些事三（Promise）JS异步那些事四（HTML 5 Web Workers）JS异步那些事五（异步脚本加载）什么是 Web Worker？当在 HTML ...

maybe_009 2019-08-05 17:48 评论0 收藏0
JS异步那些事三（Promise）

摘要：异常处理异常处理一直是回调的难题，而提供了非常方便的方法在一次调用中，任何的环节发生，都可以在最终的中捕获到错误处理基本的小结具体的很多的用法可以参考阮一峰的入门教程，还有就是上面提到的电子书。 JS异步那些事一（基础知识）JS异步那些事二（分布式事件）JS异步那些事三（Promise）JS异步那些事四（HTML 5 Web Workers）JS异步那些事五（异步脚本...

wenzi 2019-08-21 13:48 评论0 收藏0
JS异步那些事一（基础知识）

摘要：异步那些事一基础知识异步那些事二分布式事件异步那些事三异步那些事四异步那些事五异步脚本加载事件概念异步回调首先了讲讲中两个方法和定义和用法方法用于在指定的毫秒数后调用函数或计算表达式。功能在事件循环的下一次循环中调用回调函数。 JS异步那些事一（基础知识）JS异步那些事二（分布式事件）JS异步那些事三（Promise）JS异步那些事四（HTML 5 Web Workers...

李涛 2019-08-21 13:49 评论0 收藏0
深入浅出JavaScript运行机制

摘要：主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。上面也提到，在到达指定时间时，定时器就会将相应回调函数插入任务队列尾部。这就是定时器功能。关于定时器的重要补充定时器包括与两个方法。一、引子本文介绍JavaScript运行机制，这一部分比较抽象，我们先从一道面试题入手： console.log(1); setTimeout(function()...

mochixuan 2019-08-02 11:52 评论0 收藏0