js异步加载的五种方式
前言
默认情况下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事件会在整个页面加载完后才触发（注意是触发，不是执行）。
