使用 defer 属性优化外部库：提高页面速度

在构建网站时，开发人员通常依赖外部库来增强功能。虽然这些库必不可少，但它们可能会影响性能，因为每个外部脚本都需要额外的 HTTP 请求，并且其解析、评估和执行可能会阻止页面上主要内容的呈现。为了防止这些脚本阻止渲染过程，开发人员可以在链接外部脚本时使用 async 或 defer 属性。

**defer 的作用**

defer 属性可确保在 HTML 解析完成之前不执行脚本。这有助于加快页面的初始渲染速度。但是，在使用延迟的外部库时，您可能会遇到某些功能（例如初始化滑块、轮播或动画）无法按预期运行的情况。发生这种情况的原因是延迟脚本中的代码仅在 HTML 完全解析后才执行，但有时必要的外部库可能无法及时提供。

**理解 DOMContentLoaded 和 load 事件**

为了确保依赖外部库的自定义代码正确执行，您需要仔细管理代码运行的时间。处理延迟脚本时，两个 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."); 
});