5 Cải tiến Hiệu suất Góc vào năm 2022

Jul 25 2022
Tìm hiểu 5 cách để bạn có thể cải thiện hiệu suất của các ứng dụng Angular bị lag và chậm.
Tự hỏi tại sao một số phần của ứng dụng Angular của bạn vẫn còn chậm? Bài viết này sẽ chỉ cho bạn những cách mà bạn có thể nâng cao hiệu suất ứng dụng của mình. Bạn có thấy các ứng dụng Angular của mình bị lag và chậm nhưng bạn không biết làm thế nào để cải thiện chúng? Chúng ta hãy đi sâu vào bài viết này để tìm hiểu về 5 cách để cải thiện hiệu suất ứng dụng của bạn.

Tự hỏi tại sao một số phần của ứng dụng Angular của bạn vẫn còn chậm? Bài viết này sẽ chỉ cho bạn những cách mà bạn có thể nâng cao hiệu suất ứng dụng của mình.

Bạn có thấy các ứng dụng Angular của mình bị lag và chậm nhưng bạn không biết làm thế nào để cải thiện chúng? Chúng ta hãy đi sâu vào bài viết này để tìm hiểu về 5 cách để cải thiện hiệu suất ứng dụng của bạn.

1. ngZone

Rất nhiều nhà phát triển đã bỏ lỡ dịch vụ này do nhóm Angular cung cấp để nâng cao hiệu suất ứng dụng của họ. Theo mặc định, tất cả các hoạt động không đồng bộ như setTimeout , requestAnimationFrame , v.v. đều nằm trong vùng Angular, có nghĩa là nó sẽ kích hoạt phát hiện thay đổi trên thành phần và sẽ làm chậm trang web nếu thành phần đó lớn. Do đó, nếu bạn có các hàm không đồng bộ không yêu cầu phát hiện thay đổi trên DOM, bạn có thể chạy các hàm không đồng bộ bên trong dịch vụ bằng một phương thức được gọi là hàm gọi lại.ngZonerunOutsideAngular

2. Tách các thành phần

Nếu thành phần của bạn bao gồm một phần hoạt động (thông minh) và một phần không hoạt động (câm), bạn nên xem xét việc cấu trúc lại và chia chúng thành các thành phần thông minh và không hoạt động. Ví dụ, trong ví dụ dưới đây,

Tôi có một đầu vào và một danh sách dữ liệu. Phần đầu vào sẽ tiếp tục kích hoạt hành động sự kiện chính khi người dùng loại và nó kích hoạt kiểm tra phát hiện thay đổi cho toàn bộ thành phần mặc dù không có gì được thực hiện với phần danh sách. Hãy tưởng tượng danh sách là một danh sách phức tạp và việc phát hiện thay đổi có thể tốn kém trên đó.

Do đó, một cách tiếp cận tốt hơn sẽ là chia phần đầu vào và phần danh sách thành 2 thành phần riêng biệt và đặt nó dưới một thành phần mẹ. Theo cách này, các sự kiện chính trong InputComponent sẽ không ảnh hưởng và kích hoạt phát hiện thay đổi trên ListComponent. Nó có thể là một trình tiết kiệm lớn cho hiệu suất nếu dữ liệu danh sách của bạn rất lớn và chứa nhiều phép tính phức tạp.

3. onPush

Ngoài việc tách điểm các thành phần được đề cập ở trên, bạn cũng có thể điều chỉnh chiến lược Phát hiện thay đổi của thành phần của mình để cải thiện hiệu suất của thành phần. Theo mặc định, khi bạn tạo một thành phần bằng Angular CLI , chiến lược changeDetection mặc định sẽ là OnDefaultvà điều này làm cho DOM của bạn cập nhật bất cứ khi nào có thay đổi về dữ liệu của bạn trong thành phần đó. Angular kiểm tra các thay đổi trong một cây các thành phần. Vì vậy, nếu phần tử gốc hoặc gốc của bạn có thay đổi, nó sẽ kích hoạt cập nhật DOM cho các thành phần con và cháu của nó.

Bạn có thể cập nhật chiến lược ListComponent changeDetectionOnPush của mình để Angular chỉ kiểm tra và cập nhật DOM bất cứ khi nào bạn gọi nó.

Chèn ChangeDetectorRef vào phương thức khởi tạo thành phần của bạn và gọi phương thức markForCheck () để buộc thành phần của bạn và các thành phần con bên dưới nó kiểm tra các thay đổi và cập nhật DOM cho phù hợp. Ngoài ra, nếu có các thành phần con trong cây các thành phần của thành phần gốc / gốc này không yêu cầu cập nhật DOM bất kể thay đổi dữ liệu (thành phần câm), bạn có thể chọn tách changeDetector khỏi thành phần bằng cách sử dụng phương thức detach () .

