异步加载js

js加载的缺点

js的加载是同步的 当加载到js文件时 就阻断了html和css的加载
等js加载完并执行完后 再继续html和css的加载（这里不能并行执行的原因是js也能修改html和css）
但是加载工具方法没必要阻塞文档 这使得js加载会影响页面效率
一旦网速不好 那么整个网站将等待js加载而不进行后续渲染等工作

javascript 异步加载的三种方案

有些工具方法需要按需加载 用到再加载 不用就不加载 所以就使用到了异步加载
1 defer
异步加载 但要等到dom文档全部解析完才会被执行 可以把js写在script标签里
只有IE能用
如
2 async
异步加载 加载完就执行 async只能加载外部脚本 但不能把js写在script 标签里
W3C标准
如
因为1、2这两种方法执行时不阻塞页面 但是考虑到兼容性问题 但是这两个方案又不能同时写 所以由此引出了第三种方案
*3 创建script标签 来加载js 可以做到用到再加载 不用不加载

    <script>
        //创建script标签
        var script = document.createElement("script");
        //type写不写都行
        // script.type = "text/javascript";
        //下面就是异步加载js的过程 执行完下面这行代码后 系统就会下载地址里面的东西了
        //即开启一个线程去加载script标签
        script.src = "./index.js";
        //下载完后 只有把这个script标签添加到页面时才会执行 不然永远不会执行
        document.head.appendChild(script);
    </script>

注意如果想执行js文件中的方法 但是这里不能马上执行 因为下载文件需要时间的 可能没下载完
所以就用到了一个方法 下载完再执行方法 即load事件
封装一个兼容性的方法

    <script>
        function loadJS(url, callback) {
            //url表示导入文件路径 callback表示要调用的文件中的方法名
            var script = document.createElement("script");
            script.type = "text/javascript";
            if (script.readyState) {//IE
                script.onreadystatechange = function () {
                    if (script.readyState == "complete" || script.readyState == "loaded") {
                        callback();
                    }
                }
            } else {
                script.onload = function () {
                    callback();
                }
            }
            //如果js文件下载的很快 快到连触发事件的机会都没有 那么下面这行代码就不能写在事件前面
            //所以我们把它写在了事件后面
            script.src = url;
            document.head.appendChild(script);
        }
        //注意执行时会先预编译function loadJS 但是不会看函数里面的内容
        //只有函数被调用时才会看里面的内容 即文件还没加载 我们就想让他执行文件里面的函数
        //这时如果我们直接传一个函数名进去 系统就会报错 即未定义
        //所以我们就传个函数引用 然后里面放方法执行 系统读到时并不会读里面的内容
        loadJS('index.js',function(){
            test();
        });
    </script>