加载angularJS的正确方法答案

【问题标题】：Proper way to load angularJS加载angularJS的正确方法
【发布时间】：2015-06-25 16:55:38
【问题描述】：

就性能最佳实践而言，建议在页面底部加载 javascript。 AngularJS official documentation 对 Angular 应用也有同样的声明。

将脚本标签放在页面底部。在页面末尾放置脚本标签可以缩短应用程序加载时间，因为加载 angular.js 脚本不会阻止 HTML 加载。

我的网页充满了角度指令和角度绑定，并且我的 body 标记中没有任何静态 html 内容。一般建议是否仍然适用于我的网站？我希望此建议仅适用于具有静态内容和部分 angularJS 内容的网站。

如果我把我的角度放在底部，我假设首先我的 html 将被加载，然后是角度解析，然后再次 html 加载、解析和脚本执行将会发生。这是真的吗？如果我将我的角度放在页面顶部，我可以获得一些性能优势还是性能会变差？

我已将所有脚本合并并缩小为一个。我没有任何外部模板。我有带有一些数据投标的内联模板。你也可以假设我使用 ng-cloak 和 debugInfoEnabled false。

我的应用看起来像

<!DOCTYPE html>
<html ng-app="coreModule">
<head>
    <title>Angular App</title>
    <link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<directive1></directive1>
<directive2></directive2>
..
<directive10000></directive10000>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

我需要按以下方式使用吗？

<!DOCTYPE html>
<html ng-app="coreModule">
<head>
    <title>Angular App</title>
    <link rel="stylesheet" type="text/css" href="app.css">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
<directive1></directive1>
<directive2></directive2>
..
<directive10000></directive10000>
</body>
</html>

【问题讨论】：

如果你没有静态 html，那你把你的 ng-app 放在哪里？
@lcycool，我的 body 标签内没有任何静态内容。我将 ng-app 应用于我的 html 标签
“如果我把我的角度放在底部，我假设首先我的 html 将被加载，然后是角度解析，然后再次发生 html 加载、解析和脚本执行。是真的吗？”试试看？发生了什么？
我认为性能方面几乎相同。即使您将 Angular 放在顶部，它仍然会首先呈现您的整个 HTML（我假设它很小，所以也没关系），然后获取模板等指令。
@atmd，我试过了。但我无法准确衡量差异。我担心如果我的页面增长它会变得更糟。

标签： javascript html angularjs performance

【解决方案1】：

如果除了html 和header 标记和空的body 之外，HTML 文件中没有任何内容，那么您可能做错了。原因如下。

在这种情况下，是否放置脚本标记无关紧要，当您希望在 JS 加载之前显示内容但在您的情况下没有要显示的内容，因此如果 JS 的下载速度很慢，那么将显示一个空白页面。不确定您的应用是公开的还是私有的。如果是后者，这种状态是可接受的，但如果要公开，那么我不推荐这种情况。

你应该在你的初始页面加载中添加一些内容，然后在以后得到改进或用 Angular 替换。

加载 Angular 的提示

您应该将所有脚本连接成一个脚本并将其缩小，以便在加载站点时节省一些带宽。

您还应该编译所有模板并将它们放入带有$templateCache 的脚本中，例如：

$templateCache.put('main.html', '<strong>Main</strong> template');

这样，Angular 就不会向您的服务器发出任何额外请求来尝试获取模板。您可能需要检查一下这方面的 grunt 和 gulp 任务。

此外，在生产环境中，您可能希望通过以下方式禁用调试数据：

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

因为 Angular 会更快。

【讨论】：

是的。我已将所有脚本合并并缩小为一个。我没有任何外部模板。我有带有数据投标的内联模板。你也可以假设我使用 ng-cloak 和 debugInfoEnabled false。

【解决方案2】：

如果你的 HTML 几乎是空的，页面底部是否加载 javascript，对你的网页性能影响很小。

相反，如果您的 Angular 应用程序所需的 javascript 数量很重要，您应该延迟加载您的应用程序。我的意思是首先只加载第一个视图中真正需要的内容。

您可以使用ocLazyLoad 来帮助您完成。

如果您想分析网站的性能，可以使用dareboost.com等工具

【讨论】：

【解决方案3】：

添加加载动画，先加载角度。性能方面也一样。更好的是，您实际上不需要隐藏与角度相关的 html，例如在移动角度加载缓慢时，用户会在任何地方看到所有 {{}}

【讨论】：

尽可能使用 ng-bind，以免最终在页面上显示 {{}}
如果首先加载 angular，这将再次起作用。否则 html 括号是括号
哦，是的，正确的 ng-bind 通过完全替换整个文本值来工作。谢谢