前言
默認情況下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事件會在整個頁面加載完后才觸發（注意是觸發，不是執行）。