Các vấn đề về hiệu suất di chuyển góc 1.x

Question

Tôi đang nâng cấp một dự án góc 1 lớn từ 1.3.x lên 1.6.x vì chúng tôi yêu cầu một số bản vá trong phiên bản mới nhất. Sau khi cập nhật, có vẻ như toàn bộ ứng dụng đã làm chậm đáng kể. Tôi đã xem xét tài liệu di chuyển nhưng có bất kỳ điều gì có thể gây ra chậm lớn không? Bất kỳ mã xấu hoặc gotchas có thể gây ra điều này? Tôi đang gặp vấn đề chỉ với những thay đổi trực quan như ng-show và ng-hide bị chậm và co giật.

Đây là hồ sơ cá nhân CPU trước khi nâng cấp:

Đây là hồ sơ cá nhân CPU sau khi nâng cấp:

Cảm ơn bạn!

CHỈNH SỬA:

Hãy để tôi cung cấp thêm một chút ngữ cảnh. Tôi có cảm giác điều này liên quan đến chu trình tiêu hóa. Ví dụ, tôi là một thanh điều hướng nơi một biểu tượng sẽ ẩn và một biểu tượng khác sẽ hiển thị trên di chuột.

Đây là những gì nó trông giống như trong góc 1,3

Đây là những gì nó trông giống như trong góc 1,6

Tôi nhận được một cảnh báo hiệu suất reflow cưỡng bức sau khi cập nhật. Ngoài ra điều này (tính toán lại kiểu) được định hướng từ hàm computeCssStyles của angular-animate (hoặc ít nhất đó là dòng mã mà nó hướng tôi tới). Tôi cũng không gọi bất kỳ $ animate nào trong mã của tôi. Đây có phải chỉ là một sản phẩm của phương pháp tiêu hóa góc? Ngoài ra, có bất kỳ điều gì tôi thiếu trong tài liệu di chuyển về các thay đổi có thể có để tiêu hóa không?

Ví dụ mã: showDropdown được thay đổi từ false thành true trên di chuột và ngược lại.

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

EDIT: sửa chữa ngắn hạn như tôi không sử dụng động bất cứ nơi nào trong mã của tôi, nhưng nó dường như được bắn theo phương pháp mới hơn góc tiêu hóa. Tôi chỉ tắt hoạt ảnh dưới dạng bản sửa lỗi ngắn hạn một phần.

$animate.enabled(false); 

Answer 1

Quản lý bộ nhớ khó trong JavaScript. Dưới đây là một số phương pháp hay nhất để cải thiện hiệu suất về tải trang và giải phóng bộ nhớ.

• Xóa nút bị tách thủ công - Làm việc để xóa đối tượng tách rời.

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

• Trên mỗi switch trang, gọi phá hủy bên trong Angularjs điều khiển. Cũng JavaScript Object Reference để null

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

• Tạo góc js dịch vụ để giữ cho dữ liệu quan trọng trong bộ nhớ để tránh lấy từ hệ thống lưu trữ HTML5.

• Như đã đề cập trong nhận xét, hãy sử dụng ng-if thay vì ng-show.