Question

我最近看到一些使用这种模式的网站：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <script> 
    $(function (){...do some stuff with plugins...});
  </script>

</head>
<body>


  <script src="myplugin1.js"></script>
  <script src="myplugin2.js"></script>
  <script src="myplugin3.js"></script>
</body>
</html>

这让我想起了一些陷阱：

问题＃1

document.ready事件在解析插件（JS）后未执行。

在dom 结构完成时执行。（注意：我没有说：“所有资源都已下载”！）

因此，document. ready函数可能会尝试使用尚未完全下载的插件变量。（这会导致错误）。

我是对的吗？

问题＃2 这导致我：“从不使用document.ready”之前脚本引用位置（我的意思是：在document.ready依赖于那些脚本变量的情况下）。

我是对的吗？

P.S。我不是在谈论window.load，这显然会在这里工作，但我将不得不等待更久。

Answer 1

如果您考虑页面中的所有类型的资源，可以将许多资源与页面内容分开加载：例如，图像和样式表。它们可能会改变页面的外观，但它们无法真正改变结构，所以单独加载它们是安全的。

另一方面，脚本有一个名为document.write的小东西，它可以让工作变得棘手。如果我有这样的HTML：

Who would <script>document.write("<em>");</script>ever</em> write like this?

然后浏览器会解析它就好了; document.write，如果在顶级使用，则有效地在要解析的位置插入HTML。这意味着页面的其余部分依赖于脚本元素，因此在该脚本加载之前，浏览器无法真正继续使用该文档。

因为脚本可能会修改HTML并更改结构，所以浏览器不能等到以后加载它们：它必须在那时加载它们，并且它不能说DOM已经准备就绪，因为脚本可能修改它。 因此，浏览器必须延迟DOM就绪事件，直到所有脚本都已运行。这使您可以安全地将相关代码放在就绪处理程序的顶部。

但是，我建议你不要，因为它不是很清楚。

Answer 2

现代浏览器中$(document).ready等同于DOMContentLoaded的事件（并且它会回归到传统浏览器中与其他一些等同于相同场景的其他事件）。

MDN很好地总结了它：

文档发布时会触发DOMContentLoaded事件完全加载和解析，无需等待样式表，图像，和子帧完成加载（加载事件可用于检测一个完整的页面。）

因此，您的脚本将始终在执行时解析。

文件已经澄清了吗？

2 个答案: