专栏首页大前端_Web深入理解JS异步编程五(脚本异步加载)

深入理解JS异步编程五(脚本异步加载)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51582801

异步脚本加载

阻塞性脚本

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从前端模块化的概念来理解Webpack

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • 不定高多行溢出文本省略

    大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

    空空云
  • NodeJS学习二CommonJS规范

    Node程序由许多个模块组成,每个模块就是一个文件。Node模块采用了CommonJS规范。

    空空云
  • python3第六天(数据结构)

        列表可以当作栈来使用(先进后出),利用append()和pop()方法。

    py3study
  • Tree-Shaking的工作原理

    Tree-shaking (树摇)最早是由Rollup实现,是一种采用删除不需要的额外代码的方式优化代码体积的技术,webpack2借鉴了这个特性也增加了tre...

    伯爵
  • 学界 | MIT周博磊团队:时序关系网络帮助计算机填补视频帧之间的空白

    AI 科技评论按:如果你向一个人仅仅展示一段视频中的几帧,他通常可以推测出视频里发生的是什么事件以及屏幕上会显示出什么。例如,如果我们在视频开始时的帧中看到了一...

    AI科技评论
  • day02_js学习笔记_01_js的简介、js的基本语法

    黑泽君
  • 【干货】全球大数据领域顶级开源工具汇总

    大数据技术领域正被越来越多的公司关注,而开源一直是大数据技术的灵魂。随着一些细分领域对大数据工具提出更高的期望和要求,一批更高效更有针对性的大数据工具先后诞生,...

    钱塘数据
  • 【推荐收藏】全球大数据领域顶级开源工具汇总

    大数据技术领域正被越来越多的公司关注,而开源一直是大数据技术的灵魂。随着一些细分领域对大数据工具提出更高的期望和要求,一批更高效更有针对性的大数据工具先后诞生,...

    钱塘数据
  • [Next] 初见next.js

      Next.js 可与 Windows,Mac 和 Linux 一起使用.您只需要在系统上安装 Node.js 即可开始构建 Next.js 应用程序.如果有...

    不会飞的小鸟

扫码关注云+社区

领取腾讯云代金券