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

题目背景

近来做的一个项目须要引入一个外部的第三方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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