将JS文件放在网页底部几乎是好事吗？

时间：2012-03-21 23:24:49

标签： javascript html performance seo pagespeed

广泛建议将JS文件放在页面底部，以便首先加载html代码。在这种情况下，访问者在等待页面满载时会看到一些东西。但是，由于以下原因，我认为这是不利的：

  1. 现代设计主要依赖于JS。这意味着在加载JS之前，页面看起来很难看。

  2. 如果在加载期间中断连接（根本没有加载JS），访问者将会错过一些网站功能（可能非常重要）;并且他们不会理解这是加载的问题（重新加载页面）。

  3. 如果服务器端脚本die（由于错误）在脚本之前的脚本末尾（例如在PHP中），访问者将错过整个页面功能（通过JS）;但如果在顶部加载JS，它们只会错过页脚或页面的一半。

  4. 如果首先加载JS，浏览器将并行加载其他内容（如图像）;但如果最后加载JS，可能会增加加载时间。因为JS文件很大（例如JQuery和JQuery UI），所有小东西（如图像）都已加载，我们正在加载一个大文件，最后排成一行。

    5. UPDATE： 5.因为jQuery库应该在代码之前加载;如果在页脚中加载jQuery库（例如footer.php），则无法为不同页面（在正文中）添加自定义jquery代码。

    如果我错了，请纠正我！将JS文件放在页脚中仍然有用吗？

7 个答案:

答案 0 :(得分：4)

编辑：我正在回应我在人们听到的关于这个主题的棉花时的另一个观点。

附加点＃5。如果你真的担心JS-fail的处理行为，我的意思是，用JS浏览的人关闭了，你应该做的是接受渐进增强的概念。例如，你可以设计一个手风琴菜单，默认情况下用作悬停菜单，只用于CSS，然后在启用JS时通过更改键类来删除该行为。这样，如果用户关闭链接，用户就可以访问没有JS的链接，但是当JS工作时，他们会获得增强的行为。

但你不应该试图处理的是在应该拥有它们的页面上缺少整个JS文件，因为页面在后端被破坏了。处理意外情况是一回事，但处理在服务之前完成构建HTML文件的失败不应该被视为生产中可接受的情况，特别是如果你的模板语言中有实际的后端代码（你不应该）等待溢出并给潜在的黑客一些可能有趣的东西。损坏的页面应作为错误消息提供。

================================

  1. 死了错。任何时候你使用JS来调整页面的初始静态外观，你做错了。保持关注点和页面的分离将更加灵活。使用JS来调整页面的STATIC风格并不现代，它是低音的，你可以告诉我所说的jQuery移动家伙。如果你绝对必须支持IE6和IE7和IE8告诉你的客户，如果他们拒绝接受任何东西作为5％客户的绝对优雅降级的替代品，他们会花多少钱来削减整个地方的圆形渐变角落 - 基

  2. 如果你事先没有JS的页面需要很长时间才能加载，那么你还有其他问题需要解决。你加载了多少资源？你的PHP最不需要什么样的预处理？我回电话或设计恶作剧。

  3. 你是说用半个页面来运行JS而不是完全不可接受的一半是可以接受的吗？不要放弃那个客户，无论他们是谁。

  4. jQuery，最小化时大小与中等大小的JPEG相当。

    5. 注意：让一些JS排在首位并不是完全不可接受的。一些专门的代码，如分析内容或画布规范化器需要它。但任何不需要的东西都应该在底部。每次解析JS时，整个页面加载和流量计算过程都会停止。将JS推到底部可以提高感知的页面加载时间，还应该提供证据，证明团队中的某个人需要快速启动才能找出他们的代码为什么会被坦克或者他们的25兆字节png-24s可以做些什么他们只是缩小而不是重新格式化。

答案 1 :(得分：3)

标题中的脚本标记会阻止所有其他请求。如果你让我们说10个这样的标签：

<script src="http://images.apple.com/home/scripts/promotracker.js"></script>

......他们将按顺序执行。不会同时下载其他文件。因此，它们会增加页面加载时间。

Check out HeadJS here作为示例解决方案。

答案 2 :(得分：2)

你需要考虑“在执行一些javascript之前我是否需要准备好DOM”。基本上，您将脚本标记放在页面底部，以基本保证DOM已准备就绪。如果您在标题中链接您的样式，并正确地设置页面样式，您不应该得到“丑陋”。其次，如果你依赖于使用javascript显示页面的某些部分来处理DOM对象，我会使用更多的ajax调用来防止这个问题。两全其美的。页面加载了你可以，然后ajax调用正在获取html填充页面的其他部分。

