引入外部js剧本加载慢与页面白屏题目

2019年8月20日 228次阅读 来源: 嘴里起了个泡

题目背景

近来做的一个项目须要引入一个外部的第三方js剧本。因为这是一个关于衬着3D修建的剧本，所以体积比较大，大概有2M，加载完成也得要个好几秒，网速慢的时刻十几秒都有能够。
之前也碰到剧本加载慢的题目，然则没这么慢，所以此次就迥殊写个文章纪录一下我的处理历程。

首先上两张项目已完成的截图。

下图是经由过程第三方剧本衬着出来的3D修建页面
《引入外部js剧本加载慢与页面白屏题目》

下图是首页，不须要用到第三方剧本《引入外部js剧本加载慢与页面白屏题目》

碰到的题目和需求

  1. 引入外部剧本太大，加载时候太长
  2. 首页用不到外部剧本，须要先衬着出来
  3. 用到外部剧本的页面，假如剧本还没加载好就点进去会报错

处理题目的历程

我一开始经由过程<script>标签直接引入到进口文件的头部，以下
`
<head>

<script src="./DDEarth.js"></script>

</head>
`
如许页面是能够一般加载的，然则页面出来的很慢，一开始会白屏一段时候守候这个js剧本加载完成。虽然剧本体积大是现实，但这用户体验肯定是能够优化的。
厥后我又把这个剧本放到了页面底部，也就是</body>标签下面。如许能够先让页面衬着出来，再逐步加载这个巨大的剧本，因而首页是出来的很快，然则从首页跳转到须要用到这个剧本的页面就会报错，以下

《引入外部js剧本加载慢与页面白屏题目》

这个毛病原因是这个页面须要用到window.DDEarth这个对象，然则因为此时这个剧本还没有加载完成，所以window下并没有这个对象，所以就报错了。

因而我又想到等剧本加载完成再实行相干要领，这时候就须要用到onload这个要领了，onload这个要领在剧本加载完成的时刻会实行。我引入剧本的时刻给它加了个id，轻易今后经由过程dom找到，代码以下：

// 进口文件
 </body>
 <script id="ddEarthScript" src="./DDEarth.js"></script>

// PageTwo.js
componentDidMount() {
      const scriptEle = document.getElementById('ddEarthScript'); // 找到剧本节点
      if (scriptEle) {
        scriptEle.onload = () => {
           // 剧本加载完成实行加载舆图的操纵
          this.loadEarthMap();
        };
      }
  }

有了以上代码我跳转到PageTwo这个页面的时刻，会比及DDEarth.js这个剧本加载完成，再实行加载修建舆图的操纵，如许就不会报错了。
然则这又有一个题目，就是假如我跳转到PageTwo的之前，DDEarth.js已加载完成了，onload这个事宜在PageTwo这个页面中就不见效了，loadEarthMap这个要领天然也就不会实行了。
这个时刻须要加一个推断，完全代码以下：

// PageTwo.js
componentDidMount() {
    if (window.DDEarth) {  // 假如跳转到此页面之前，剧本已加载完成
      this.loadEarthMap();
    } else {
    const scriptEle = document.getElementById('ddEarthScript');
    if (scriptEle) {
      scriptEle.onload = () => {
        this.loadEarthMap();
      };
    }
    }
  }

总结一下我以上处理题目的步骤

  1. 在进口文件的底部引入第三方剧本，并给它加个id。固然也能够放在<head>里，然则须要分外加上html5新增的 async 这个属性，如许剧本才异步加载。
  2. 在须要用到这个剧本的页面，先推断剧本有无加载完成（我这里是直接推断window.DDEarth对象是不是为空）。假如已加载完成，就直接实行相干操纵；假如没有，先经由过程document.getElementById找到谁人剧本，然后监听剧本的onload事宜，再做相干操纵。

什么情况能够用我以上思绪？

  1. 引入的第三方剧本较大，加载所需时候较长
  2. 页面按需加载，全部项目只要个中某几个页面须要用到引入的第三方剧本
  3. 第三方剧本没加载完就衬着页面致使的页面报错
    原文作者：嘴里起了个泡
    原文地址: https://segmentfault.com/a/1190000017313747
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