＜script＞标签引入js加载慢与页面白屏优化

问题描述

前端开发过程中，比如使用vue开发spa，不可避免的会引入外部的js文件，如地图等。举个例子，如果引入企鹅家的高精度地图，那么光等待这个js加载就需要4s左右。那么整个页面的等待时长就相当令人恼火了！

原因

默认情况下，页面中的Script标签加载的顺序由上而下，并且它们是阻塞的，，如果一个Script标签由于网络等原因，下载速度较慢，则DOM结构的渲染以及其他Script标签的下载将会被阻塞。后面的步骤，将在下载并且执行之后才会恢复

分析与解决

很多这种外部的js只是在特定的页面，或者说特定的功能才会被使用到，所以我们自然而然的想如果让这部分异步加载，那不就不影响页面的渲染了吗，毕竟这部分在首页是用不到的。

        我们发现：script标签悄悄咪咪的支持了两个属性！！！！async & defer！

MDN上是这么说的

async

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。 对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。 该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。 这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

defer

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded (en-US) 事件前执行。 有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。

解决

我们只用在script标签里面加上async即可，不要太方便！！！

// 原写法
<script src="xxxxxx"></script>
// 添加 async 属性
<script async src="xxxxxx"></script>

浏览器的支持程度