js异步加载

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

问题分析

在开发网站页面的时候经常会加载js文件，但是我们在加载js的时候会遇到js非常大或者执行事件长的情况下会出现页面短时间内白屏的现象。 这是因为web页面是按照顺序执行的然后代码一边下载浏览器一边处理，当遇到标签浏览器会先停下来去加载相应的css文件，然后加载出来，遇到<script></script>标签会看有没有src属性，如果有就下载相应的js文件然后执行js，等js执行完毕后在继续向下执行。在这种顺序执行的情况下就会出现第一段话我们说的问题。

解决方案：

1. 我们可以把script引入的外部资源统一放到</body>标签的前边，也就是放到所有dom节点的后边。
2. 通过给script标签增加异步加载属性 异步加载可以使用async\defer两个属性
3. 在前边写一个加载外部js的方法

<script>
    var script = document.createElement('script');
    script.src = 'a.js';
    document.querySelector('head').append(script);
</script>

区别

1. 把<script>标签放到底部的方法是按照代码的顺序执行。 这里主要讨论的是defer和async的区别 defer：是浏览器遇到带有该属性的js文件后台去加载并且代码继续向下执行，然后等到页面的所有dom元素都加载完毕后在执行。 async:是浏览器遇到带有该属性的js文件会取后台进行加载并且代码继续执行，等到js下载完毕后立即执行js并且暂停正在执行的代码，等到js执行完毕，在继续接着执行刚才暂停的代码。

通过上图可以看出，如果script标签是async属性的话是js加载和html执行是同步的，但是到加载完后html停止执行，然后执行js中间会有暂停情况 而defer却是html和js的加载同时进行，然后等html加载完毕后才开始渲染执行js文件。