在 web 前端开发中，<script> 标签用于引入外部 JavaScript 文件或内联 JavaScript 代码。其中，<script> 标签有一个非常有用的属性，即 defer 属性。在本文中，我们将深入探讨 defer 属性的作用，用法以及与其他属性的区别。</p> <h2>什么是 defer 属性？</h2> <p>defer 属性是 HTML <script> 标签的一个布尔属性，用于告诉浏览器该脚本将在文档解析完成后执行。也就是说，defer 属性指示浏览器推迟脚本的执行，直到文档的其余部分都解析完成。</p> <h2>使用 defer 属性的优势</h2> <p>使用 defer 属性有以下几个优势：</p> <ol> <li><p><strong>加快页面加载速度</strong>：当浏览器遇到带有 defer 属性的 <script> 标签时，它会继续解析文档，同时异步加载脚本文件。这样可以加快页面的加载速度，因为脚本不会阻止其他资源的下载和渲染。</p> </li> <li><p><strong>保持脚本执行顺序</strong>：尽管脚本是异步加载的，但它们会按照它们在文档中出现的顺序执行。这确保了脚本的执行顺序不会混乱。</p> </li> <li><p><strong>避免阻塞页面渲染</strong>：与将脚本放在文档底部相比，使用 defer 属性可以避免脚本阻塞页面的渲染。页面可以在下载脚本的同时继续渲染，提高用户体验。</p> </li> </ol> <h2>与 async 属性的区别</h2> <p>defer 属性与 async 属性是两种常用的脚本加载方式，它们的区别在于：</p> <ul> <li><strong>defer 属性</strong>：脚本会在文档解析完成后按照它们在文档中出现的顺序执行。</li> <li><strong>async 属性</strong>：脚本会在下载完成后立即执行，不会阻止文档的解析。脚本的执行顺序不受脚本在文档中出现的顺序影响。</li> </ul> <h2>如何在 <script> 标签中使用 defer 属性</h2> <p>要在 <script> 标签中使用 defer 属性，只需要在标签中添加 defer 属性即可，例如：</p> <pre class="prettyprint login html"><script src="example.js" defer></script></pre><p>在上面的示例中，"example.js" 文件将会在文档解析完成后执行。</p> <h2>示例代码</h2> <p>以下是一个简单的示例代码，演示了如何使用 defer 属性加载外部脚本文件：</p> <pre class="prettyprint html">-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ --------- --------------- ------- ------ ---------- ----------- ------- ---------------- --------------- ------- -------</pre><p>在上面的示例中，"example.js" 文件包含了一些 JavaScript 代码，它会在文档解析完成后执行。</p> <h2>结语</h2> <p>通过使用 defer 属性，我们可以有效地提高页面加载速度，保持脚本执行顺序，并避免阻塞页面渲染。这使得网页更加高效和用户友好。希望本文能够帮助您更好地理解和使用 HTML <script> defer 属性。如果您有任何疑问或想要了解更多信息，请随时留言。感谢阅读！</p>