javascript / jquery - $(document).ready()和脚本位置

时间:2010-07-29 02:06:55

标签: javascript jquery optimization

我想知道$(document).ready()如何工作,以及一般的脚本。假设我有脚本位于页面底部(出于性能原因,我被告知?)。举个例子:假设你有一个链接,你需要阻止它的默认动作(preventDefault())。如果脚本位于页面底部,用户是否可以在浏览器知道不跟踪链接之前看到该页面并单击该链接?

6 个答案:

答案 0 :(得分:2)

  

如果脚本位于底部   页面,是不是可能是用户   可以看到该页面并单击该链接   在浏览器知道不遵循之前   链接?

根据我的经验,是的,这是可能的。我在document.ready()设置一个奇数/偶数着色的表时遇到了这个问题(服务器端渲染效果更好,我知道)。顶部的脚本显示无缝。底部的脚本有时会在加载HTML页面和呈现行之间出现明显的延迟。这也是一张小桌子。

建议您将脚本放在底部的原因是脚本加载在HTML中的工作方式。每次浏览器命中<script>标记时,页面加载都会停止,直到加载(或从缓存中检索)该脚本为止。如果该脚本位于底部,则页面已加载,以便用户可以看到某些内容。如果脚本位于顶部,则用户将看到一个空白页,直到脚本加载为止。

通常这种延迟是无关紧要的,但有时它们是无关紧要的。此外,如我的示例所示,如果您的Javascript具有视觉效果,那么无法呈现页面然后更改它可能是更好的用户体验。

答案 1 :(得分:2)

“head”部分中的脚本在脚本标记加载到浏览器(即主体之前)的位置进行评估。文档末尾的脚本标记也会在浏览器在解析页面时遇到它们时执行 - 因此在“文档就绪”事件之前也是如此。加载整个页面时会触发'document ready'事件 - 即当浏览器解析'</html>'结束标记时。

所以是的,如果加载并执行一个禁用文档末尾链接的脚本需要一段时间,用户可以同时点击一个链接。

一种选择是反向操作 - 即加载已禁用链接的页面,并让您的javascript启用它们。或者,在顶部的脚本中使用“live”或“delegate”(在加载jquery之后),以便链接在创建时受到影响。

看看here有关浏览器如何处理动态加载的脚本的一些复杂性。

答案 2 :(得分:0)

雅虎建议将所有脚本放在文档的末尾以提高性能 - http://developer.yahoo.com/performance/rules.html

但正如您可以阅读文档$(document).ready()

  

指定在DOM完全加载时要执行的函数。

据说,我认为你不必担心$(document).ready()

如果互联网连接太慢,我想$(document).ready()放在底部会失败。我想不出任何其他情况会失败。

答案 3 :(得分:0)

是的,这是可能的,但在实践中并不常见。 $(document).ready()绑定到dom:load事件,该事件在构建dom之后但在获取所有资源之前触发。如果你在$(document).ready中做了很长时间的事情,那么用户肯定有一个窗口,尽管使用未绑定的元素很窄。

.ready甚至会在加载css之前触发,所以如果你可以在它的样式之前看到你的页面,那就是你使用无界事件的窗口。因此,您需要在$(document).load(...)函数中放置任何需要css属性或图像维度的代码。

答案 4 :(得分:0)

您想在onc​​lick事件中附加'return false':

<a href="http://www.google.com" onclick="return false;">Google</a>

可用性纳粹会告诉你这很糟糕,因为如果他们没有javascript,人们就无法关注这些​​链接。

我说,如果你真的不想把人们链接到任何地方,你最好不要使用'A'标签:)

<span style="cursor:pointer;text-decoration:underline">Google</span>

可以产生同样的影响。

答案 5 :(得分:0)

我同意这是可能的,但如果网站是从progressive enhancement角度构建的,那应该不是问题。如果用户禁用了JavaScript(为什么他们会这样做?!?!?)或者不支持您的脚本正在执行的操作的旧浏览器,那么该链接是他们必须访问内容的唯一方式。

因此,如果用户在加载脚本之前的半秒左右单击链接,那么他们仍然可以工作。如果他们等到页面完全加载,则脚本启动并且链接单击显示模式对话框而不是导航。无论哪种方式,用户都可以访问内容。

相关问题