<ul id="2u0wy"></ul>

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

joywek 發(fā)布于2019-08-23 13:58 / 2248人閱讀

摘要：問題背景最近做的一個項目需要引入一個外部的第三方腳本。什么情況可以用我以上思路引入的第三方腳本較大，加載所需時間較長頁面按需加載，整個項目只有其中某幾個頁面需要用到引入的第三方腳本第三方腳本沒加載完就渲染頁面導致的頁面報錯

問題背景

最近做的一個項目需要引入一個外部的第三方js腳本。由于這是一個關于渲染3D建筑的腳本，所以體積比較大，大概有2M，加載完成也得要個好幾秒，網(wǎng)速慢的時候十幾秒都有可能。
之前也遇到腳本加載慢的問題，但是沒這么慢，所以這次就特別寫個文章記錄一下我的解決過程。

首先上兩張項目已完成的截圖。

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

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

遇到的問題和需求

引入外部腳本太大，加載時間太長

首頁用不到外部腳本，需要先渲染出來

用到外部腳本的頁面，要是腳本還沒加載好就點進去會報錯

解決問題的過程

我一開始通過

`
這樣頁面是可以正常加載的，但是頁面出來的很慢，一開始會白屏一段時間等待這個js腳本加載完成。雖然腳本體積大是事實，但這用戶體驗肯定是可以優(yōu)化的。
后來我又把這個腳本放到了頁面底部，也就是標簽下面。這樣可以先讓頁面渲染出來，再慢慢加載這個龐大的腳本，于是首頁是出來的很快，但是從首頁跳轉到需要用到這個腳本的頁面就會報錯，如下

這個錯誤原因是這個頁面需要用到window.DDEarth這個對象，但是由于此時這個腳本還沒有加載完成，所以window下并沒有這個對象，所以就報錯了。

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

// 入口文件
 
 

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

有了以上代碼我跳轉到PageTwo這個頁面的時候，會等到DDEarth.js這個腳本加載完成，再執(zhí)行加載建筑地圖的操作，這樣就不會報錯了。
但是這又有一個問題，就是如果我跳轉到PageTwo的之前，DDEarth.js已經(jīng)加載完成了，onload這個事件在PageTwo這個頁面中就不生效了，loadEarthMap這個方法自然也就不會執(zhí)行了。
這個時候需要加一個判斷，完整代碼如下：

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

總結一下我以上解決問題的步驟

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

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

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

引入的第三方腳本較大，加載所需時間較長

頁面按需加載，整個項目只有其中某幾個頁面需要用到引入的第三方腳本

第三方腳本沒加載完就渲染頁面導致的頁面報錯

GPU云服務器云服務器加載外部頁面 js中引入外部js 加載外部js js+加載外部數(shù)據(jù)

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99862.html

javascript高級程序設計（第3版）之《script元素》

摘要：表示要執(zhí)行外部文件的路徑或鏈接。由于規(guī)范要求腳本按照他們出現(xiàn)的先后順序執(zhí)行，因此第一個延遲腳本會優(yōu)先于第二個執(zhí)行，二這兩個腳本會優(yōu)先于事件執(zhí)行。無論使用任何方式，只要不存在和屬性，瀏覽器都會按照元素在頁面中出現(xiàn)的先后順序依次解析。元素屬性屬性定義 async 【可選】。可以異步加載，表示可以立即下載此腳本，但不影響頁面其他操作。只對外部腳本有效。 charset ...

miqt 2019-08-22 14:04 評論0 收藏0
提高前端性能的黃金法則

摘要：雖然如此，但是網(wǎng)站前端性能優(yōu)化的思路基本沒變。為什么前端性能如此重要數(shù)據(jù)顯示只有的最終用戶響應時間花在了下載文檔上。前端性能優(yōu)化一味奉行最佳實踐有時候反而過而不及，所以針對項目的實際情況來優(yōu)化才是明智的選擇。前端近幾年變化很大，各種工具，庫，框架并發(fā)。雖然如此，但是網(wǎng)站前端性能優(yōu)化的思路基本沒變。為什么前端性能如此重要？數(shù)據(jù)顯示: 只有 10%~20% 的最終用戶響應時間花在了下載...

keithyau 2019-08-19 17:54 評論0 收藏0
【Node】前后端模塊規(guī)范與模塊加載原理

摘要：例如指定一些依賴到模塊中實現(xiàn)規(guī)范的模塊化，感興趣的可以查看的文檔。 CommonJS 定義了 module、exports 和 require 模塊規(guī)范，Node.js 為了實現(xiàn)這個簡單的標準，從底層 C/C++ 內(nèi)建模塊到 JavaScript 核心模塊，從路徑分析、文件定位到編譯執(zhí)行，經(jīng)歷了一系列復雜的過程。簡單的了解 Node 模塊的原理，有利于我們重新認識基于 Node 搭建的...

jsyzchen 2019-08-23 15:43 評論0 收藏0
重新認識script標簽

摘要：盡管腳本的下載過程中不會相互影響，但頁面仍然要等到所有代碼下載并完成執(zhí)行才能繼續(xù)。 defer和asnyc（只對外部文件有效） defer 在頁面完成解析時執(zhí)行代碼，這個屬性表明腳本在執(zhí)行時不會影響頁面的構造，在元素中設置這個屬性相當于告訴瀏覽器立即下載但延遲執(zhí)行 async 相對于頁面其他部分異步執(zhí)行腳本，一般的script標簽都是會阻塞頁面執(zhí)行的，沒有加上async屬性的標簽...

Magicer 2019-08-20 11:24 評論0 收藏0