使用 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中文网其他相关文章！