Javascript - 头部，身体还是jQuery？ [英] Javascript - head, body or jQuery?
问题描述
< head>
< script type =text / javascript>
alert（Hello world！）;
< / script>
< / head>
与所有不同（在功能上）不同于
< body>
<！ - 代码在这里 - >
< script type =text / javascript>
alert（Hello world！）;
< / script>
< / body>
更重要的是，我想关注以任何方式修改或使用DOM元素的JS。所以我知道如果你在< element id =之前加入类似于，那么它将不会工作，因为主体是从上到下加载的，所以JS首先加载，然后继续尝试操纵尚不存在的元素。因此，它应该像上面那样，进入 document.getElementById（test）。innerHTML =Hello world！ test>< / element> < head> 或者在< / body> 标签。问题是，除了组织和排序之外，它们中的哪一个被选中是否重要，如果是，以何种方式？
当然，还有一个第三种方法--jQuery方式：
$ $ $ $ $ $ $ $ $（document）.ready（function（）{/ * Code goes here * /} ）;
这样，放置代码的位置在哪里并不重要，因为它只会当所有内容都被加载时执行。这里的问题是，是否值得导入一个巨大的JS库 来使用一种方法，可以用一个准确的脚本替换它的需要？我只想在这里澄清一些事情，如果您想回答，请继续！总结：不同类型的脚本应该放在哪里 - 头部或身体，还是它很重要？ jQuery的价值只是为了准备好事件吗？
最推荐的方法是将它放在 引用上面的雅虎文章： 是他们阻止并行下载。 当您将脚本放入 至于： 当DOM可用并且可以被操纵时，它被触发。如果你把代码放到最后，你不一定需要这个，但通常这是需要的，因为只要 This question is just to clear some things up. Some things like this have been asked before, and this rounds them all up into one question - where should JavaScript go in the HTML document, or, more importantly, does it matter? So, one of the things I'm asking is, does at all differ (in terms of functionality) from More importantly, I want to focus on JS that modifies or uses elements from the DOM in any way. So I know that if you put something like Of course, there is also a third method - the jQuery way: That way, it doesn't matter where in the body you place the code, since it will only be executed when everything has loaded. The question here is, is it worth importing a huge JS library just to use a method the need for which could be replaced with an accurate placing of your scripts? I'd just like to clear things up a little here, if you would like to answer, go ahead! Summary: where should different kinds of scripts go - head or body, and/or does it matter? Is jQuery worth it just for the ready event? Most recommended method is to put it before Quoting from Yahoo article linked above: The problem caused by scripts is that they block parallel downloads.
The HTTP/1.1 specification suggests that browsers download no more
than two components in parallel per hostname. If you serve your images
from multiple hostnames, you can get more than two downloads to occur
in parallel. While a script is downloading, however, the browser won't
start any other downloads, even on different hostnames. When you put scripts in As for: It is fired when DOM is available and ready to be manipulated. If you put your code at the end, you won't necessarily need this but usually this is needed because you want to do something as soon as DOM is available for use. 这篇关于Javascript - 头部，身体还是jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<之前; / body> 标签。 雅虎表现文章也表明，除了 YSlow 和插件。 p>
HTTP / 1.1规范建议浏览器下载的每个主机名不会多于
两个组件。如果您从多个主机名提供图像
，则可以获得两个以上下载并行发生
。然而，当一个脚本正在下载时，浏览器不会
开始任何其他下载，即使是在不同的主机名下也是如此。
< head> 标记中时，浏览器会使用它们，从而保持其他内容不变，直到脚本加载完毕，用户会感觉像缓慢加载页面一样。这就是为什么你应该把脚本放在底部。
$（document）.ready（function（）{/ * Code goes here * /}）;
<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>
<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>
document.getElementById("test").innerHTML = "Hello world!" before <element id="test"></element> in your body, then it won't work since the body is loaded from top to bottom, making the JS load first, which will then proceed to try to manipulate an element that doesn't exist yet. So it should, just like the above, either go in the <head> or just before the </body> tag. The question is, aside from organisation and sorting, does it matter which one of these is chosen, and if so, in what way?$(document).ready(function(){ /*Code goes here*/ });
</body> tag. Yahoo performance article also suggests that other than YSlow and Page Speed addons by Yahoo and Google respectively.
<head> tag, the browsers goes for them thereby keeping other stuff on hold until scripts are loaded which users will perceive like slow loading of the page. This is why you should put scripts at the bottom.$(document).ready(function(){/*Code goes here*/});
