使用 defer 屬性優化外部函式庫：提高頁面速度

建立網站時，開發人員經常依賴外部程式庫來增強功能。雖然這些庫很重要，但它們可能會影響效能，因為每個外部腳本都需要額外的 HTTP 請求，並且其解析、評估和執行可能會阻止頁面上主要內容的呈現。為了防止這些腳本阻塞渲染過程，開發者可以在連結外部腳本時使用 async 或 defer 屬性。

defer 的作用
defer 屬性可確保在 HTML 解析完成之前不會執行腳本。這有助於加快頁面的初始渲染速度。但是，在使用延遲外部程式庫時，您可能會遇到某些功能（例如初始化滑桿、輪播或動畫）無法如預期運作的情況。發生這種情況是因為延遲腳本中的程式碼僅在 HTML 完全解析後才執行，但有時必要的外部程式庫可能無法及時可用。

了解 DOMContentLoaded 和載入事件
為了確保依賴外部程式庫的自訂程式碼正確執行，您需要仔細管理程式碼運行的時間。在處理延遲腳本時，兩個 JavaScript 事件特別有用

DOMContentLoaded: 當初始 HTML 文件完全載入和解析時觸發此事件，無需等待樣式表、圖像或其他外部資源載入。當您的程式碼僅依賴準備好的 DOM 結構時，它非常有用。

document.addEventListener('DOMContentLoaded', function() { 
// Initialize your script once the DOM is fully parsed 

console.log("DOM is ready, but external resources might still be loading."); 
});

load： 當整個頁面（包括樣式表、映像和外部腳本等所有依賴資源）完全載入時，將觸發 load 事件。此事件可確保在執行程式碼之前所有必要的外部資源都可用。

window.addEventListener('load', function() { 
// Execute code when the entire page and resources are loaded 

console.log("All resources including external scripts are fully loaded."); 
});

<script defer src="https://example.com"></script>
<script defer src="https://example2.com"></script>
<script>
    // Wait for the entire page, including scripts, to load
    window.addEventListener('load', function() {
        // Initialize example2 library with predefined configuration after all resources are fully loaded
        example2(somePredefinedConfig).functionCall();
    });
</script>

以上是使用 defer 屬性優化外部函式庫：提高頁面速度的詳細內容。更多資訊請關注PHP中文網其他相關文章！