将JS放在</body>
标记之上可以提高感知加载时间,因为浏览器在开始呈现页面之前不必读取和解析所有JS。
但它有另一个好处,不是吗?我们不需要在$(document).ready(function() { ... })
中包装JS,因为所有元素都已经在JS之上,因此可以进行操作了。
是否需要$(document).ready
来确保DOM已完全加载并准备好进行操作?
执行时间有什么不同吗?一种方法比另一种方法发射得更快吗?
我们是否可以在页面底部链接我们的外部JS文件(<script src="..." />
),或者是否需要在标题中?
答案 0 :(得分:20)
这个SO答案说否:
$(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性能优化的有趣信息。