2021-05-10

JS同步加载以及异步加载的三种方式

同步加载就是一种我们最常用的一种方式。这种加载方式带来的一种影响就是会导致页面阻塞。因为js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以建议是把script标签写在body的后面。尽量避免这种阻塞带来的影响。

异步加载

1.defer的用法-以前适用于IE，写在可以在主流浏览器上使用。

 <script src="test.js" defer></script>

defer可以直接在script标签上使用。他的属性值也就他自己一个，所以也可以直接写。
这个属性规定是否对脚本进行延迟加载，直到页面加载完成为止。
添加这个属性后，js脚本按照脚本声明顺序执行。

2.async-h5新增属性
async-用法和defer类似，但是async这个属性只适用于外部去引用脚本，即script要有scr属性才能去使用。

<script src="test.js" async></script>


不同的是，添加async属性后，js脚本是乱序执行的，不管声明的顺序如何，只要某个js脚本加载完就立即执行.

3.按需加载
就是在script标签中 插入到dom中
这样所有的js脚本都会在onload事件后才加载，onload事件会在所有文件内容（包括文本、图片、CSS文件等）加载完成后才开始执行，极大的优化了网页的加载速度。

```javascript
 // 3. 按需加载  
        动态创建script标签  
        var script = docuemnt.createElement('script');
        已经开始下载文件
        script.src = 'test.js'
        // 等到所有的 html文件解析和加载完成之后
        document.body.appenChild(script);
        // ie中有很多监听 readyState  文件加载完成
        script.readyState = 'complate'
        script.readyState = 'loaded' 
        // 监听状态变化  兼容ie的写法
        script.onreadystatechange = function(){
            if(script.readyState == 'complate' || script.readyState == 'loaded' ){
                test();
            }
        }

        if(script.readyState){
            script.onreadystatechange = function(){
                if(script.readyState == 'complate' || script.readyState == 'loaded' ){
                    test();
                }
            }
        }else{
            script.onload = function(){  //加载完成去执行代码  ie中不能使用
                test();
            }
        }