JavaScript异步加载的方式有哪些

在传统的做法中，所有的script元素均应该放在页面的head元素中。
在这里插入图片描述
第一种位置中，把script放在了head中，这也是传统的做法。目的是把所有外部文件（css文件和js文件）的引用都放在相同的地方，可是，放在这里，意味着必须得全部的js代码都被下载解析和执行完成以后，才开始呈现页面的内容（浏览器遇到body标签才开始呈现内容）。如果js代码很多，无疑会导致页面呈现的内容出现延迟，用户体验性差。为了解决这个问题，现代web程序一般把全部js引用放在body的最后，即页面内容的后面。
第二种位置中，在解析js代码之前，页面内容将完全呈现在页面中。

1，同步加载与异步加载的区别

同步加载：阻塞页面的渲染。文章开头的两种做法，均是同步加载的方式。只是加载的时机不同。

异步加载：非阻塞的。浏览器在下载执行 js 同时，还会继续进行后续页面的处理。

2，为什么采用异步加载

优化脚本文件的加载提高页面的加载速度，一直是提高页面加载速度很重要的一条。
因为涉及到各个浏览器对解析脚本文件的不同机制，以及加载脚本会阻塞其他资源和文件的加载，因此更多的采用异步加载。

3，异步加载的方式

1）动态创建script标签。

 <script type="text/javascript" >
    var script=document.createElement("script");
    script.type="text/javascript";//设置Type
    script.src="example.js";//设置src
    document.head.appendChild(script);//异步加载
    script.onload=function(){
        test();
    }
 </script>

example.js:


function test(){
    console.log("1");
}

上面中将script标签追加到head中时，就是异步加载toos.js的过程。如果想要调用这个test方法，必须再onload函数中去调用（此时js加载完毕）。
除了IE浏览器无法执行，其他都是可以的。
在ie浏览器中，通过提供的readyState状态码来实现。


var script=document.createElement("script");
script.type="text/javascript";//设置Type
script.src="example.js";//加载文件
if(script.readyState){
        script.onreadystatechange=function(){
           //z状态码为complete或者loaded时去调用脚本的内容
            if(script.readyState=="complete"||script.readyState=="loaded"){
                test();
            }
        }
    }

2）利用script的defer属性。
这个属性是告诉浏览器脚本要延迟到整个页面都解析完毕之后在运行。即浏览器要立即下载脚本，但是延迟执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>

</head>
<body>
    <!-- 内容 -->
</body>
</html>

HTML5规范要求脚本按照他们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行。
这里的两个脚本会延迟到浏览器遇到《/html》标签再执行。而且，defer属性只适用于外部脚本文件。
但是只能IE来用，其他浏览器不支持
3）利用script的async属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" async src="example1.js"></script>
    <script type="text/javascript" async src="example2.js"></script>

</head>
<body>
    <!-- 内容 -->
</body>
</html>

与defer类似，async只适用外部脚本文件，并告诉浏览器立即下载文件，与defer不同的是，标记为async的脚本并不会保证按照指定他们呢的先后顺序执行。
IE9以上都能执行，比较普遍

参考1：https://www.cnblogs.com/TaylorApril/p/6632061.html
参考2：JavaScript高级程序设计第三版