正确的方式加载angularJS
[英]Proper way to load angularJS
问题描述
In terms of performance best practice it is recommended to load the javascripts at the bottom of the page. 
就性能最佳实践而言，建议在页面底部加载javascript。 AngularJS official documentation also states the same for angular applications. AngularJS官方文档也对角度应用程序进行了说明。
Place the script tag at the bottom of the page.
My web page is full of angular directives and angular bindings and i dont have any static html content inside my body tag. 我的网页充满了角度指令和角度绑定，并且我的body标签内没有任何静态html内容。 Does the general recommendation still applicable for my site? 一般建议仍然适用于我的网站吗？ I hope that this recommendation only applicable to the sites with static content and partial angularJS content. 我希望此建议仅适用于具有静态内容和部分angularJS内容的网站。
If i put my angular at the bottom, i assume that first my html will be loaded and then angular parsing and then again html loading, parsing and script execution will happen. 如果我将角度放在底部，我假设首先将加载我的html，然后进行角度解析，然后再次进行html加载，解析和脚本执行。 Is it true? 是真的吗 If i place my angular at the top of the page, can i get some performance benefit or performance will be worsen? 如果我将角钢放在页面顶部，是否可以获得一些性能优势或性能会变差？
I have combined and minified all my scripts into one. 我将所有脚本合并并缩小为一个。 I dont have any external templates. 我没有任何外部模板。 I have inline templates with some data biding. 我有一些数据竞标的内联模板。 Also you can assume that i use ng-cloak and debugInfoEnabled false. 也可以假设我使用ng-cloak和debugInfoEnabled false。
My app looks like 我的应用看起来像
<!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>
instead do i need to use in the below way? 相反，我需要按以下方式使用吗？
<!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>
3 个解决方案
解决方案1
3 2015-06-25 08:49:58
If you don't have any content on the HTML file besides the html and header tags and an empty body then you're likely doing it wrong. 如果除了html和header标记以及空的body之外，HTML文件上没有任何内容，则您可能做错了。 Here's why. 这就是为什么。
Whether you put the script tag won't matter in this case, it does matter when you want things to be shown before JS loads but in your case there's no content to show so if the download of the JS is slow, then an empty page will be shown. 在这种情况下，是否放置脚本标签都无关紧要，当您希望在JS加载之前显示内容时，这很重要，但是在您的情况下，没有内容要显示，因此，如果JS的下载速度很慢，那么将显示一个空白页将显示。 Not sure if your app is public or just a private one. 不知道您的应用是公开的还是私有的。 If the latter, this state is acceptable but if it's going to be public then I don't recommend this scenario. 如果是后者，则此状态是可以接受的，但是如果要公开，则不建议这种情况。
You should put some content on your initial page load that then, later on, gets improved or replaced with Angular. 您应该在初始页面加载中放置一些内容，然后再对其进行改进或替换为Angular。
Tips to load Angular 加载Angular的提示
You should concatenate all the scripts into one single script and minify it so you save some bandwidth when loading the site. 您应该将所有脚本串联到一个脚本中，并将其最小化，以便在加载网站时节省一些带宽。
You should also compile all your templates and put them inside the scripts with $templateCache such as this: 您还应该编译所有模板，并使用$templateCache将它们放入脚本中，如下所示：
$templateCache.put('main.html', '<strong>Main</strong> template');
In that way, angular won't make any extra requests to your server to try and fetch the templates. 这样，Angular不会向您的服务器发出任何额外的请求来尝试获取模板。 There are grunt and gulp tasks for this which you may want to check. 您可能需要检查一些艰巨的任务。
Also, in production you may want to disable the debug data with: 另外，在生产中，您可能需要使用以下命令禁用调试数据：
myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
Since Angular will be faster. 由于Angular会更快。
解决方案2
1 2015-06-25 08:52:28
If your HTML is almost empty, load javascripts at the bottom of the page or not, will have very little impact on your web page performance. 如果您的HTML几乎是空的，则是否在页面底部加载javascript，对您的网页性能几乎没有影响。
Contrariwise, if the amount of javascript required by your angular application is important, you should lazy load your application. 相反，如果角度应用程序所需的javascript数量很重要，则应延迟加载应用程序。 I mean only load at first what's really needed on the first view. 我的意思是只首先加载第一个视图上真正需要的东西。
You can use ocLazyLoad to help you do it. 您可以使用ocLazyLoad来帮助您做到这一点。
If you want to analyse the performance of your website you can use tools like dareboost.com 如果您想分析网站的性能，可以使用dareboost.com之类的工具
解决方案3
1 2015-06-25 08:54:31
Add loading animation, load angular first. 添加加载动画，首先加载角度。 Performance wise the same. 性能明智的相同。 Better actually you wont need to hide angular related html, say on mobile angular loads slowly user will be seeing all {{}} everywhere 更好的是，您实际上不需要隐藏与角度相关的html，例如，在移动角度负载下，用户会慢慢看到所有{{}}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.