如果我将所有 JavaScript 放在页面底部，是不是需要 $(document).ready？ [复制]

Posted 2023-03-05

【中文标题】如果我将所有 JavaScript 放在页面底部，是不是需要 $(document).ready？ [复制]

【英文标题】：Is $(document).ready necessary if I put all my JavaScript at the bottom of the page? [duplicate]如果我将所有 JavaScript 放在页面底部，是否需要 $(document).ready？ [复制]

【发布时间】：2011-10-16 04:24:57

【问题描述】：

可能重复：jquery - Is $(document).ready necessary?

将 JS 放在 </body> 标记上方可以改善感知加载时间，因为浏览器不必在开始渲染页面之前读取和解析所有 JS。

但它还有另一个好处，不是吗？我们不需要将 JS 包裹在 $(document).ready(function() ... ) 中，因为所有元素都已经在 J​​S 之上，因此可以进行操作了。

$(document).ready 是否需要确保 DOM 已完全加载并准备好进行操作？

执行时间有区别吗？一种方法会比另一种更快吗？

我们能否在页面底部也链接我们的外部 JS 文件 (<script src="..." />)，还是需要在页眉中？

【参考方案1】：

这个 SO 回答说 NO：

stackoveflow question

$(document).ready 是为了确保在调用函数时完整的 DOM 可用。 任何不依赖于 DOM 的函数和事件都不需要放入 ready 事件中。

另外 - 为了提高页面渲染速度 - 以非阻塞方式动态加载 javascript 文件：http://berklee.github.com/nbl/ 或 https://github.com/rgrove/lazyload/

这种技术有点像这样：

 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "file1.js";
 document.getElementsByTagName("head")[0].appendChild(script);

这个新元素加载源文件 file1.js。将元素添加到页面后，文件就会立即开始下载。这种技术的重要之处在于，无论从哪里开始下载，文件的下载和执行都不会阻塞其他页面进程。您甚至可以将此代码放在文档的标题中，而不会影响页面的其余部分（除了用于下载文件的一个 HTTP 连接）。

这本书：Nickolas Zakas 的“高性能 JavaScript”有很多关于 JavaScript 性能优化的有趣信息。

【讨论】：

我还是不知道为什么动态加载js是非阻塞的，反之则阻塞？