javascript异步加载的三种方案
1、defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用,也可以将代码写到内部。
![v2-8312928722bb6cc2a22bc44e847f7485_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=29c3efbf-612f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-8312928722bb6cc2a22bc44e847f7485_b.jpg)
2、async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script标签里。
(1、 2执行时也不阻塞页面)
3、创建script,插入到DOM中,加载完毕后callback。可以解决不同浏览器的兼容问题。
![v2-38fca83bf5ad788ced1f5e771779b819_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=29c3efbf-612f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-38fca83bf5ad788ced1f5e771779b819_b.jpg)
这样仍然会遇到一个问题,假设我们的test.js里有一个test方法,我们在appendChild之后执行这个test方法,会报错,因为script.src对js文件的预加载可能还没有完成,那么我们怎么处理呢?我们知道,当我们想要给img标签加载图片资源,并在加载完图片资源后进行操作时,会用到onload事件,同样的,script标签加载src资源也可以用同样的方法。(注意,ie不兼容)
![v2-78b1db0aaff9933c37d3c90b0ad623a3_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=29c3efbf-612f-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-78b1db0aaff9933c37d3c90b0ad623a3_b.jpg)
ie不兼容此方法,但ie的script标签有个状态码叫readtState,默认为‘loading’,当加载完之后,状态码会变为‘complete’或‘loaded’。并且ie提供了一个onreadystatechange事件来监听状态码的改变。所以我们可以写一个兼容的写法:
![v2-273c5bc9b77b6f0d578103d2ff0e7873_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=29c3efbf-612f-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-273c5bc9b77b6f0d578103d2ff0e7873_b.jpg)
当我们写了一个工具库tools.js,想要在页面中引用这个js的部分方法,并且此方法可能只有在特定的情况下才会使用。这时候,如果把此js直接加载到页面中肯定会造成资源的浪费,通过上面的学习,我们可以封装一个方法,令这个js只在我们需要调用它的时候再加载,如果不需要则不加载。
![v2-07e639f25049c577df1e32458fee0bab_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=29c3efbf-612f-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-07e639f25049c577df1e32458fee0bab_b.jpg)
上面这个方法还可以再优化一下:
1)我们的test()可以写成参数传进来,变成动态的
2)如果我的网速足够快,我们的src瞬间就加载完毕,当代码执行到绑定onreadystatechange事件后,由于src的readyState已经改变,就监听不到此事件的发生了(有点吹毛求疵的感觉,基本上不会发生,不过考虑周到总没错哈哈哈)
所以我们可以先绑定监听事件,再来加载src资源
![v2-f32013d08415b2a24266e8580fc7f9f6_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=29c3efbf-612f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-f32013d08415b2a24266e8580fc7f9f6_b.jpg)
但是这样写,也有一个问题,咱们的test在传参时,实参test是一个变量,而我们的代码里并没有声明这个变量,所以会报错,我们可以再优化一下
![v2-890a5c63819d6c6f1990bc838e4394b6_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=29c3efbf-612f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-890a5c63819d6c6f1990bc838e4394b6_b.jpg)
我们传一个匿名函数进去,当callback执行时,执行的是此匿名函数,然后匿名函数的函数体里执行的才是test函数。
我们甚至可以更近一步,将tools.js里的方法赋值给对象的属性,我们在学习对象时知道,对象是可以通过[ ‘字符串’ ]方法来调用的,所以我们还可以这么写:
![v2-3979d926e00f7078c2c9ccfc987e5d42_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=29c3efbf-612f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-3979d926e00f7078c2c9ccfc987e5d42_b.jpg)
好了,今天的学习就到这里了,希望对大家有所帮助。