博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Module的加载实现
阅读量:7249 次
发布时间:2019-06-29

本文共 924 字,大约阅读时间需要 3 分钟。

本系列属于阮一峰老师所著的学习笔记


浏览器加载

在HTML网页中,浏览器通过script标签加载JavaScript脚本。

浏览器加载外部脚本时,如果脚本体积很大,下载和执行的时间很长会造成浏览器堵塞,造成很不好的用户体验,所以浏览器允许脚本异步加载。

<script>标签打开deferasync属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。

defer是"渲染完再执行":等到整个页面正常渲染结束,才会执行。

async是"下载完就执行":下载完脚本,中断渲染,执行完脚本之后再继续渲染。

加载规则

浏览器加载ES6模块,也使用<script>标签,但是要加入type="module"属性。

浏览器对于带有type="module"<script>,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本,等同于defer属性。

这时,也可以加上async属性,只要加载完成,渲染引擎就会中断渲染立即执行,执行结束之后再回复渲染。

对于外部的模块脚本(上例是foo.js),有几点需要注意。

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

转载于:https://www.cnblogs.com/pengzhixin/p/7797750.html

你可能感兴趣的文章
浏览器缓存机制
查看>>
Date、System、Calendar获取当前时间毫秒
查看>>
JS中的类型检测总结
查看>>
vue小demo0
查看>>
QQ邮箱无法收到系统邮件的问题处理
查看>>
iPhone X 网页导航概念
查看>>
python脚本监控程序问题&解决
查看>>
C++ 入门教程(开发文档)
查看>>
UCloud可支撑单可用区320,000服务器的数据中心网络系统设计
查看>>
测试网络rinkeby外文资料
查看>>
php 非常有用的高级函数PATH_SEPARATOR常量和set_include_path
查看>>
android studio 3.0 入坑需知
查看>>
java线程--打印错误堆栈信息
查看>>
你都用过世界地图中哪些数据中心
查看>>
QuickBI助你成为分析师-保证数据安全:行级权限
查看>>
记录安全扫描后进行的代码重构各类问题以及处理办法
查看>>
三周第一次课
查看>>
解决手机运行appium会自动安装settingapp和unlock
查看>>
SAP S/4HANA CDS View的访问控制实现:DCL介绍
查看>>
快速了解掌握中文自然语言处理
查看>>