javascript的最佳位置包括

Question

我已经读过,最好将<script>标签放在文档的末尾.执行此操作的论据似乎是浏览器将停止将页面呈现在脚本标记下方,直到它已加载并执行脚本为止.如果您的脚本标记位于页面顶部,则渲染会暂停一段时间,这很糟糕.

但是,我不确定这是否真的如此.

环顾四周,我通常会看到以下位置......

在`<head>`页面或`<body>`标签内部

Stackoverflow是一个将脚本标记放入其中的站点的示例head,由于它们通常非常注重性能,因此我开始怀疑页面中的位置是否重要.

放置javascript的另一个常见位置似乎正好在<body>元素的最后.我假设这意味着页面可以在javascript下载时呈现并继续执行其操作.

有没有人对此有任何想法或建议？我希望尝试让我们的页面执行并尽快向用户显示.

有关系吗？在页面顶部有什么好处？页面底部？

Answer 1

这真的取决于.

没有捕获所有答案,因为它取决于你的javascripts正在采取什么行动.

如果您对需要加载脚本的DOM元素进行操作,有时需要将脚本放在页面末尾.假设你想专注于一个控件,你的脚本是:

var mytext = document.getElementById("mytext2"); 
mytext.focus();

那么在这种情况下,您希望它在浏览器加载mytext2控件之后在页面的末尾执行.对于仅包含事件调用的函数的脚本块,这一点不太重要.

如果您有一个包含函数库的大型.js文件,您可能还希望将其放在页面的末尾,以便浏览器在加载大型.js文件之前加载页面的速度更快.

谷歌分析建议将他们的跟踪器放在最后,以确保在计算命中数之前已经交付了页面,但在某些情况下,它建议将脚本放入标题中,它可以双向运行.

因此,对我来说,经验法则是HEAD脚本,除了在线执行并对DOM对象执行的操作之外的所有内容,或者您希望在页面后加载的大型脚本.

Rick Strahl刚写了一篇关于在.net中放置Javascript的精彩博客: