關於分析
什麼是分析?
根據定義,分析是動態程式分析的一種形式,用於測量程式的空間(儲存器)或時間複雜度,特定指令的使用,或函式呼叫的頻率和持續時間。
為什麼有必要?
分析很重要,因為在你知道你的程式花費大部分時間做什麼之前,你無法有效地進行優化。在不測量程式執行時間(分析)的情況下,你將不知道你是否真正改進了它。
工具和技術:
-
Chrome 的內建開發工具
這包括一整套用於分析的工具。你可以深入瞭解 javascript 檔案,css 檔案,動畫,cpu 消耗,記憶體洩漏,網路,安全性等方面的瓶頸。
製作時間軸記錄並查詢可疑的評估指令碼事件。如果你找到任何,你可以啟用 JS Profiler並重新進行錄製,以獲得有關確切呼叫哪些 JS 函式以及每次呼叫時間的詳細資訊。閱讀更多…
-
FireBug (與 Firefox 一起使用)
-
Batarang (與 Chrome 配合使用)
它是 Chrome 瀏覽器的過時附加元件,雖然它很穩定,可用於監視角度應用程式的模型,效能和依賴性。它適用於小規模應用程式,可以讓你深入瞭解範圍變數在各個級別上的含義。它會在應用程式中告訴你活躍的觀察者,觀察表示式,觀看集合。
-
Watcher (與 Chrome 配合使用)
用於計算 Angular 應用程式中觀察者數量的簡潔 UI。
-
使用以下程式碼手動查詢角度應用程式中觀察者的數量(歸功於 @Words Jared 觀察者數量 )
(function() {
var root = angular.element(document.getElementsByTagName('body')),
watchers = [],
f = function(element) {
angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
watchers.push(watcher);
});
}
});
angular.forEach(element.children(), function(childElement) {
f(angular.element(childElement));
});
};
f(root);
// Remove duplicate watchers
var watchersWithoutDuplicates = [];
angular.forEach(watchers, function(item) {
if(watchersWithoutDuplicates.indexOf(item) < 0) {
watchersWithoutDuplicates.push(item);
}
});
console.log(watchersWithoutDuplicates.length);
})();
-
有幾個線上工具/網站可以提供廣泛的功能,以建立你的應用程式的配置檔案。
一個這樣的網站是: https : //www.webpagetest.org/
有了這個,你可以使用真正的瀏覽器(IE 和 Chrome)以及真正的消費者連線速度從全球多個地點進行免費的網站速度測試。你可以執行簡單測試或執行高階測試,包括多步驟事務,視訊捕獲,內容阻止等等。
下一步:
完成分析。它只會帶你走一半路。接下來的任務是將你的發現實際轉化為行動專案以優化你的應用程式。請參閱此文件 ,瞭解如何使用簡單的技巧提高角度應用程式的效能。
快樂編碼:)