异步加载js

异步加载js

为什么js加载会阻断加载的进行？
因为js会修改html和css

js加载的缺点：加载工具方法没必要阻塞文档，过的js加载会影响页面效率，一旦网速不好，那么整个网页将等待js加载而不进行后续渲染等工作。

有些工具方法需要按需加载，用到再加载，不用不加载。

javascript 异步加载 的 三种方案

1.defer异步加载，但要等到dom文档全部解析完才会被执行。只有 IE 能用，也可以将代码写到内部。

2.async 异步加载， 加载完就执行， async只能加载外部脚本，不能把js写在script标签里。

1.2 执行符时也不阻塞页面

3.创建script, 插入到DOM中， 加载完毕后callBack,

exmaple:

<script type="text/javascript">
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '../../tools.js';
        //当下载完了再出发onload事件，它的兼容性很好：Safair chrome firefox opera
         script.onload = function() {
           	 test();
         }

        document.head.appendChild(script);

IE上面的加载提示机制

	 script.readyState = 'loading';
    script.readyState = 'complete';
    script.readyState = 'loaded';

加载机制兼容性的方法

    if (script.readState) {
        script.onreadstatechange = function() {
            if (script.readState == 'complete' || script.readState == 'loaded') {
                test();
            }
        }
    } else {
        script.onload = function() {
            test();
        }
    }