Question

如果您的代码只处理已经完全解析的DOM元素，是否真的有必要等待“ready”（或“window.onload”）事件？

"ready()" function的jQuery文档演示了如何在DOM完全就绪之前等待执行操作，但示例是针对相关DOM元素之前列出的代码（脚本标记）。但似乎在HTML文档中必要的DOM元素之后出现的代码可以访问它们，因为可能是DOM是在浏览器解析文档时构建的。

例如，可以安全地假设以下代码在所有情况下都是可靠的，或者是否仍然需要（或以某种方式有益）使用ready / onload处理程序？

<body>
  <div id="foo"/>
  <script type="text/javascript">
    var foo = document.getElementById('foo');
    foo.innerHTML = 'The element #foo is loaded!';
  </script>
</body>

This SO question非常相似，但我想查看是否有更多信息。

Answer 1

如果您的JavaScript代码低于DOM元素并且仅以独占方式修改它们，则无需等待DOM ready事件。

但是，请记住编辑一个DOM元素，其中包含script元素（或更具体地，在元素的结束标记之前），用于IE6中的cause big problems（感谢T.J. Crowder）和IE7。

但是，这需要内联scripts，这可能是一个维护问题。最好将您的JavaScript存储在外部（许多人会谈到在结束body标记之前包含它们的好处），以获得许多好处，例如易于维护和细粒度缓存控制。

Answer 2

在你的情况下它很好，因为浏览器将逐行渲染你的代码，在你的代码id =“foo”首先出现，所以它会得到那个div ....但是假设你在head标签中写了这个脚本然后该脚本将首先运行，它不会得到id =“foo”的div，因为它尚未加载..更好地写入document.ready方法

Answer 3

是的，如果你的代码是在dom之后是安全的，但通常混合html和js并不是一个好主意。

Answer 4

文档以线性方式加载，因此您的代码可以正常工作。当javascript不依赖于它下面的DOM时，程序员有时不会将文档用于性能目的。这是一些example。

是否真的有必要等待DOM准备好操纵DOM？

4 个答案: