正确的方式加载angularJS

Question

就性能最佳实践而言，建议在页面底部加载javascript。 AngularJS官方文档也对角度应用程序进行了说明。

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

我的网页充满了角度指令和角度绑定，并且我的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>

Answer 1

如果除了html和header标记以及空的body之外，HTML文件上没有任何内容，则您可能做错了。 这就是为什么。

在这种情况下，是否放置脚本标签都无关紧要，当您希望在JS加载之前显示内容时，这很重要，但是在您的情况下，没有内容要显示，因此，如果JS的下载速度很慢，那么将显示一个空白页将显示。 不知道您的应用是公开的还是私有的。 如果是后者，则此状态是可以接受的，但是如果要公开，则不建议这种情况。

您应该在初始页面加载中放置一些内容，然后再对其进行改进或替换为Angular。

加载Angular的提示

您应该将所有脚本串联到一个脚本中，并将其最小化，以便在加载网站时节省一些带宽。

您还应该编译所有模板，并使用$templateCache将它们放入脚本中，如下所示：

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

这样，Angular不会向您的服务器发出任何额外的请求来尝试获取模板。 您可能需要检查一些艰巨的任务。

另外，在生产中，您可能需要使用以下命令禁用调试数据：

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

由于Angular会更快。

Answer 2

如果您的HTML几乎是空的，则是否在页面底部加载javascript，对您的网页性能几乎没有影响。

相反，如果角度应用程序所需的javascript数量很重要，则应延迟加载应用程序。 我的意思是只首先加载第一个视图上真正需要的东西。

您可以使用ocLazyLoad来帮助您做到这一点。

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

Answer 3

添加加载动画，首先加载角度。 性能明智的相同。 更好的是，您实际上不需要隐藏与角度相关的html，例如，在移动角度负载下，用户会慢慢看到所有{{}}

正确的方式加载angularJS

问题描述

3 个解决方案

解决方案1
3 2015-06-25 08:49:58

加载Angular的提示

解决方案2
1 2015-06-25 08:52:28

解决方案3
1 2015-06-25 08:54:31

正确的方式加载angularJS

问题描述

3 个解决方案

解决方案1 3 2015-06-25 08:49:58

加载Angular的提示

解决方案2 1 2015-06-25 08:52:28

解决方案3 1 2015-06-25 08:54:31

解决方案1
3 2015-06-25 08:49:58

解决方案2
1 2015-06-25 08:52:28

解决方案3
1 2015-06-25 08:54:31