javascript必须在head标签中吗?

时间:2009-07-31 15:43:25

标签: javascript

我相信javascript可以在任何地方(几乎),但我几乎总是在<head></head>之间看到它。我正在使用jquery并想知道它是否由于某种原因必须在head标签中,或者如果我移动它会破坏某些东西。谢谢。

编辑:为什么它几乎总是在头标签中?

11 个答案:

答案 0 :(得分:44)

不,它可以在任何地方。实际上,将它放在文档的底部有时是个好主意。有关原因的解释,请参阅http://developer.yahoo.com/performance/rules.html#js_bottom

答案 1 :(得分:37)

JavaScript会在文档中的任何位置执行。如果您将内联JavaScript放在正文中,它将在浏览器到达时执行。如果您使用$(document).ready(...)执行操作,则定位无关紧要。否则,您可能会发现重要案例。一般来说,没关系。脚本最终出现在head标签中,大部分都不符合传统。

答案 2 :(得分:16)

基本上,浏览器会停止呈现页面,直到.js文件被完全下载和处理。由于它们在HTML到达时逐步呈现页面,因此引用后面的.js文件,将获得更好的用户体验。

所以诀窍是只在head中包含绝对重要的脚本,并在页面末尾加载剩余的脚本。

答案 3 :(得分:9)

当浏览器读取脚本标记直到它处理完毕后,一切都会停止。因此,如果您尽可能地向下移动脚本标记,您的页面将更快地呈现 - 理想情况是在结束正文标记之前。显然总的加载时间是相同的。

在使用jQuery之前,你必须确保实际上没有调用任何jQuery函数。

答案 4 :(得分:9)

这就是为什么JavaScript陷入如此混乱的原因以及为什么旧的StackOverflow帖子是开发人员最糟糕的噩梦。 JS现在变化如此之快,每周都会出现一个新的框架,并且每个框架都被它的倡导者声称为蜜蜂。

Gumbo说得对,内联元素可以在任何地方引用脚本标记是正确的,但是加载外部JS文件或在标记中包含JS代码的选择是在每种情况下单独做出的决定。是的,浏览器在解析时将停止加载JS,因此您需要考虑这将如何影响页面加载速度和功能。当前或截至一年前,即2015年中期(请记住,人们的回答是在2009年7月,大多数开发人员都不会读到这个,因为他们看到的是答案1并继续前进!!!)是给定的移动设备页面加载速度的优先级需要对移动/单元桅杆的两个请求限制,在3G下为您提供28k(2x 14kb(是))有效负载,您需要考虑(如Google所述)'绘制到屏幕'的28k和这应该为用户提供足够的页面内容/交互性,以确保他们在28k的正确页面或正确的轨道上。因此,一个Jquery缩小目前是87.6lkb,只是不会削减芥末!

这就是为什么大多数移动页面加载目前在加载任何东西之前都会停留几秒钟,那就是4G!不要这样做。页面速度为王,用户在加载JQuery文件之前点击后退按钮。在3G +下,28k的有效载荷将在<1秒内加载,因此没有理由说明您的页面在那段时间内没有开始加载。下次点击手机上的链接时,请观看小栏位,等待下一页上的所有标签!

因此,不要将你的页面结构放在SO上7年前的帖子所说的位置(这只是过时的错误),但需要每一段代码,并确保用户可以使用页面最重要的部分在您尝试加载6个JS框架之前,为您的联系页面实现聪明的并行滚动和广泛的数据绑定。

BTW谷歌要求你把JS推到谷底,因为他们提供谷歌分析代码,这需要最后加载。

在编码之前先想想!

答案 5 :(得分:5)

没有。 SCRIPT不仅被归类为head.misc element,还被归类为special element,因此在允许inline elements的地方允许使用SCRIPT。因此,您可以在允许内联元素的地方放置<p>foo <script>document.write("bar")</script></p>

{{1}}

实际上,some recommend to put SCRIPT elements at the end of the BODY就在结束标记之前,以便在加载JavaScript之前解析整个文档。这是为了防止JavaScript阻止并行下载。

答案 6 :(得分:2)

实际上,出于性能原因,您几乎总是希望将脚本标记放在页面底部。为什么?您希望首先加载页面结构和CSS,以便用户立即看到页面。然后,您希望所有行为驱动的代码最后加载。 YSlow是一个很好的firefox扩展,它将向您展示性能等级。对您评分的其中一个项目是您是否在底部而不是顶部使用javascript。

答案 7 :(得分:2)

请注意您可能遇到的对延迟的不良影响,具体取决于用户的浏览器以及您将Javascript放在页面中的确切位置 - 请参阅Steve Souders所说的所有内容,包括斯坦福大学讲座的视频,以及他的工作成果留下了例如here(尽可能地将脚本放在页面的底部等等)。

答案 8 :(得分:1)

  1. 因为您不希望JavaScript与HTML混合 - 具有行为的内容。您最好将它放在一个单独的文件中。

  2. 在其他地方拥有JS有优点和缺点 - 例如,它将在不同的时间执行,您可以从正文中的javascript写入文档。

答案 9 :(得分:0)

它可以放在headbody标记中。请记住,它会在读取时执行,而不一定在文档加载完成时执行。看看here

答案 10 :(得分:0)

在某些情况下,如果脚本位于错误的位置,脚本可能无效。有些JavaScript需要在特定HTML元素之后执行,其他JavaScript需要准确地显示您希望脚本输出显示的位置,其他JavaScript应该位于文档的头部。这实际上取决于代码的编写方式。如果您不确定,则应在window.load或DOMready上执行代码:http://www.javascriptkit.com/dhtmltutors/domready.shtml