Làm thế nào để ngăn chặn rò rỉ bộ nhớ trong Angular

Điều gì tuyệt vời khi học Angular? Đó là khi bạn đã áp dụng được Angular xây dựng ra một ý tưởng phần mềm nào đó. Tuy nhiên, bạn đã làm tốt nhất có thể cho đến lúc nhận ra nó không hoạt động tốt? Vậy thì làm thế nào để kiểm tra? Bạn chỉ cần mở ứng dụng đó lên trong trình duyệt, mở trong khoảng 60 phút (nhớ để pin laptop thật đầy, không thôi sẽ bị gián đoạn không check được), khi trang bắt đầu thu thập dữ liệu bạn nên kiểm tra xem mức dử dụng bộ nhớ đó như thế nào.



Mỗi khi bạn tạo một subscription hay một tham chiếu đến bộ lọc cho observable, nếu bạn không cẩn thận và hủy đăng ký thì tham chiếu sẽ nằm trong bộ nhớ ngay cả khi thành phần bạn tạo sẽ bị phá hủy. Điều này được gọi là rò rỉ bộ nhớ có thể gây ra một vấn đề nghiêm trọng phụ thuộc vào kích thước của ứng dụng của bạn.
Hủy đăng ký
Hủy đăng ký là giải pháp đơn giản nhất cho vấn đề này, bất cứ khi nào bạn tạo đăng ký, bạn phải giữ tham chiếu đến đăng ký đó và khi bạn đã hoàn tất đăng ký, bạn phải gọi .unsubscribe trên tham chiếu.
Việc sử dụng móc vòng đời của ngOnDestroy rất quan trọng ở đây, nó sẽ được gọi khi thành phần sắp bị phá hủy. Một vấn đề với cách tiếp cận này là bạn phải giữ một tham chiếu đến tất cả các observable mà bạn đang tạo ra trong thành phần của bạn.
TakeUntil
Cách tiếp cận trước đó có một vấn đề mà chúng ta cần phải tạo một tham chiếu cho tất cả các biến và để tránh vấn đề đó, chúng ta có thể sử dụng toán tử takeUntil để hủy đăng ký. takeUntil là một toán tử rxjs có một observable như một đối số. Nó sẽ giữ cho đăng ký đầu tiên tồn tại cho đến khi lần thứ hai observable được kết thúc.
Async Pipe
Khi có thể được sử dụng và sử dụng đúng cách, đây là phương pháp lý tưởng so với hai phương pháp đầu tiên. Đường async có một observable như một đối số và trả về giá trị từ trực tiếp observable tới mẫu. Vì vậy, khi một thành phần bị phá hủy, chúng tôi không cần phải làm bất kỳ điều gì vì Async Pipe sẽ xử lý việc hủy đăng ký khỏi các thành phần observable. Đây là cách đăng ký hiệu quả nhất và hủy đăng ký các observable.
Có một vài cảnh báo như bạn không thể sử dụng lại đăng ký khi sử dụng async pipe. Bạn buộc phải sử dụng nhiều async cho cùng một observable mà sẽ tạo nhiều đăng ký nhưng có nhiều phương pháp khác nhau để khắc phục những vấn đề đó.

BTV.Trần Thị Thu Trang
Phòng Truyền Thông IMIC Technology Việt Nam
Hotline: 0916 878 224
Email: trangttt2@imic.edu.vn
Share:

ĐỐI TÁC LIÊN KẾT TUYỂN DỤNG NHÂN SỰ CỦA IMIC TECHNOLOGY

IMIC Technology

IMIC Technology tự hào là doanh nghiệp đầu tiên tại Việt Nam triển khai các Chương trình Đào tạo chuyên môn dự án cho Học viên ngành CNTT/CNPM. Cũng là một trong những doanh nghiệp đạt được nhiều giải thưởng lớn trong lĩnh vực này. Góp phần phát triển mạnh ngành CNTT/CNPM tại nước ta hiện nay.