Chèn changeDetectorRef vào thành phần của bạn:

Gọi detachphương thức trong hàm tạo để tách thành phần của bạn khỏi phát hiện thay đổi. Thay đổi nhỏ này sẽ cho phép bạn tiết kiệm hàng loạt bộ nhớ và tối ưu hóa chu kỳ kết xuất lại thành phần của bạn.

4. sử dụng Pipe thay vì các phương pháp

Liên kết mẫu góc thật tuyệt vời, bạn có thể liên kết các biến và cũng hoạt động với mẫu của nó. Nhiều người trong số các bạn giống như tôi, sử dụng một lời gọi hàm để chuyển đổi dữ liệu vì nó thuận tiện và dễ thực hiện.

Ví dụ: Nhập mục thêm vào danh sách
chức năng gọi
Thực hiện đường ống

Nhìn vào ví dụ đơn giản ở trên, người ta sẽ không thể nhận thấy bất kỳ sự khác biệt nào. Nhưng bạn có biết rằng lệnh gọi hàm sẽ được gọi trên mọi mục trong danh sách bất cứ khi nào một mục mới được thêm vào danh sách nhưng đường ống sẽ chỉ được gọi khi giá trị của mục trong danh sách thay đổi? Vì vậy, hãy tránh thực hiện lệnh gọi hàm trong mẫu của bạn bằng mọi giá trừ khi bạn biết mình thực sự đang làm gì, thay vào đó hãy luôn chọn tạo các đường ống thuần túy tùy chỉnh của riêng bạn để đối phó với việc chuyển đổi dữ liệu.

5. Sử dụng cuộn ảo hoặc cuộn vô hạn hoặc phân trang cho một danh sách dài các tập dữ liệu

Bạn có một danh sách dài các mục mà bạn cần hiển thị cho người dùng quản trị hoặc khách hàng của mình không? Có mất quá nhiều thời gian để trình duyệt của bạn hiển thị hơn 100 mục DOM đó trong ứng dụng web của bạn không? Đã đến lúc cân nhắc sử dụng chiến lược cuộn ảo hoặc cuộn vô hạn trong ứng dụng web của bạn. Cuộn ảo và cuộn vô hạn giúp tái sử dụng và tái chế các phần tử DOM trong trình duyệt để hiển thị các mục mà người dùng có thể xem được. Các mục bị ẩn trong danh sách sẽ không có trong DOM và do đó giúp tiết kiệm thời gian hiển thị cho ứng dụng web của bạn. Các chiến lược này giúp tối ưu hóa số lượng phần tử DOM mà bạn muốn hiển thị cho người dùng của mình trong một danh sách dài các mục nhất định và không hiển thị các mục đó trong danh sách không có trong chế độ xem tại thời điểm cuộn đó. Tôi sẽ không làm phiền bạn với các chi tiết ở đây.

Bạn có thể tìm hiểu thêm về cách cuộn ảo bằng Angular Material hoặc ngx-virtual-scroll . Bạn cũng có thể tìm hiểu thêm về tính năng cuộn vô hạn bằng cách sử dụng ngx -finity-scroll . Ngoài ra, bạn có thể truy cập trang web này bên dưới để tìm hiểu thêm các plugin và công cụ có sẵn để tối ưu hóa danh sách dài các mục có thể cuộn của bạn.

Tiền thưởng

Bạn có biết rằng bạn có thể cài đặt tiện ích mở rộng Angular Devtools Chrome để có thể đo lường hiệu suất của thành phần của mình trong trình duyệt khi bạn kiểm tra và phát triển chúng không?

Angular devtools

Khi bạn đã cài đặt tiện ích mở rộng, bạn có thể mở công cụ chrome dev của mình và tìm Angular trong danh sách các tab trong chrome dev tool. Bạn có thể bắt đầu ghi và thực hiện một hành động trong ứng dụng của mình và dừng ghi để phân tích hành động nào có hiệu suất đại tu.

Bản tóm tắt

Hy vọng rằng bài viết này đã cung cấp cho bạn một số manh mối về cách nâng cao hiệu suất của ứng dụng Angular của bạn. Sử dụng 5 điểm ở trên + tiện ích mở rộng Angular devtools để xác định hiệu suất hoạt động trong ứng dụng của bạn.

Hãy cho tôi biết trong phần nhận xét bên dưới nếu bạn có các mẹo nâng cao hiệu suất khác sẽ giúp tối ưu hóa các ứng dụng Angular. Tôi cũng muốn tìm hiểu về nó. Chúc mừng!

Nội dung khác tại PlainEnglish.io . Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi . Theo dõi chúng tôi trên TwitterLinkedIn . Kiểm tra Sự bất hòa trong cộng đồng của chúng tôi và tham gia Tập thể tài năng của chúng tôi .

© Copyright 2021 - 2022 | vngogo.com | All Rights Reserved