如果我将所有JavaScript放在页面底部,是否需要$(document).ready？

Question

可能重复:
jquery - $(document).ready是否必要？

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

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

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

2. 执行时间之间有什么区别吗？一种方法比另一种方法更快吗？

3. 我们可以<script src="..." />在页面底部链接我们的外部JS文件(),还是需要在标题中？

Answer 1

这SO回答说NO:

stackoveflow问题

$(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性能优化的有趣信息.