Angular 1.x遷移性能問題

我正在將一個巨大的angular 1項目從1.3.x升級到1.6.x，因爲我們需要最新版本中的一些補丁。更新後，似乎整個應用程序已經急劇放緩。我一直在瀏覽遷移文檔，但有什麼可能導致重大的緩慢下降？任何不好的代碼或陷阱會導致這種情況？我遇到的問題僅僅是視覺上的變化，比如ng-show和ng-hide緩慢而棘手。Angular 1.x遷移性能問題

這是升級前的CPU簡介：

這是CPU的profile升級後：

謝謝！

編輯：

讓我給多一點背景。我有一種感覺，這與消化週期有關。例如，我是一個導航欄，圖標將隱藏，另一個將顯示在懸停上。

這裏是什麼樣子的角1.3

這裏是什麼樣子的角1.6

我收到更新後用力迴流性能警告。另外，這個（重新計算樣式）是從角動畫的computeCssStyles函數（或者至少是它引導我朝向的代碼行）定向的。我也沒有在我的代碼中調用任何$ animate。這只是角度摘要方法的一個產物嗎？我還從遷移文檔中找到了關於可能對摘要進行更改的內容嗎？

代碼示例： showDropdown在懸停時從false更改爲true，反之亦然。因爲我不使用短期修復動畫在我的代碼的任何地方，但它似乎被解僱按照較新的角度摘要方法：

<i> ng-show="! showDropdown" </i><i> ng-show="showDropdown" </i>

編輯。我只是將動畫作爲部分短期修復來使用。

$animate.enabled(false);

來源

2017-03-17 Alexg2195

我知道這可能需要時間，但使用ng-if代替ng-show/hide怎麼辦？如果你隱藏了指令，它們仍然會以ng運行 - 如果它們不會被編譯，除非必要 - 這在運行時被隱藏的時候更少。另外，你的意思是哪些視覺變化？如果您只顯示/隱藏圖像，您的模型是否需要評估？也許你可以做一些工作，所以消化週期不被解僱 –

@ Gonzalo.-我會給ng - 如果試試。我將不得不通過很多指令來改變這一點。我所說的視覺變化與導航欄一樣簡單。我們有兩個不同的圖標可以隱藏和顯示變量。 '納克放映=「！showDropdown」納克放映=「showDropdown」' 當showDropdown變量改變它同時顯示的一瞬間，然後隱藏其他。 – Alexg2195

這個問題不可能被回答。它需要一個可以複製問題的例子。涉及視覺部件的事實從字面上說沒有任何意義。他們只是更新摘要。當然，他們會暴露滯後 - 因爲它們是可視的。 – estus

在JavaScript中管理內存很困難。這裏有幾個最佳實踐來提高加載頁面和釋放內存方面的性能。

手動刪除分離節點 - 着手刪除分離的對象。

var myNode = document.getElementById("bodyPanel"); 
    if(myNode !== null){ 
    while (myNode.firstChild) { 
    myNode.removeChild(myNode.firstChild); 
    } 
}

在每一個頁面切換，通話破壞Angularjs控制器內。此外JavaScript對象參考null

$scope.$on("$destroy",function() { 
    $window.off("resize.Viewport"); 
});

創建角度JS服務，以保持重要的數據在內存中，避免HTML5存儲系統獲取。
正如在評論中提到的，使用ng-if而不是ng-show。

來源

2017-03-27 11:57:19 Vish

Angular 1.x遷移性能問題

回答

相關問題