# 異步加載js文件
- js的加載默認是同步的,因為js是單線程執行,只能完成一件再執行下一件.
- 一些外部引入的js文件可以因為文件太大,在加載資源的過程中會影響dom元素的加載,影響了用戶體驗,因此會使用異步加載技術加載文件.
- 一般情況下給所有的script標簽添加一個async異步屬性,在加載script標簽的同時加載dom元素.但會出現另外一個問題.加載的js資源,如jQuery,不能使用,因為在執行jQuery程序的時候,jQuery.js還沒有加載完成.這時可以用到回到函數
1. 使用回到函數在加載完成資源后調用該資源的方法
```javascript
<script async src="js/jquery-1.12.4.min.js" id="jq"></script>
<script async >
document.querySelector("#jq").onload = function () {
console.log($);
}
</script>
```
2.require.js模塊化工具
- 通過該模塊化工具異步加載js文件后在執行該js文件的方法
```javascript
// <script src="./jquery.js"></script>
// <script src="./template.js"></script>
<script src="./require.js"></script>
<script>
require(['./jquery','./templatet'],function(template){
console.log($);
console.log(template);
})
</script>
```
- require()
> 參數1 : 是一個數組,里面的值是需要引用的js文件
> 參數2 : 回調函數,在異步加載完成js文件后執行的程序,如果引入的js文件的返回值是對象需要傳參數,如果返回的是對象直接使用