把JS文件放在网页的底部是不是很实用

Is it practically good to put JS files at the bottom of webpage?

本文关键字：是不是 底部 网页 JS 文件      更新时间：2023-09-26

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

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

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

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

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

更新：5。由于jQuery库应该在代码之前加载；如果在footer（例如footer.php）中加载jQuery库，则不能为不同页面（在正文中）添加自定义jQuery代码。

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

编辑：我添加了另一点，以回应我在人们耳朵里看到的关于这个话题的棉花。

附加要点#5。如果你非常关心处理JS失败的行为，我的意思是，人们在关闭JS的情况下浏览，那么你应该接受渐进增强的概念。例如，您可以设计一个手风琴式菜单，默认情况下在悬停时充当弹出菜单，是的，仅使用CSS，然后在启用JS时通过更改键类来删除这种行为。这样，如果用户应该关闭JS，他们就可以访问没有JS的链接，但当JS工作时，他们会得到增强的行为。

但是，您不应该试图处理的是，由于页面在后端被破坏，因此本应包含JS文件的页面上没有完整的JS文件。处理意外是一回事，但在生产中，处理未能在HTML文件提供之前完成构建的情况永远不应该被视为可接受的情况，尤其是如果你的模板语言中有实际的后端代码（你不应该这样做）等着泄露出来，给潜在的黑客一些潜在的有趣的东西。损坏的页面应作为错误消息。

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

  1. 大错特错。任何时候使用JS来调整页面的初始静态外观，都是错误的。保持关注点的分离，您的页面将更加灵活。使用JS来调整页面的静态风格并不是现代的，它是向后的，你可以告诉jQuery移动版的人我说过的很多。如果你绝对必须支持IE6、IE7和IE8，请告诉你的客户，如果他们拒绝接受任何东西来代替5%的客户群的绝对优雅降级，那么他们在所有地方切出圆角将花费多少钱。

  2. 如果事先没有JS的页面需要很长时间才能加载，那么您还有其他问题需要解决。您正在加载多少资源？你的PHP在做什么不好的预处理？我称后端或设计恶作剧。

  3. 你是说用JS写半个页面是可以接受的，而不是完全不可接受的？不要放过那个客户，不管他们是谁。

  4. jQuery，当最小化时大约是一个中等大小的JPEG。

注意：上面有一些JS并不是完全不能接受的。一些专门的代码，如分析工具或画布规范器，都需要它。但任何不需要的东西都应该放在底部。每次解析JS时，整个页面加载和流量计算过程都会暂停。将JS推到底部可以改善感知的页面加载时间，还应该提供证据，证明你的团队中有人需要快速踢屁股，才能弄清楚他们的代码为什么会崩溃，或者他们的25兆png-24可以做些什么，他们只是缩小了而不是重新格式化。

编写头中的标记以阻止所有其他请求。如果你有10个这样的标签：

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

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

请在此处查看HeadJS作为示例解决方案。

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

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

如果一些下载JS的浏览器会阻止其他并行下载，并且在所有执行JS的浏览器中都会阻止UI线程，从而进行渲染（在某些浏览器中也会解析块）。

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

别忘了，无论你的页面有多漂亮，都需要很长时间才能加载。人们不会等待，2/3秒就是开始出现问题的地方。

  1. 现代设计对JS的依赖可能比以往任何时候都少——是的，我们仍然需要polyfill，但随着浏览器的改进，我们可以使用CSS 做更多的事情

  2. 对于像Backbone.js这样的应用程序来说，这可能是真的，但如果缺少js会破坏网站，那么我认为设计应该有所不同。

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

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

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

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

我偶尔建议把Javascript放在页面底部（就在</body>之前），但只有在新手程序员无法真正处理window.onload或<body onload...>的情况下，这是他们的代码最容易适应的情况。

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

每个人的需求都不一样，让我们浏览一下你的列表：

1） 我从来没有因为javascript而对页面的布局或样式产生过问题。如果你有你的HTML&CSS中顺序缺失的javascript将接近不可见。您可以在css中隐藏元素，并在它们准备就绪时使用javascript显示它们。您可以使用jQuery的.show();方法

这里有一个例子：

<!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分成你的网站所依赖的脚本和其他脚本，并把一些放在页眉，一些放在页脚。

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

您也可以延迟加载文件，直到用户需要它们，比如在form上等待它们到focus来加载验证脚本，或者滚动过某个点来加载"折叠"以下的代码

3） 如果页面dies，你无论如何都会得到一个半空白的页面。使用PHP5，您可以使用exception的进行更好的错误处理

 

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

和这个

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&粽子。JQuery UI的脚本大小为51KB。这还不错，大多数插件应该比这个更小。

因此，我建议你应该做你必须做的事情来获得你想要的结果，但要寻找减少错误和多余代码的最佳实践。总有更好的方法来剥猫的皮。。。

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

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

您还可以隐藏部分或全部页面内容，然后在页面准备就绪后使其可见。只要确保你用JS隐藏它，这样非JS浏览器仍然可以看到它。

查看这些：

  • https://www.google.com/search?q=javascript+页面+就绪
  • http://api.jquery.com/ready/
相关文章：