JavaScript中的 or just before ?

问题描述 投票:46回答:6

我即将开始一个新的Web项目,我计划在<head>中使用一些JavaScripts,并在</body>之前使用以下方案:

  1. 对页面用户体验至关重要的脚本:在<head>中。因为我已经开始仔细阅读网页 - 在页面加载之前加载了<head>中的脚本,所以将那些对用户体验至关重要的脚本放在那里是有意义的。
  2. 对设计和UX(Google Analytics脚本等)不重要的脚本:在</body>之前。

这是一种明智的做法吗?

另一种方法是将所有脚本放在<head>中,并将延迟属性添加到非必要脚本中。但是,我读到旧版本的Firefox没有获取defer属性。

javascript html firefox user-experience
6个回答
30
投票

我想很多开发人员在</body>之前运行javascript,以便在所有元素都被渲染之后运行。

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

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

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

然后可以将脚本引用放在head标记中。


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

使用此技术时,不应使用任何突兀的JavaScript。


13
投票

Javascript应该放在文档的末尾,这样它就不会延迟页面元素的并行加载。这确实需要以特定方式编写js,但它确实提高了页面加载的速度。

此外,理想情况下,您可以在不同的(子)域下托管此类引用。对jquery的引用也应该指向谷歌CDN。

有关更多信息,请参阅http://developer.yahoo.com/performance/rules.html


4
投票

我会说那是非常明智的。正如你所说,只要你不从<head>移动必要的脚本(例如jQuery,Modernizr等),你就不应该有问题。

将非必要脚本移动到页面底部应该有助于感知加载速度(最小化/连接脚本)。


3
投票

你想在</body>之前放置脚本的原因之一是,如果他们在没有用户交互的情况下操作DOM,那么你需要加载DOM才能被操作。另一种方法是添加一个事件监听器并在页面加载时运行脚本,但这需要额外的代码,如果你有很多脚本,可能会变得复杂,特别是那些你自己没有写过的脚本。将它们放在页面的末尾也会加快页面加载,但是在DOM操作脚本的情况下,你可能会得到一些不那么漂亮的结果。


1
投票

这一切都取决于你对“必不可少的用户体验”的意思。我同意让modernizr早早出现,但不是所有东西都需要立即加载。如果你试图避免闪烁无格式文本(FOUT),这是一个很好的理由。同样,如果您的脚本在用户执行任何操作之前影响页面的外观,则应尽早加载。

不要忘记,速度是UX的一部分。当用户无法看到它适用的内容时,准备运行一些jquery交互没有任何好处。在开始结束时加载脚本之间的区别只有几秒钟。如果您首先加载页面,则用户将使用这些秒来获取页面,从而允许您不显眼地加载脚本。

如果将脚本移动到页面底部,您的页面加载速度会更快,这对您的Pagerank来说有所不同。

此外,如果您尝试在它引用的元素加载之前运行脚本,某些版本的IE将会抛出错误。

像Ed所说,你的脚本应该存储在一个单独的文件中,并尽可能少地存储在文件中。


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.