将脚本 src 标签放在正文顶部与将脚本 src 标签放在正文底部答案

【问题标题】：Put script src tags at top of body vs put script src tags at bottom of body将脚本 src 标签放在正文顶部与将脚本 src 标签放在正文底部
【发布时间】：2019-01-16 11:58:47
【问题描述】：

我听说我应该将脚本标签放在结束正文标签之前。但是，当我这样做时，由于某种原因，我的 angularJS 表达式似乎无法正确计算。当我将脚本标签放在结束正文标签之前时，“{{value}}”会显示在我不想要的页面上。但是，当我将脚本标签移到开始正文标签之后，页面可以正常显示“2”。谁能解释发生了什么？

在关闭正文标签之前放置脚本，页面错误地显示“{{value}}”

<!DOCTYPE html>
  <html>

  <head>
      <meta chrset="UTF 8">
      <title>Event Registration</title>
      <link rel="stylesheet" href="css/bootstrap.css">

  </head>

  <body>

      <div ng-app="sampleApp" ng-controller="AngularController">
          <h1> Guru99 Global Event</h1>
          {{value}}
      </div>
      <script>
          var sampleApp = angular.module('sampleApp', []);
          sampleApp.controller('AngularController', function($scope) {
              $scope.a = 1;
              $scope.b = 1;
              $scope.value = $scope.$eval('a+b');
          })
      </script>

      <script src="lib/angular.js"></script>
      <script src="lib/bootstrap.js"></script>
      <script src="lib/jquery-1.11.3.min.js"></script>
      <script src="lib/app.js"></script>

  </body>

  </html>

在打开正文标签后立即放置脚本，页面正确显示“2”

<!DOCTYPE html>
  <html>

  <head>
      <meta chrset="UTF 8">
      <title>Event Registration</title>
      <link rel="stylesheet" href="css/bootstrap.css">

  </head>

  <body>
      <script src="lib/angular.js"></script>
      <script src="lib/bootstrap.js"></script>
      <script src="lib/jquery-1.11.3.min.js"></script>
      <script src="lib/app.js"></script>

      <div ng-app="sampleApp" ng-controller="AngularController">
          <h1> Guru99 Global Event</h1>
          {{value}}
      </div>
      <script>
          var sampleApp = angular.module('sampleApp', []);
          sampleApp.controller('AngularController', function($scope) {
              $scope.a = 1;
              $scope.b = 1;
              $scope.value = $scope.$eval('a+b');
          })
      </script>

  </body>

  </html>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

将您的脚本标签放在标题中。

将它放在结束标记之前的建议是，浏览器首先下载页面的内容，然后用户可以在下载 javascript 时看到一些内容。如果脚本标签在顶部，那么用户会盯着一个白色的页面多看一会儿，直到 javascript 完成下载，然后内容才会开始渲染。

在您的情况下，您似乎不希望用户在 javascript 运行之前看到任何内容（{{value}} 原始 html），因此完全可以忽略该建议。

【讨论】：

【解决方案2】：

非常简单。所有的角度函数、处理程序、组件和指令都在angulatjs 脚本中初始化。当您在底部加载angularjs 时。浏览器会在加载HTML 后加载脚本。所以一开始没有angular所以它不会捕获{{value}}所以它只是浏览器的纯文本，浏览器会直接显示{{value}}。

当您在顶部加载时。角度将被加载。所以 Angular 知道如何处理{{value}}。所以它将绑定{{value}} 的值。

【讨论】：

【解决方案3】：

浏览器从上到下“读取”你的 html，当它遇到 javascript 或 css 时，它会停止渲染，直到它完全处理它。这就是为什么在许多情况下建议将脚本放在底部的原因。无论如何，通常脚本在整个页面呈现之前都无法完成它的“工作”，那么为什么要阻止初始呈现呢？

话虽如此，这只是您所看到行为的间接原因。您问题的一般答案是javascript也是从上到下“读取”的，因此在使用之前未声明的任何变量都是未定义的（有一个名为“提升”的概念也会影响这一点，但没有目前的相关性）。在您的情况下，具体而言，angular 对象尚未声明（如果您打开控制台工具，您会看到这是一个错误），因此您无法调用与该对象关联的任何方法。 angular 在 angular.js 中声明，在第一个示例中包含 after 您的脚本，在第二个示例中（正确地）包含在 before 中。

如果您只是将您的脚本移动到第一个示例中包含的脚本的底部，您将看到您的应用程序应该按预期运行

【讨论】：