答案 3 :(得分：1)

我并不熟悉将脚本放在页脚中，但您可能想要查看告诉页面只在页面完全加载后运行JavaScript的各种方法。

这会打开几个选项 - 只有在页面准备好后，才能让JS动态加载外部脚本。

您还可以隐藏部分或全部页面内容，然后在页面准备好后将其显示。只要确保用JS隐藏它，这样非js浏览器仍然可以看到它。

见这些：

答案 4 :(得分：1)

我偶尔会建议将Javascript放在页面底部（就在</body>之前），但仅限于新手程序员无法真正处理window.onload或<body onload...>的情况这是他们的代码最简单的改编，以使其工作。

我同意你的实际缺点，需要与迈克尔关于负载时间影响的说明进行平衡。在大多数情况下[我提交]在页面的<head>中加载脚本会获胜。

答案 5 :(得分：1)

每个人的需求都不同，让我们看看你的清单：

1）由于javascript，我从未遇到过页面布局或样式的问题。如果您有HTML＆amp; CSS为了缺少javascript将接近隐形。 您可以隐藏css中的元素，并在准备好后使用javascript显示它们。您可以使用jQuery's .show(); method

这是一个例子：

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#def3ca; margin:3px; width:80px;
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="showr">Show</button><button id="hidr">Hide</button>
  <div>Hello 3,</div><div>how</div><div>are</div><div>you?</div>
<script>
$("#showr").click(function () {
  $("div").first().show("fast", function showNext() {
    $(this).next("div").show("fast", showNext);
  });
});
$("#hidr").click(function () {
  $("div").hide(1000);
});
</script>
</body>
</html>

如果您仍然遇到问题，可以将您的javascript拆分为您的网站所依赖的javascript和其他脚本，并将其中一些放在标题中，一些放在页脚中。

2）那是用户错误，你无法控制它，但是你可以检查是否存在所需的功能并尝试重新加载它。大多数插件在运行时都提供某种确认，因此您可以运行测试并尝试重新加载它们。

您还可以延迟加载文件，直到用户需要它们，例如等待它们focus form加载验证脚本或滚动到某个点以加载下面的代码“折叠”

3）如果页面为die，您无论如何都会获得半空白页面。使用PHP 5，您可以使用exceptions

进行更好的错误处理 

if (!$result = mysql_query('SELECT foo FROM bar', $db)) {
        throw new Exception('You fail: ' . mysql_error($db));
}

and this 

try
{
  // Code that might throw an exception
  throw new Exception('Invalid URL.');
}
catch (FirstExceptionClass $exception) 
{
  // Code that handles this exception
} 
catch (SecondExceptionClass $exception) 
{
  // you get the idea what i mean ;)
}

4）如果你缩小你的脚本，你不应该比图像大。 JQuery缩小了32KB＆amp; gziped。 JQuery-UI的脚本是51KB。这不是太糟糕，大多数插件应该比这更小。

所以我建议你应该做你需要做的事情来获得你想要的结果，但是寻找减少错误和过多代码的最佳实践。永远有一种更好的方法给猫皮肤......

答案 6 :(得分：1)

建议将JS置于页面底部或异步加载的原因是JS会减慢页面加载速度。

如果下载JS的某些浏览器会阻止其他并行下载，并且在执行JS的所有浏览器中阻止UI线程并因此呈现（在某些情况下解析块）。

将其置于底部或异步加载会尝试延迟该问题，直到它对访问者页面加载体验的影响较小。

不要忘记，无论你的页面有多漂亮，加载人都需要太长时间，不会等待2/3秒就会引发问题。

  1. 现代设计可能更少依赖于它所拥有的JS - 是的，我们仍然需要填充，但随着浏览器变得更好，我们可以用CSS做更多事情

  2. Backbone.js应用程序可能会出现这种情况，但如果缺少JS会破坏网站，那么我认为设计应该是不同的。

  3. 如果服务器端脚本消失，可能还有其他问题需要担心，无论如何都无法保证页面足够有用。

  4. NO！ JS阻止UI线程，在某些情况下下载，因此图像将被延迟。此外，由于JS使用连接，因此可用于并行下载的连接较少。

  5. 看一下@samsaffron关于加载jQuery的文章 - http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

    6. 如果你可以延迟JS加载，你应该

相关问题
最新问题