2013-01-23 43 views
7

Batarang trên tab hiệu suất cho thấy rằng trên gốc của ứng dụng, góc là chức năng gọi giống như sau: function (a){var e,f,i=a.$eval(h),m=hc(i,.Các vấn đề về hiệu suất angular.js

Theo batarang nó rất chậm và khi tôi nhận được nhiều hàng hơn trên ứng dụng, nó sẽ làm chậm ứng dụng và làm hỏng Firefox (mặc dù Chrome vẫn xử lý nó). Vậy nó đang làm gì vậy? Lam sao tôi co thể sửa no?

+3

Bạn đã thử sử dụng phiên bản chưa được sửa đổi để bạn có thể xem thêm thông tin? –

+1

gọi là ngRepeatWatch – Agzam

+0

nó bắt đầu bằng cách lấy 80% thời gian, và từ từ xuống cấp, nhưng không bao giờ giảm xuống dưới 50% – Agzam

Trả lời

16

Một cái gì đó cần cân nhắc khi xây dựng ứng dụng Góc nơi bạn đang mở rộng động nội dung của một ngRepeat. Mỗi lần bạn thiết lập lại, thiết lập đồng hồ. Mỗi {{binding}} hoặc ngModel bạn thực hiện bên trong lặp lại đó, thiết lập một đồng hồ khác, v.v. Mỗi người trong số đó tạo ra các cá thể chức năng và đối tượng, và cũng cần phải được xử lý trên mỗi $ digest. Vì vậy, nếu bạn gặp sự cố về hiệu suất, bạn có thể cần phải triển khai chỉ thị tùy chỉnh ghi dữ liệu của bạn mà không cần thiết lập những đồng hồ thừa đó, vì vậy bạn có hiệu suất cao hơn một chút. Đó là 2 xu của tôi.

+0

bạn có thể tinh chỉnh đồng hồ 'ngrepeat', vì vậy nó sẽ kiểm tra những thay đổi sau mỗi giây xác định, mà không đưa ra chỉ thị tùy chỉnh? – Agzam

+3

Bạn có thể? Có lẽ; Các khung công tác JavaScript cực kỳ dễ uốn. Tôi không biết rằng tôi sẽ thử mặc dù. Bạn có thể sẽ tốt hơn nhiều với một chỉ thị tùy chỉnh, và nó có khả năng là rất ít công việc để viết/duy trì các chỉ thị tùy chỉnh hơn nếu bạn sẽ thay đổi một cái gì đó là cốt lõi để Angular như chỉ thị ngRepeat. –

+0

Câu trả lời này được liên kết từ các vị trí khác trên SO nhưng thực sự có thể hưởng lợi từ một ví dụ. Tôi hiểu những gì bạn đang nói, nhưng không có một ví dụ về làm thế nào để thực hiện một chỉ thị mà kết quả đầu ra một mẫu phức tạp mà không tạo thêm đồng hồ, tôi là một chút bị mất. Cảm ơn! –

2

Vì vậy, tôi tình cờ gặp những tháng này sau khi câu hỏi được hỏi khi tôi có những gì tôi nghĩ là một vấn đề tương tự. Hãy để tôi mô tả vấn đề của tôi và giải pháp của tôi (mà không liên quan đến một chỉ thị) và bạn có thể xem nó có áp dụng cho bạn hay không.

Tôi đang xây dựng một bảng. Trước tiên, tôi muốn yêu cầu thông tin cho tôi biết những hàng nào nằm trong bảng, sau đó tôi yêu cầu thêm thông tin điền vào các ô của bảng. Vì vậy, tôi muốn nhận được yêu cầu đầu tiên và thêm tất cả các hàng vào bảng, sau đó yêu cầu dữ liệu ô. Tôi muốn lấy dữ liệu ô theo hàng, nhưng trong một bảng lớn, điều này vẫn sẽ có nhiều yêu cầu. Khi tôi lấy lại dữ liệu ô cho hàng đó, tôi sẽ điền nó vào.

Điều này tạo ra hiệu ứng thực sự tuyệt vời, tất cả các ô có biểu tượng xoay đang chờ dữ liệu. NHƯNG, nó làm cho nó thực sự chậm. Trong Chrome, điều đó là tốt, trình duyệt sẽ làm chậm một số, nhưng nó sẽ tiếp tục hoạt động. Nhưng trong FF, nó sẽ nhận được sự phiền phức "kịch bản bận rộn hoặc không đáp ứng" messsage. Nếu bạn nhấp vào Tiếp tục, nó sẽ hoạt động tốt, nhưng nếu bạn nhấp vào "Hủy", bạn sẽ dừng tập lệnh và không có gì có hiệu quả.

Vì vậy, đây là giải pháp mà tôi đã đưa ra. Không yêu cầu chỉ thị. Tất cả những gì tôi đã làm là xây dựng dữ liệu cho mỗi hàng hoàn toàn, và chỉ sau đó thêm hàng vào biến được sử dụng bởi ng-repeat. Bằng cách này nó là MUCH nhanh hơn. Các hàng điền vào khi nó lấy lại tất cả dữ liệu, đồng hồ $ vẫn còn ở đó, nhưng bạn không kích hoạt tấn của chúng cùng lúc và bạn vẫn có thể thay đổi dữ liệu sau (trong bảng của tôi, bạn có thể chỉnh sửa từng ô của bảng để có thể thay đổi dữ liệu dễ dàng sau đó là quan trọng).

Hy vọng điều này sẽ giúp ai đó.

+0

Vâng, trong trường hợp của tôi, hóa ra nó không phải là vấn đề của góc cạnh, mà là của DOM nói chung. Bạn không thể cập nhật quá nhiều phần tử cùng một lúc, ngay cả khi bạn đặt chúng trong hàng đợi, với số lượng hạn chế các thành phần và chỉ cập nhật một vài phần tử theo định kỳ, quá trình này trở nên liên tục ($ watch sẽ tiếp tục thêm các phần tử được cập nhật). Và cập nhật các phần tử DOM trong bất kỳ trình duyệt nào vẫn còn chậm đáng kể, đặc biệt nếu bạn cần chạy một số logic ngay trước khi cập nhật (ví dụ: datetime liên quan), javascript không thể chạy trong nhiều chủ đề – Agzam

+0

@Agzam: Trên thực tế, Javascript có thể chạy nền chủ đề ... trừ khi người dùng của bạn có IE <= 9. Tất nhiên là họ làm. Ngay sau khi mọi người bắt đầu sử dụng một trình duyệt thực sự, vấn đề này sẽ được giải quyết :) –

Các vấn đề liên quan