在JavaScript文档中嵌入JavaScript时,放置<script>标记和包含JavaScript 的适当位置在哪里?我似乎记得你不应该把它们放在这个<head>部分中,但放在该部分的开头<body>也是不好的,因为在完全呈现页面之前必须解析JavaScript(或类似的东西).这似乎将该部分的末尾<body>作为<script>标记的逻辑位置.
所以,在这里是把正确的地方<script>标记?
(这个问题引用了这个问题,其中建议JavaScript函数调用应该从<a>标签移动到<script>标签.我专门使用jQuery,但更一般的答案也是合适的.)
大多数javascript和Web开发书籍/文章都说你必须将CSS放在head标签和页面底部的javascript中.
但是当我打开像这个stackoverflow这样的着名网站的html源代码时,我发现他们在head标签中放了一些js文件.
这两种方法的优缺点是什么?何时使用哪种方法?
找到了同一问题的另一个问题: 我应该在哪里声明我的页面中使用的JavaScript文件?在<head> </ head>或</ body>附近?
这个问题只是为了澄清一些问题.之前已经提出了类似这样的事情,这将它们全部归结为一个问题 - JavaScript应该放在HTML文档中,或者更重要的是,它是否重要?所以,我要问的其中一件事就是
<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>
Run Code Online (Sandbox Code Playgroud)
完全不同(在功能方面)
<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>
Run Code Online (Sandbox Code Playgroud)
更重要的是,我想专注于以任何方式修改或使用DOM中的元素的JS.所以我知道,如果你把一些像document.getElementById("test").innerHTML = "Hello world!"以前一样的东西<element id="test"></element>放在你的身体里,那么它将不起作用,因为身体从上到下加载,使得JS首先加载,然后继续尝试操纵一个不加载的元素还存在.因此,就像上面一样,它应该进入标签<head>之前或之前</body>.问题是,除了组织和排序之外,选择哪一个是否重要,如果是,那么以何种方式?
当然,还有第三种方法--jQuery方式:
$(document).ready(function(){ /*Code goes here*/ });
Run Code Online (Sandbox Code Playgroud)
这样,放置代码的正文在哪里都没关系,因为它只会在所有内容都被加载时执行.这里的问题是,是否值得导入一个巨大的JS库只是为了使用一个方法,需要可以用准确放置脚本来替换它?我想在这里澄清一点,如果你想回答,请继续!总结:不同类型的脚本应该放在哪里 - 头部或身体,和/或它是否重要?jQuery是否值得为它准备好活动?
我即将开始一个新的Web项目,我计划使用以下方案将我的JS脚本放在头部和终端之前:
对于页面的用户体验至关重要的脚本是有头脑的.因为我已经开始仔细阅读网页 - 在页面加载之前加载了头部的脚本,所以在那里放置对用户体验至关重要的脚本是有意义的.
对于页面的设计和用户体验(谷歌分析脚本等)不重要的脚本会在之前发布<head>.
这是一种明智的做法吗?
另一种方法是将所有脚本放入</body>并将defer属性添加到非必要脚本 - 但是我已经读过旧版本的FF没有获取defer属性.
我很困惑哪些JavaScript应该包含在哪里?
例如:
应该在哪里包含jQuery库?在<head>关闭</body>元素之前还是之前?
如果JavaScript在底部定义<body>,它可以在体内使用吗?
如果它阻止并行下载,那为什么它从未说过将CSS包含在底部呢?
我已经做了一点JavaScript(好吧,更像是jQuery)一段时间了,我一直困惑的一件事就是我应该把我的脚本放在<head>标签或<body>标签中.
如果有人能澄清这个问题,那就太好了.应该去哪里的一个例子是完美的.
已经发布了关于将javascript放在元素内与关闭body标签()之前的优缺点的条目.<head></body>
但是我发现有时开发人员会将JavaScript代码放在HTML页面的任意位置.这似乎主要是由于懒惰.在页面的任意位置嵌入JavaScript代码有什么缺点?存在许多明显的缺点,例如没有缓存,重用次数较少等.在这方面您还能想到哪些其他缺点?
感谢asdvance.
编辑:虽然在(1),(2),(3)之前已经提出并回答了这个问题,但答案中没有提到在包含文件时使用异步和/或延迟加载的可能性<head>.由于谷歌分析使用这两种方法的新代码,我被提示提出问题.
我最近注意到Google分析现在建议在</head>标记之前包含其Javascript代码段.他们曾经建议在</body>标签之前加入代码段.
该YUI最佳实践加快您的网站提示把脚本作为远了尽可能靠近页面,因为脚本可以阻止并行下载:
脚本引起的问题是它们阻止了并行下载.HTTP/1.1规范建议浏览器每个主机名并行下载不超过两个组件.如果您从多个主机名提供图像,则可以并行执行两次以上的下载.但是,在下载脚本时,即使在不同的主机名上,浏览器也不会启动任何其他下载.
谷歌说:
异步代码段的一个主要优点是您可以将它放在HTML文档的顶部.这增加了在用户离开页面之前发送跟踪信标的可能性.习惯上将JavaScript代码放在该
<head>部分中,我们建议将代码段放在该<head>部分的底部以获得最佳性能.
我通常更关心用户体验和页面加载速度,而不是确保每个跟踪信号都被发送,所以这会促使我将Google分析脚本包含在页面底部,而不是在<head>右边?
我敢肯定,除了这两个观点之外,还有更多的事情需要考虑.影响你的是什么?有什么需要考虑的事情?
那么,将你的剧本</head>与之前的剧本保持一致的利弊是</body>什么?
我已经读过,最好将<script>标签放在文档的末尾.执行此操作的论据似乎是浏览器将停止将页面呈现在脚本标记下方,直到它已加载并执行脚本为止.如果您的脚本标记位于页面顶部,则渲染会暂停一段时间,这很糟糕.
但是,我不确定这是否真的如此.
环顾四周,我通常会看到以下位置......
<head>页面或<body>标签内部Stackoverflow是一个将脚本标记放入其中的站点的示例head,由于它们通常非常注重性能,因此我开始怀疑页面中的位置是否重要.
body元素中的最后一件事放置javascript的另一个常见位置似乎正好在<body>元素的最后.我假设这意味着页面可以在javascript下载时呈现并继续执行其操作.
有没有人对此有任何想法或建议?我希望尝试让我们的页面执行并尽快向用户显示.
有关系吗?在页面顶部有什么好处?页面底部?
我们可以用3种方式放置JavaScript吗?
<head><body>所有方法都由W3C有效吗?
那么如何判断JavaScript应放在底部或哪些必须放在<head>或放在<body>哪里?
<head>,</body>和<body>....<body>
例如:在任何其他XHTML标记/代码之前的某个时间,这些标记/代码将影响该JavaScript代码.更新: 我看到大多数人使用谷歌分析代码作为底层的内联JavaScript?
我的问题是 - 是否可以将javascript附加代码(<script>...</script>包含验证等简单内容的标签 - 不链接到任何外部源)放在该<body>部分的顶部?
将它放在那里和将代码放在<head>部分内是否有任何区别?
我想创建一个包含一个头部的布局文件.每个模板都有不同的js代码部分 - 创建.js文件的外部链接将禁用添加PHP标签的可能性,所以我必须找到另一种方式.
javascript ×11
html ×5
jquery ×5
performance ×2
browser ×1
coding-style ×1
css ×1
firefox ×1
php ×1
xhtml ×1