美文网首页
Module 的加载

Module 的加载

作者: 努力与幸运 | 来源:发表于2018-07-03 17:03 被阅读7次
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

defer与async的区别是:前者要等到整个页面正常渲染结束,才会执行;后者一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。一句话,defer是“渲染完再执行”,async是“下载完就执行”。另外,如果有多个defer脚本,会按照它们在页面出现的顺序加载,而多个async脚本是不能保证加载顺序的。

<script type="module" src="foo.js"></script>
<!-- 等同于 -->
<script type="module" src="foo.js" defer></script>

对于外部的模块脚本,需要注意:

1,代码是在模块作用域之中运行,而不是在全局作用域运行。模块内部的顶层变量,外部不可见。
2,模块脚本自动采用严格模式,不管有没有声明use strict。
3,模块之中,可以使用import命令加载其他模块(.js后缀不可省略,需要提供绝对 URL 或相对 URL),也可以使用export命令输出对外接口。
4,模块之中,顶层的this关键字返回undefined,而不是指向window。也就是说,在模块顶层使用this关键字,是无意义的。
5,同一个模块如果加载多次,将只执行一次。

相关文章

  • Redis Module实现

    Redis Module实现 加载 卸载

  • Module 的加载

    defer与async的区别是:前者要等到整个页面正常渲染结束,才会执行;后者一旦下载完,渲染引擎就会中断渲染,执...

  • nginx浅析

    使用echo模块 编译时加载 echo module--add-module=/$yourPath/echo-ng...

  • Ant Design 样式使用css module

    #### antd的less配置不开启css module,但是代码里面想用css module加载样式,方便局部...

  • Glide入门教程——19.Glide Module 案例: 通

    Glide Module 案例: 通过加载自定义大小图片优化 原文:Glide Module Example: O...

  • AMD

    AMD, Asynchronous Module Definition,即异步模块加载机制,它采用异步方式加载模块...

  • Module的加载实现

    上面代码中, 标签打开defer或async属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,...

  • Module的加载实现

    浏览器加载 标签的async属性也可以打开,这时只要加载完成,渲染引擎就会中断渲染立即执行。执行完成后,再恢复渲染...

  • Module 的加载实现

    本章介绍如何在浏览器和 Node 之中加载 ES6模块,以及实际开发中经常遇到的一些问题(比如循环加载) 一、浏览...

  • Module 模块加载

    ES6 模块规范 ES6 的模块功能主要由两个命令构成: export 和 import。export 命令...

网友评论

      本文标题:Module 的加载

      本文链接:https://www.haomeiwen.com/subject/loljuftx.html