溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
問題背景
最近做的一個項目需要引入一個外部的第三方js腳本。由于這是一個關于渲染3D建筑的腳本，所以體積比較大，大概有2M，加載完成也得要個好幾秒，網速慢的時候十幾秒都有可能。
之前也遇到腳本加載慢的問題，但是沒這么慢，所以這次就特別寫個文章記錄一下我的解決過程。
首先上兩張項目已完成的截圖。
下圖是通過第三方腳本渲染出來的3D建筑頁面
下圖是首頁，不需要用到第三方腳本
遇到的問題和需求
解決問題的過程
我一開始通過<script>標簽直接引入到入口文件的頭部，如下
<head> <script src="./DDEarth.js"></script> </head>
這樣頁面是可以正常加載的，但是頁面出來的很慢，一開始會白屏一段時間等待這個js腳本加載完成。雖然腳本體積大是事實，但這用戶體驗肯定是可以優化的。
后來我又把這個腳本放到了頁面底部，也就是</body>標簽下面。這樣可以先讓頁面渲染出來，再慢慢加載這個龐大的腳本，于是首頁是出來的很快，但是從首頁跳轉到需要用到這個腳本的頁面就會報錯，如下
這個錯誤原因是這個頁面需要用到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();
};
}
}
}
總結一下我以上解決問題的步驟
在入口文件的底部引入第三方腳本，并給它加個id。當然也可以放在<head>里，但是需要額外加上html5新增的 async 這個屬性，這樣腳本才能異步加載。
在需要用到這個腳本的頁面，先判斷腳本有沒有加載完成（我這里是直接判斷window.DDEarth對象是否為空）。如果已經加載完成，就直接執行相關操作；如果沒有，先通過document.getElementById找到那個腳本，然后監聽腳本的onload事件，再做相關操作。
什么情況可以用我以上思路？
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
