一、defer 属性的基本原理
当在 <script> 标签上设置 defer 属性时，浏览器会在解析页面的过程中异步下载该脚本，但不会立即执行，而是会等到页面解析完成后再按照脚本在页面中出现的顺序依次执行。这与 async 属性的立即执行有所不同。
二、使用 defer 属性的步骤
- 添加
<script>标签：在 HTML 文件中添加<script>标签，并设置defer属性。 - 指定脚本文件路径：通过
src属性指定要加载的 JavaScript 文件的路径。
三、示例代码
以下是一个使用 defer 属性异步加载 JavaScript 文件的示例：
<!DOCTYPE html>
<html>
<head>
<title>使用 defer 属性异步加载 JavaScript</title>
<script defer src="script.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
在这个示例中，当浏览器解析到带有 defer 属性的 <script> 标签时，会异步下载 script.js 文件，并在页面解析完成后执行该文件。
四、defer 属性的优势
- 避免阻塞页面渲染：由于脚本的执行被延迟到页面解析完成后，不会影响页面的初始渲染，提高了页面的加载速度和用户体验。
- 保持执行顺序：脚本会按照它们在页面中的位置依次执行，避免了执行顺序的混乱。
五、使用 defer 属性的注意事项
- 兼容性问题：虽然
defer属性在现代浏览器中得到广泛支持，但在一些旧版本的浏览器中可能不支持，需要进行兼容性测试。 - 与其他属性的交互：需要注意
defer属性与其他<script>标签属性的交互，避免出现意外的结果。 - 依赖关系处理：如果异步加载的脚本之间存在依赖关系，需要特别注意处理这些依赖关系，确保脚本能够按照正确的顺序执行。
六、实际应用场景
- 加载大型脚本文件：对于较大的 JavaScript 文件，可以使用
defer属性异步加载，以减少对页面加载速度的影响。 - 非关键脚本加载：一些非关键的功能脚本可以使用
defer属性异步加载，提高页面的初始性能。
七、与其他加载方式的比较
- 与
async属性的比较：async属性会立即执行脚本，而defer属性会在页面解析完成后执行，两者在执行顺序和适用场景上有所不同。 - 与动态创建
<script>标签的比较：动态创建<script>标签可以更加灵活地控制脚本的加载和执行，但相对来说代码复杂度会增加。
八、优化建议
- 合理划分脚本：将不同功能的脚本进行合理划分，根据需要使用
defer属性或其他加载方式。 - 监控加载性能：通过性能监测工具实时监控脚本的加载和执行情况，及时发现并解决问题。
九、总结
使用 defer 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 defer 属性，可以在不影响页面渲染的情况下异步加载脚本，并确保脚本的执行顺序。在实际应用中，需要根据具体情况选择合适的加载方式，并注意处理可能出现的问题，以确保页面能够正常加载和执行。
