引入外部js腳本加載慢與頁面白屏問題的解決

問題背景

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的常熟網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

最近做的一個(gè)項(xiàng)目需要引入一個(gè)外部的第三方j(luò)s腳本。由于這是一個(gè)關(guān)于渲染3D建筑的腳本，所以體積比較大，大概有2M，加載完成也得要個(gè)好幾秒，網(wǎng)速慢的時(shí)候十幾秒都有可能。

之前也遇到腳本加載慢的問題，但是沒這么慢，所以這次就特別寫個(gè)文章記錄一下我的解決過程。

首先上兩張項(xiàng)目已完成的截圖。

下圖是通過第三方腳本渲染出來的3D建筑頁面

引入外部js腳本加載慢與頁面白屏問題的解決

下圖是首頁，不需要用到第三方腳本

引入外部js腳本加載慢與頁面白屏問題的解決

遇到的問題和需求

引入外部腳本太大，加載時(shí)間太長(zhǎng)
首頁用不到外部腳本，需要先渲染出來
用到外部腳本的頁面，要是腳本還沒加載好就點(diǎn)進(jìn)去會(huì)報(bào)錯(cuò)

解決問題的過程

我一開始通過<script>標(biāo)簽直接引入到入口文件的頭部，如下

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

這樣頁面是可以正常加載的，但是頁面出來的很慢，一開始會(huì)白屏一段時(shí)間等待這個(gè)js腳本加載完成。雖然腳本體積大是事實(shí)，但這用戶體驗(yàn)肯定是可以優(yōu)化的。

后來我又把這個(gè)腳本放到了頁面底部，也就是</body>標(biāo)簽下面。這樣可以先讓頁面渲染出來，再慢慢加載這個(gè)龐大的腳本，于是首頁是出來的很快，但是從首頁跳轉(zhuǎn)到需要用到這個(gè)腳本的頁面就會(huì)報(bào)錯(cuò)，如下

引入外部js腳本加載慢與頁面白屏問題的解決

這個(gè)錯(cuò)誤原因是這個(gè)頁面需要用到window.DDEarth這個(gè)對(duì)象，但是由于此時(shí)這個(gè)腳本還沒有加載完成，所以window下并沒有這個(gè)對(duì)象，所以就報(bào)錯(cuò)了。

于是我又想到等腳本加載完成再執(zhí)行相關(guān)方法，這時(shí)就需要用到onload這個(gè)方法了，onload這個(gè)方法在腳本加載完成的時(shí)候會(huì)執(zhí)行。我引入腳本的時(shí)候給它加了個(gè)id，方便以后通過dom找到，代碼如下：

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

// PageTwo.js
componentDidMount() {
   const scriptEle = document.getElementById('ddEarthScript'); // 找到腳本節(jié)點(diǎn)
   if (scriptEle) {
    scriptEle.onload = () => {
      // 腳本加載完成執(zhí)行加載地圖的操作
     this.loadEarthMap();
    };
   }
 }

有了以上代碼我跳轉(zhuǎn)到PageTwo這個(gè)頁面的時(shí)候，會(huì)等到DDEarth.js這個(gè)腳本加載完成，再執(zhí)行加載建筑地圖的操作，這樣就不會(huì)報(bào)錯(cuò)了。

但是這又有一個(gè)問題，就是如果我跳轉(zhuǎn)到PageTwo的之前，DDEarth.js已經(jīng)加載完成了，onload這個(gè)事件在PageTwo這個(gè)頁面中就不生效了，loadEarthMap這個(gè)方法自然也就不會(huì)執(zhí)行了。

這個(gè)時(shí)候需要加一個(gè)判斷，完整代碼如下：

// PageTwo.js
componentDidMount() {
  if (window.DDEarth) { // 如果跳轉(zhuǎn)到此頁面之前，腳本已加載完成
   this.loadEarthMap();
  } else {
  const scriptEle = document.getElementById('ddEarthScript');
  if (scriptEle) {
   scriptEle.onload = () => {
    this.loadEarthMap();
   };
  }
  }
 }

總結(jié)一下我以上解決問題的步驟

在入口文件的底部引入第三方腳本，并給它加個(gè)id。當(dāng)然也可以放在<head>里，但是需要額外加上html5新增的 async 這個(gè)屬性，這樣腳本才能異步加載。

在需要用到這個(gè)腳本的頁面，先判斷腳本有沒有加載完成（我這里是直接判斷window.DDEarth對(duì)象是否為空）。如果已經(jīng)加載完成，就直接執(zhí)行相關(guān)操作；如果沒有，先通過document.getElementById找到那個(gè)腳本，然后監(jiān)聽腳本的onload事件，再做相關(guān)操作。

什么情況可以用我以上思路？

引入的第三方腳本較大，加載所需時(shí)間較長(zhǎng)
頁面按需加載，整個(gè)項(xiàng)目只有其中某幾個(gè)頁面需要用到引入的第三方腳本
第三方腳本沒加載完就渲染頁面導(dǎo)致的頁面報(bào)錯(cuò)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享文章：引入外部js腳本加載慢與頁面白屏問題的解決
轉(zhuǎn)載源于：http://sd-ha.com/article6/ghdeog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站營(yíng)銷、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

引入外部js腳本加載慢與頁面白屏問題的解決