Question

在性能最佳实践方面，建议在页面底部加载javascripts。 AngularJS official documentation也对角度应用程序说明了相同的内容。

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

我的网页上充满了角度指令和角度绑定，我的身体标签里面没有任何静态的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文件中没有任何内容，那么您＆＃39 ;很可能做错了。这就是原因。

在这种情况下，无论你把脚本标签放在哪里都很重要，当你想在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会更快。

Answer 2

如果您的HTML几乎为空，请在页面底部加载javascripts，否则对您的网页性能影响很小。

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

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

如果您想分析网站的效果，可以使用dareboost.com

等工具

Answer 3

添加加载动画，首先加载角度。表现同样如此。实际上你不需要隐藏角度相关的html，比如移动角度负载，用户将看到所有{{}}无处不在

正确加载angularJS的方法

3 个答案:

加载Angular的提示