介绍外部js脚本加载慢 解决页面白屏问题

问题背景

最近的一个项目需要引入一个外部第三方js脚本。因为这是一个关于渲染3D建筑的脚本，比较大，关于2M，需要几秒钟才能完成加载。网速慢的时候有可能超过十秒。

我之前也遇到过脚本加载慢的问题，但是没有那么慢，所以这次写了一篇文章记录我的解决方案。

首先，项目最后两张截图已经完成。

下图是由第三方脚本渲染的三维建筑页面

下图是主页，不需要第三方脚本

遇到的问题和需求

外部脚本的引入太大，加载时间太长。主页不能使用外部脚本，需要先使用外部脚本渲染页面。如果脚本没有被很好地加载，单击它将报告错误以解决问题。

我首先将脚本标签直接引入条目文件的头部，如下所示

Headscript src=' http:/ddearth.js'/script/head。这个页面可以正常加载，但是页面出来比较慢，刚开始会有一段时间是空白的，等待js脚本加载。虽然脚本大是事实，但用户体验绝对可以优化。

后来，我把这个脚本放在页面的底部，也就是/body标签下。这样，可以先渲染页面，然后慢慢加载这个巨大的脚本，这样主页就会很快出来，但是从主页跳转到需要使用这个脚本的页面会报错，如下所示

出现此错误的原因是此页面需要使用对象窗口。DDEarth，但是因为这个脚本还没有加载，所以window下没有这样的对象，所以报告了一个错误。

然后我想到了在执行相关方法之前等待脚本加载。此时，我需要使用onload，它将在脚本加载时执行。在介绍脚本的时候，我给它添加了一个id，方便以后通过dom查找。代码如下：

//条目文件/body script id=' ddearthscript ' src=' http :/ddearth . js '/script//page two . jscomponentiddmount(){ const script=document . getelementbyid(' ddearthscript ')；//查找脚本节点if (script) {script。onload=()={//脚本已加载，映射加载操作this.loadEarthMap()已完成；};}}当我用上面的代码跳转到PageTwo时，我会等到加载脚本DDEarth.js，然后执行加载架构图的操作，这样就不会报错了。

但是还有一个问题，就是如果在我跳转到第二页之前已经加载了DDEarth.js，那么onload的事件在第二页就不会生效，loadEarthMap的方法自然也不会执行。

这时，你需要加上一个判断。完整的代码如下：

//page two . jscomponentimount(){ if(window . ddearth){//if this . loadearthmap()在跳转到此页面之前已经加载；} else { const script ele=document . getelementbyid(' ddEarthScript ')；if(script ele){ script ele . onload=()={ this . loadearthmap()；};}}}总结我以上解决问题的步骤

在条目文件的底部引入第三方脚本，并向其中添加一个id。当然，也可以放在头部，但是需要添加html5添加的async属性，这样就可以异步加载脚本。

在需要使用这个脚本的页面上，首先判断脚本是否已经加载(这里我直接判断窗口是否。DDEarth对象为空)。如果加载已经完成，则直接执行相关操作；如果没有，先通过document.getElementById找到脚本，然后监听脚本的onload事件，再做相关操作。

在什么情况下可以用我以上的想法？

引入的第三方脚本很大，加载时间很长。页面需要按需加载。整个项目中只有几页需要使用引入的第三方脚本，它会在加载第三方脚本之前呈现页面。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。