ES Module在浏览器的执行过程

总体分为两步

一:下载解析:

(1)下载:当浏览器执行以下代码时:—进行模块解析(注意不是执行代码),碰到src引入js文件时,它会将相对路径替换为绝对路径,然后去下载相应的模块,下载结束后会拿到里面的代码;

    <script type="module" src="/src/main.ts"></script>
   

(2)解析(不是执行),解析当前文件代码时,他会找到当前文件中的:顶级静态导入文件(放在if-else中的文件不算,动态代码中导入不算),然后将将找到的导入语句提前,目的是拿到所有的js文件进行解析,----过程还是拿到url补全,下载解析—递归的解析,-----需要注意如果其中一个文件被下载解析过或者正在下载中,他不会重复下载解析;-----而且页面中的多个js文件,是并行下载解析的—提高了性能;

二、模块执行:当第一步将所有的模块异步的下载解析完成后进行执行代码阶段;

执行过程中是从上往下执行的,遇到import a from 'a.js’导入语句,他会进入此a文件执行其中代码,a文件执行完毕,它会进行模块导出(export default默认导出,export命名导出),对于导出语句,他在内部会生成一个映射表(一个js文件生成一个表格),这个表格中专门来记录当前js文件导出了什么,目的就是为了进行缓存,当其他文件用到了a.js是直接从表格中拿到缓存结果执行; import a from 'a.js’导入中的a和导出表格的标识指向同一块内存空间—符号绑定;一步步执行完