神刀安全网

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

区别:

  1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » JS异步那些事 五 (异步脚本加载)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址