# 异步加载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文件的返回值是对象需要传参数,如果返回的是对象直接使用