正確的方式加載angularJS
[英]Proper way to load angularJS
問題描述
就性能最佳實踐而言，建議在頁面底部加載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>
3 個解決方案
解決方案1
3 2015-06-25 08:49:58
如果除了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會更快。
解決方案2
1 2015-06-25 08:52:28
如果您的HTML幾乎是空的，則是否在頁面底部加載javascript，對您的網頁性能幾乎沒有影響。
相反，如果角度應用程序所需的javascript數量很重要，則應延遲加載應用程序。 我的意思是只首先加載第一個視圖上真正需要的東西。
您可以使用ocLazyLoad來幫助您做到這一點。
如果您想分析網站的性能，可以使用dareboost.com之類的工具
解決方案3
1 2015-06-25 08:54:31
添加加載動畫，首先加載角度。 性能明智的相同。 更好的是，您實際上不需要隱藏與角度相關的html，例如，在移動角度負載下，用戶會慢慢看到所有{{}}
在AngularJS應用程序的控制器超類中加載依賴項的正確方法是什么？
[英]What is the proper way to load dependencies in a controller super class of an AngularJS application?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.