javascript 异步加载图片 前端异步加载js

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