es6,commonJS模块加载方法比较

1.传统方法：
        默认情况下，浏览器是同步加载 JavaScript 脚本，渲染引擎遇到<script>标签就会停下来，等执行完脚本，再继续向下渲染。
        如果是外部脚本，还要加入脚本下载的时间。
        总结：停下渲染，（下载脚本）执行脚本，继续渲染；
        弊端：脚本体积大，下载和执行时间长，浏览器‘卡死’
        解决方法： defer和async属性 ，渲染引擎遇到这一行命令，就开始下载外部脚本，但不会等它下载和执行，而直接执行后面的命令。
        defer和async区别：defer是渲染完再执行，多个defer脚本会顺序执行
                                        async是下载完就执行（渲染中断），不能保证是否顺序加载
        
    2.es6的加载：type="module"都是异步加载
        <script type="module" src="./foo.js"></script>
        <!-- 等同于 -->
        <script type="module" src="./foo.js" defer></script>
    3.es6模块和CommonJS的区别
        CommonJS模块输出的是一个值的拷贝，es6模块输出的是值的引用（commonjs的内部变化不会影响这个值）
        CommonJS模块是运行时加载，es6模块是编译时输出的接口
        CommonJS加载的是一个对象，该对象是运行时生成；es6模块不是对象，对外接口是代码静态解析就完成
        ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块
    4.Node加载
         Node 要求 ES6 模块采用.mjs后缀文件名。
        只要脚本文件里面使用import或者export命令，就必须采用.mjs后缀名。
        require命令不能加载.mjs文件，只有import命令才可以加载.mjs文件。
        反过来，.mjs文件里面不能使用require命令，必须使用import。

        ---------------------------------------------------个人声明：学习笔记，来自于http://es6.ruanyifeng.com/#docs/module-loader