简体繁体 English

如果Javascript代码块不在HTML文件的末尾，而是使用jQuery的$（document）.ready（function（）{...}），它会减慢页面显示吗？

[英]If Javascript code block is not at end of HTML file, but is using jQuery's $(document).ready(function() {…}), will it slow down the page display?

原文 2010-07-20 22:25:47 9 1 javascript/ jquery/ performance/ pageload/ page-load-time

It is said that Javascript code should be all placed at the end of HTML file, so that the page content is shown first, for the user to see something (so that the user is satisfied to see something instead of waiting another 12 seconds, for example). 据说Javascript代码应全部放在HTML文件的末尾，以便首先显示页面内容，以便用户看到某些东西（这样用户就可以看到某些内容而不是等待另外12秒，因为例）。

But to better encapsulation of the HTML and match Javascript code, such as an "Image Carousel", then usually the HTML and Javascript is placed in one single file, so there are Javascript code blocks all intermixed with HTML code throughout the final HTML file. 但是为了更好地封装HTML并匹配Javascript代码，例如“Image Carousel”，那么通常将HTML和Javascript放在一个单独的文件中，因此在最终的HTML文件中，所有Javascript代码块都与HTML代码混合在一起。

But what if all these Javascript code blocks use jQuery's $(document).ready(function() { ... }) to perform the task, then won't the page display be very fast as well? 但是如果所有这些Javascript代码块都使用jQuery的$(document).ready(function() { ... })来执行任务，那么页面显示也不会非常快？ I think not as fast as when the Javascript is actually placed at the end of the HTML file, but close enough, because it merely adds a function to the ready event queue. 我认为不像Javascript实际放在HTML文件的末尾那么快，但足够接近，因为它只是向就绪事件队列添加了一个函数。

1 个解决方案

I think the point is to place the js at the bottom of the page (usually just inside the closing </body> tag) so that the content of the page is displayed while the js is downloading . 我认为重点是将js放在页面的底部（通常在结束</body>标签内），以便在下载 js时显示页面内容。

If you have your jQuery code spread out throughout the HTML in separate .ready() calls, then no matter what, it won't run until the <body> has fully loaded. 如果您在单独的.ready()调用中将jQuery代码分布在整个HTML中，那么无论如何，它都不会在<body>完全加载之后运行。 So the question would be how much javascript do you have in the HTML? 那么问题是你在HTML中有多少javascript？

If there's quite a bit, then it will slow down the display of any content that comes after each script. 如果有很多，那么它将减慢每个脚本之后出现的任何内容的显示速度。 If it is a relatively small amount of code, then it won't likely make much noticeable difference. 如果它是相对少量的代码，那么它不会产生明显的差异。

If it is really important to you to have the page's content displayed as soon as possible, then place all scripts after the content. 如果真的是非常重要的，你有网页的内容尽快显示出来，然后把所有的脚本内容之后。

I personally wouldn't mix javascript with HTML just for the sake of association. 我个人不会为了关联而混用javascript和HTML。 You could have unexpected results if you start removing/appending content that happens to include a script. 如果您开始删除/追加恰好包含脚本的内容，则可能会出现意外结果。 I'd rather use appropriately named classes and IDs, as well as lots of code comments. 我宁愿使用适当命名的类和ID，以及许多代码注释。

Also keep in mind that those .ready() calls won't work until jQuery has loaded, which would mean that it would need to be at the top of the page, or at least before your first call. 还要记住，那些.ready()调用在jQuery加载之前不会起作用，这意味着它需要位于页面的顶部，或者至少在第一次调用之前。

So again it gets back to the question of which is more important to you. 因此，它再次回到了哪个更重要的问题。 If you want the content visible as quickly as possible, place all js at the bottom. 如果您希望尽快显示内容，请将所有j放在底部。 If you want your method of intermixing js and HTML, you'll have some delay in displaying the page. 如果你想要混合js和HTML的方法，你将在显示页面时有一些延迟。