If we call a javascript method myMethod() in a script tag which is before closing body, is it equivalent to calling myMethod() inside jQuery's document.ready function ? If not, Why ?
如果我们在关闭body之前的脚本标记中调用javascript方法myMethod(),它是否相当于在jQuery的document.ready函数中调用myMethod()?如果没有,为什么?
3 个解决方案
#1
6
From here:
Under the hood: $(document).ready() As you would expect from John Resig, jQuery’s method for determining when the DOM is ready uses an assortment of optimizations. For example, if a browser supports the DOMContentLoaded event (as many non-IE browsers do), then it will fire on that event. However, IE can’t safely fire until the document’s readyState reaches “complete”, which is typically later. If none of those optimizations are available, window.onload will trigger the event.
引擎盖下:$(document).ready()正如您对John Resig所期望的那样,jQuery确定DOM何时就绪的方法使用了各种各样的优化。例如,如果浏览器支持DOMContentLoaded事件(就像许多非IE浏览器那样),那么它将触发该事件。但是,在文档的readyState达到“完成”之前,IE无法安全地触发,这通常是稍后的。如果这些优化都不可用,window.onload将触发该事件。
These events are independent of a location within the HTML tag, as other event still are going on even at the time of rendering </body>.
这些事件独立于HTML标记内的位置,因为即使在呈现 时其他事件仍在进行中。
#2
3
No it's not the same, you place the <script> tags before the closing </body> tag to avoid blocking the rendering of html on older browsers, AFAIK, but you have no guarantee that the DOM is "ready"
不,它不一样,你将
#3
0
Not exactly. $(document).ready(); reacts on the so called DOMContentLoaded event which is fired right after the DOM has been loaded and the browser is aware of all the elements on the page (not the content itself).
不完全是。 $(文件)。就绪();对所谓的DOMContentLoaded事件做出反应,该事件在加载DOM之后立即触发,并且浏览器知道页面上的所有元素(而不是内容本身)。
The main reason why code is usually put inside these blocks is not that much related to preventing blocking of parallel loading but to ensure that the elements which are to be manipulated during page load are actually loaded and present in the DOM tree. Not much sense in manipulating elements which the browser is not aware of right?
代码通常放在这些块中的主要原因与防止并行加载的阻塞并没有多大关系,而是确保在页面加载期间要操作的元素实际上被加载并存在于DOM树中。操纵浏览器不知道的元素没什么意义吗?
Putting JavaScript content (or any other content for that matter) at the bottom of the page is actually more closely related to the onload event which is fired after the page has finished loading, including the content itself. Either way its almost certain that content inside $(document).ready() blocks will be executed before the one at the bottom of the page however if you load external libraries on which the code inside the ready() block relies you can't put those at the bottom of the page.
将JavaScript内容(或任何其他内容)放在页面底部实际上与页面加载完成后触发的onload事件(包括内容本身)更密切相关。无论哪种方式,它几乎可以确定$(document).ready()块内的内容将在页面底部的内容之前执行,但是如果你加载了ready()块中的代码所依赖的外部库你就不能把它们放在页面底部。
In general if you have code that isn't dependent on external libraries and a successful loading of DOM you can safely put it at the bottom of the page. If you however have stuff that needs to be executed right after the DOM has been loaded you most definitely want that code in the $(document).ready() block, but do have in mind that you can place that block wherever you want, even in the middle of the page (which can be a nice trick sometimes).
通常,如果您的代码不依赖于外部库并成功加载DOM,则可以安全地将其放在页面底部。如果你有东西需要在加载DOM之后立即执行,你绝对想要$(document).ready()块中的代码,但是请记住你可以把那个块放在任何你想要的地方,甚至在页面的中间(有时可能是一个很好的技巧)。
#1
6
From here:
Under the hood: $(document).ready() As you would expect from John Resig, jQuery’s method for determining when the DOM is ready uses an assortment of optimizations. For example, if a browser supports the DOMContentLoaded event (as many non-IE browsers do), then it will fire on that event. However, IE can’t safely fire until the document’s readyState reaches “complete”, which is typically later. If none of those optimizations are available, window.onload will trigger the event.
引擎盖下:$(document).ready()正如您对John Resig所期望的那样,jQuery确定DOM何时就绪的方法使用了各种各样的优化。例如,如果浏览器支持DOMContentLoaded事件(就像许多非IE浏览器那样),那么它将触发该事件。但是,在文档的readyState达到“完成”之前,IE无法安全地触发,这通常是稍后的。如果这些优化都不可用,window.onload将触发该事件。
These events are independent of a location within the HTML tag, as other event still are going on even at the time of rendering </body>.
这些事件独立于HTML标记内的位置,因为即使在呈现 时其他事件仍在进行中。
#2
3
No it's not the same, you place the <script> tags before the closing </body> tag to avoid blocking the rendering of html on older browsers, AFAIK, but you have no guarantee that the DOM is "ready"
不,它不一样,你将
#3
0
Not exactly. $(document).ready(); reacts on the so called DOMContentLoaded event which is fired right after the DOM has been loaded and the browser is aware of all the elements on the page (not the content itself).
不完全是。 $(文件)。就绪();对所谓的DOMContentLoaded事件做出反应,该事件在加载DOM之后立即触发,并且浏览器知道页面上的所有元素(而不是内容本身)。
The main reason why code is usually put inside these blocks is not that much related to preventing blocking of parallel loading but to ensure that the elements which are to be manipulated during page load are actually loaded and present in the DOM tree. Not much sense in manipulating elements which the browser is not aware of right?
代码通常放在这些块中的主要原因与防止并行加载的阻塞并没有多大关系,而是确保在页面加载期间要操作的元素实际上被加载并存在于DOM树中。操纵浏览器不知道的元素没什么意义吗?
Putting JavaScript content (or any other content for that matter) at the bottom of the page is actually more closely related to the onload event which is fired after the page has finished loading, including the content itself. Either way its almost certain that content inside $(document).ready() blocks will be executed before the one at the bottom of the page however if you load external libraries on which the code inside the ready() block relies you can't put those at the bottom of the page.
将JavaScript内容(或任何其他内容)放在页面底部实际上与页面加载完成后触发的onload事件(包括内容本身)更密切相关。无论哪种方式,它几乎可以确定$(document).ready()块内的内容将在页面底部的内容之前执行,但是如果你加载了ready()块中的代码所依赖的外部库你就不能把它们放在页面底部。
In general if you have code that isn't dependent on external libraries and a successful loading of DOM you can safely put it at the bottom of the page. If you however have stuff that needs to be executed right after the DOM has been loaded you most definitely want that code in the $(document).ready() block, but do have in mind that you can place that block wherever you want, even in the middle of the page (which can be a nice trick sometimes).
通常,如果您的代码不依赖于外部库并成功加载DOM,则可以安全地将其放在页面底部。如果你有东西需要在加载DOM之后立即执行,你绝对想要$(document).ready()块中的代码,但是请记住你可以把那个块放在任何你想要的地方,甚至在页面的中间(有时可能是一个很好的技巧)。