$(document).ready()和脚本位置
我想知道$(document).ready()
是如何工作的,以及一般的脚本。 假设我有脚本在页面底部(出于性能方面的原因,我被告知?)。 举个例子:假设你有一个链接,你需要阻止它的默认动作( preventDefault()
)。 如果脚本位于页面底部,用户是否有可能看到该页面并在浏览器知道不遵循该链接之前单击该链接?
“头部”部分中的脚本在脚本标签加载到浏览器的位置进行评估(即在主体之前)。 文档末尾的脚本标签在浏览器遇到浏览器分析页面时也会执行,因此在“文档就绪”事件之前。 当整个页面被加载时,即'</html>'
浏览器解析'</html>'
结束标记时,'文档就绪'事件被触发。
所以是的,如果加载并执行一个禁用文档末尾链接的脚本需要一段时间,用户可以同时点击一个链接。
一种选择是反向操作 - 即加载禁用链接的页面,并让您的JavaScript启用它们。 或者,在顶部的脚本中使用'live'或'delegate'(在加载jquery后),以便链接在创建时受到影响。
在这里寻找一些关于浏览器如何处理动态加载的脚本的复杂性稍有不同。
如果脚本位于页面底部,用户是否有可能看到该页面并在浏览器知道不遵循该链接之前单击该链接?
根据我的经验,是的,这是可能的。 我在document.ready()
中使用奇数/偶数着色来设计表格时碰到过这个问题(我知道,服务器渲染效果更好)。 在顶部的脚本显示是无缝的。 使用底部的脚本,在加载HTML页面和渲染行之间有时会出现明显的延迟。 这也是一张小桌子。
建议您将脚本放在底部的原因是脚本加载在HTML中的工作方式。 每当浏览器点击一个<script>
标记,页面加载就会停止,直到该脚本被加载(或从缓存中检索)。 如果该脚本位于底部,则页面已加载,以便用户可以看到某些内容。 如果脚本位于顶部,用户将看到一个空白页面,直到脚本加载。
通常这种延迟是无关紧要的,但有时候是这样。 另外,就像在我的例子中一样,如果你的Javascript具有视觉效果,那么不渲染页面然后改变它可能是更好的用户体验。
雅虎建议将所有脚本放在文档的末尾以提高性能 - http://developer.yahoo.com/performance/rules.html
但正如你可以在文档中看到的那样, $(document).ready()
指定一个函数在DOM完全加载时执行。
与此说,我不认为你真的不必担心$(document).ready()
。
如果互联网连接速度太慢,我猜想将$(document).ready()
放在底部会失败。 我想不出有任何其他情况会导致失败。