我想知道$(document).ready() 的工作原理以及一般脚本。假设我在页面底部有脚本（我被告知出于性能原因？）。举个例子：假设你有一个链接，你需要阻止它的默认操作（preventDefault()）。如果脚本在页面底部，是不是用户可以在浏览器知道不点击链接之前看到页面并点击链接？
【问题讨论】：
标签： javascript jquery optimization
'head' 部分中的脚本在脚本标签加载到浏览器时（即在正文之前）进行评估。当浏览器在解析页面时遇到文档末尾的脚本标签时，也会执行它们 - 所以在“文档就绪”事件之前。 'document ready' 事件在整个页面加载时触发 - 即当浏览器解析 '</html>' 结束标记时。
所以是的，如果加载和执行禁用文档末尾链接的脚本需要一段时间，则用户可以同时单击链接。
一种选择是反向操作 - 即加载禁用链接的页面，并让您的 javascript 启用它们。或者，在顶部的脚本中使用“live”或“delegate”（在加载 jquery 之后），以便链接在创建时受到影响。
查看here，了解浏览器处理动态加载脚本的方式略有不同的一些复杂性。
【讨论】：
如果脚本在底部 页面，是不是可能用户 可以看到页面并点击链接 在浏览器知道不跟随之前 链接？
根据我的经验，是的，这是可能的。我在使用document.ready() 设计具有奇数/偶数颜色的表格时遇到了这个问题（服务器端渲染更好，我知道）。顶部的脚本显示是无缝的。由于脚本位于底部，加载 HTML 页面和呈现行之间有时会出现明显的延迟。这也是一张小桌子。
建议您将脚本放在底部的原因是脚本加载在 HTML 中的工作方式。每次浏览器点击<script> 标记时，页面加载都会停止，直到该脚本被加载（或从缓存中检索）。如果该脚本位于底部，则该页面已加载，因此用户可以看到某些内容。如果脚本位于顶部，则用户将看到一个空白页面，直到脚本加载为止。
通常这种延迟是无关紧要的，但有时确实如此。此外，如我的示例所示，如果您的 Javascript 具有视觉效果，那么不呈现页面然后更改它可能是更好的用户体验。
【讨论】：
Yahoo 建议将所有脚本放在文档末尾以提高性能 - http://developer.yahoo.com/performance/rules.html
但正如您在文档中看到的那样，$(document).ready()
指定在 DOM 完全加载时执行的函数。
话虽如此，我认为你真的不必担心$(document).ready()。
我猜$(document).ready() 放在底部会失败，如果互联网连接太慢的话。我想不出任何其他情况会失败。
【讨论】：
是的，这是可能的，但在实践中并不常见。 $(document).ready() 绑定到 dom:loaded 事件，该事件在 dom 构建后但在获取所有资源之前触发。如果你在 $(document).ready 中做一些需要很长时间的事情，那么用户当然有可能会有一个窗口，尽管使用未绑定元素的窗口很窄。
.ready 甚至会在加载 css 之前触发，因此如果您可以在页面设置样式之前看到您的页面，那么这就是您使用无限事件的窗口。因此，您需要将任何需要 css 属性或图像尺寸的代码放在 $(document).load(...) 函数中。
【讨论】：
您想在 onclick 事件中附加一个“return false”：
<a href="http://www.google.com" onclick="return false;">Google</a>
可用性纳粹会告诉你这很糟糕，因为如果没有 javascript，人们就无法点击链接。
我说，如果您实际上不想在任何地方链接人们，最好不要使用“A”标签:)
<span style="cursor:pointer;text-decoration:underline">Google</span>
可以产生同样的效果。
【讨论】：
我同意这是可能的，但如果网站是从progressive enhancement 的角度构建的，那应该不是问题。如果用户禁用了 JavaScript（他们为什么要这样做？？！？！？）或不支持您的脚本正在执行的操作的旧浏览器，那么该链接是他们访问内容的唯一方法。
因此，如果用户在脚本加载前半秒左右单击链接，那么他们仍然可以工作。如果他们等到页面完全加载，然后脚本启动并且链接单击显示一个模式对话框而不是导航。无论哪种方式，用户都可以访问内容。
【讨论】：