前言

　默认情况下js都是同步加载的，又称阻塞模式，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js异步加载</title>
    <script src="test1.js"></script>
    <script src="test2.js"></script>
</head>
<body>
<!--这是页面内容-->
</body>
</html>

　这种模式也就意味着必须把所有js代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时才开始渲染）。显然，这样会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。而且如果JS中有输出document内容、修改dom、重定向的行为，就会造成页面阻塞。当然为了解决这个问题，我们可以把所有Js引用都放在<body>元素中的内容之后，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js异步加载</title>
</head>
<body>
<!--这是页面内容-->
<script src="test1.js"></script>
<script src="test2.js"></script>
</body>
</html>

 　但是如果我们想要放在上面呢？有没有办法呢？当然有，接下来我们来看看Js异步加载的四种方式：

 

  js异步加载的四种方式

1、<script>标签的defer=“defer”属性

<script defer="defer" src="test1.js"></script>  //先执行
<script defer="defer" src="test2.js"></script>  //后执行
  • 脚本会被延迟到整个页面都解析完毕再运行（相当于告诉浏览器立即下载，但延迟执行）
  • 如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度
  • 会按出现顺序执行
  • 只对外部脚本文件有效
  • 兼容所有浏览器

 

2、<script>标签的async="async"属性

<script async="async" src="test1.js"></script>
<script async="async" src="test2.js"></script>
  • async是HTML5新增属性
  • 需要Chrome、FireFox、IE9+浏览器支持
  • 不会保证按出现的次序执行
  • 只对外部脚本文件有效

 

3、动态创建<script>标签

var script = document.createElement("script"); 
script.src = "test.js"; 
document.head.appendChild(script);
  • 兼容所有浏览器

 

4、$(document).ready()

$(document).ready(function() {
    alert("加载完成！");
});
  • 需要引入jquery
  • 兼容所有浏览器

 

5、onload异步加载

　　window.onload = function (){
        console.log("异步加载")
    }
  • onload事件会在整个页面加载完后才触发（注意是触发，不是执行）。