如果我将所有JavaScript放在页面底部，是否需要$（document）.ready？

Question

  

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

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

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

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

2. 执行时间有什么不同吗？一种方法比另一种方法发射得更快吗？

3. 我们是否可以在页面底部链接我们的外部JS文件（<script src="..." />），或者是否需要在标题中？

Answer 1

这个SO答案说否：

stackoveflow question

$（document）.ready用于保证在调用函数时可以使用完整的DOM。 不依赖于DOM的任何功能和事件都不需要放入就绪事件中。

另外 - 提高页面呈现速度 - 以非阻塞方式动态加载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性能优化的有趣信息。