在前端开发中，我们经常需要引入 JavaScript 代码来实现页面的交互和动态效果。而其中两个常用的方法就是 defer 属性和 $(document).ready() 函数。本文将详细介绍这两种方法的使用，以及它们的学习和指导意义。
script defer
defer 是一个 HTML 标记属性，用于告诉浏览器该脚本可以延迟到文档完成解析后再执行，而不会阻塞文档的渲染过程。这使得网页加载速度更快，用户体验更好。
下面是一个示例：
<script src="example.js" defer></script>
在上面的代码中，example.js 脚本会被延迟到文档完成解析后再执行。如果有多个 defer 脚本，则它们会按照它们在文档中出现的顺序依次执行。
需要注意的是，defer 属性只对外部脚本文件有效，对内嵌脚本无效。此外，在一些较老的浏览器中（如 IE9 及以下版本），defer 属性可能会失效。
$(document).ready()
$(document).ready()是 jQuery 提供的一个函数，它用于在 DOM 加载完成后执行 JavaScript 代码。与 defer 属性不同，它可以用于内嵌脚本和外部脚本。
下面是一个示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ----- --------------- -------- ----------------------------------------------------------- --------- ------------------------------ - ------------------ -- -------- ----- ---------- ------- ------ ----------- ----------- ------- -------
在上面的代码中，$(document).ready() 函数会在 DOM 加载完成后弹出一个对话框。需要注意的是，如果同一个页面中有多个 $(document).ready() 函数，则它们会按照它们在文档中出现的顺序依次执行。
学习和指导意义
defer 属性和 $(document).ready() 函数都是前端开发中常用的方法，它们可以优化网页加载速度，提高用户体验。同时，它们也有一些需要注意的问题，比如 defer 属性可能会失效，$(document).ready() 函数的代码应该放在 jQuery 引入之后等。
因此，在学习和使用这两种方法时，需要了解它们的用法和限制，并根据实际情况进行选择和调整。另外，还需要注意浏览器兼容性，以保证代码能够在不同的浏览器中正常运行。
示例代码
script defer
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ----- --------------- -------- ----------------- --------------- -------- ----------------- --------------- -------- ----------------- --------------- ------- ------ ----------- ----------- ------- -------
$(document).ready()
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ----- --------------- -------- ----------------------------------------------------------- --------- ------------------------------ - ------------------ -- -------- ----- ---------- ------- ------ ----------- ----------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31370