html-<head>或</ body>之前的JavaScript?

我将要开始一个新的Web项目,并计划使用以下方案在<head><head>之前放入一些JavaScript:

  1. 对页面UX必不可少的脚本:在<head>中。由于我仔细阅读了网络-在加载页面之前先加载<head>中的脚本,因此放置对用户来说必不可少的脚本是有意义的 在那里体验。

  2. 在设计和UX上不必要的脚本(Google Analytics脚本等):在<head>之前。

这是明智的做法吗?

另一种方法是将所有脚本放入<head>中,并将defer属性添加到非必需脚本中。 但是,我读到Firefox的较早版本没有采用defer属性。

timkl asked 2020-07-04T17:20:19Z
6个解决方案
30 votes

我认为很多开发人员都在</body>之前运行javascript,以便在呈现所有元素之后运行它。

但是,如果您正确组织代码,则页面上的位置无关紧要。

例如,使用jQuery时,您可以通过执行以下操作来确保在页面及其元素完全呈现之前不运行代码:

$(document).ready(function(){
   //Code here
});

然后,可以将脚本引用放入</body>标记中。


更新-脚本标签应在</body>之前引用。这可以防止在脚本加载时阻止渲染,并且对于站点感知速度更好。

使用此技术时,不应使用任何干扰性的javascript。

Curt answered 2020-07-04T17:21:02Z
13 votes

JavaScript应该放在文档的末尾,以免延迟并行加载页面元素。 然后,这确实需要以特定方式编写js,但确实可以提高页面加载的速度。

另外,理想情况下,您可以在不同的(子)域下托管这样的引用。 对jquery的引用也应指向Google CDN。

有关更多信息,请参见[http://developer.yahoo.com/performance/rules.html]。

Digbyswift answered 2020-07-04T17:21:31Z
4 votes

我说那是完全明智的。 如您所说,只要您不从<head>中移出必要的脚本(例如jQuery,Modernizr等),就不会有问题。

将非必需的脚本移至页面底部应有助于提高感知的加载速度(以及最小化/串联脚本)。

Conan answered 2020-07-04T17:21:56Z
3 votes

您希望将脚本放置在</body>之前的原因之一是,它们在没有用户交互的情况下操作DOM,因此您需要加载DOM才能对其进行操作。 另一种方法是添加事件侦听器,并在页面加载后运行脚本,但这将需要其他代码,如果您有很多脚本,尤其是您自己没有编写的脚本,这可能会变得很复杂。 将它们放在页面的末尾也可以加快页面的加载速度,尽管在使用DOM操作脚本的情况下,您可能会得到一些不太好的结果。

Nikoloff answered 2020-07-04T17:22:16Z
1 votes

这一切都取决于您所说的“ UX必备”。 例如,我同意让modernizr早日出现,但并非所有内容都需要立即加载。 如果您要避免显示未样式化文本(FOUT),这是一个很好的理由。 同样,如果您有脚本会影响用户在执行任何操作之前页面的外观,则应尽早加载这些脚本。

不过请不要忘记,速度是UX的一部分。 当用户尚未看到适用于其的内容时,准备运行一些jquery交互没有任何好处。 从结尾开始加载脚本之间的差异仅需几秒钟。 如果让页面首先加载,则用户将利用那几秒钟来进入页面,从而使您能够毫不干扰地加载脚本。

如果将脚本移到页面底部,则页面加载速度会更快,这对如今的页面排名有所不同。

另外,如果您尝试在脚本所引用的元素加载之前运行脚本,则某些版本的IE会引发错误。

就像Ed所说的那样,您的脚本应该存储在一个单独的文件中,并且应该存储在尽可能少的文件中。

daveyfaherty answered 2020-07-04T17:22:56Z
0 votes

将Javascript放在一个单独的文件中,并将其链接放在HTML的头部。

Ed Heal answered 2020-07-04T17:23:15Z
translate from https://stackoverflow.com:/questions/7751514/javascript-in-head-or-just-before-body