Trình xử lý sự kiện, bao đóng và thu gom rác trong Javascript

Question

Tôi chưa gặp sự cố rò rỉ bộ nhớ trong ứng dụng của mình, nhưng tôi lo lắng về các sự cố có thể xảy ra trong tương lai. Tôi muốn biết nếu bạn làm điều gì đó như thế này:

SomeClass.prototype.someMethod= function() { 
    var that= this 
    this.$div2.click(function() { 
     that.someMethod2(); 
    }); 
} 

Và giả sử điều này. $ Div2 được thêm vào div khác. $ Div1. Nếu tôi gọi

this.$div1.remove(); 

và sau đó mất tham chiếu của cá thể SomeClass của tôi, ví dụ SomeClass có bị thu gom rác không? Và điều gì về phần tử HTML này. $ Div2? điều này. $ div2 sẽ không nằm trong DOM vì nó được nối vào nó. $ div1.

Tôi hỏi điều này vì trình xử lý sự kiện trong này. $ Div2 có thể giữ tham chiếu đến phần tử HTML này. $ Div2 và cũng giữ tham chiếu đến thể hiện của SomeClass thông qua việc đóng vì biến "đó".

Vì vậy, tôi nên quan tâm đến việc xóa đúng tất cả các sự kiện và các phần tử HTML như thế này? Hoặc đơn giản là xóa phần tử "root" (điều này. $ Div1) giải quyết được vấn đề?

Answer 1

this.$div2 được nối vào this.$div1. Nếu tôi gọi this.$div1.remove(); và sau đó mất tài liệu tham khảo của cá thể SomeClass của tôi thì cá thể SomeClass có bị thu gom rác không?

Có, khi tất cả các tham chiếu đến nó bị mất - cũng như thông qua trình xử lý sự kiện, ví dụ có thể bị thu gom rác.

Còn phần tử HTML this.$div2 thì sao? this.$div2 sẽ không nằm trong DOM vì nó được thêm vào this.$div1.

Việc cho dù hiện tại có được đính kèm với DOM hay không. Nếu một số tham chiếu đối tượng không thu thập được $div1, nó cũng có thể truy cập nút con của nó $div2 và trình xử lý sự kiện của một người, do đó trường hợp được tham chiếu từ trình xử lý sẽ không thể thu thập được.

Tôi yêu cầu này bởi vì xử lý sự kiện trong this.$div2 có thể giữ một tham chiếu đến các phần tử HTML this.$div2 và cũng giữ một tham chiếu đến thể hiện của SomeClass thông qua việc đóng cửa vì biến "mà".

Đó là một tham chiếu vòng tròn và nên được xử lý tốt bằng các công cụ (khi không ai trong số các đối tượng bên trong vòng tròn được tham chiếu từ bên ngoài nó có thể được thu thập). Tuy nhiên, (cũ?) Internet Explorers không làm điều này khi một đối tượng DOM được tham gia vào vòng tròn.

Vì lý do đó, .remove jQuery method (code) gọi nội bộ số (internal) cleanData method làm gián đoạn tất cả người nghe sự kiện.

Vì vậy, tôi nên quan tâm đến việc xóa đúng tất cả các sự kiện và phần tử HTML như thế này? Hoặc đơn giản là xóa phần tử "root" (điều này. $ Div1) giải quyết được vấn đề?

Có, gọi remove trên trình bao bọc jQuery tự động xóa tất cả các sự kiện (từ tất cả các phần tử con) và nút DOM.

Answer 2

Tôi có nên quan tâm đến việc xóa đúng tất cả các sự kiện và thành phần HTML như thế này?

Câu trả lời ngắn gọn là Không! ít nhất trong 99% các trường hợp, nó sẽ không quan trọng trong bất kỳ cách nào vì bộ nhớ được sử dụng bởi một phần tử DOM là tầm thường so với bộ nhớ tổng thể được sử dụng bởi một trang web. Tuy nhiên nó luôn luôn là một thực hành tốt để phát hành bộ nhớ được sử dụng bởi xử lý các đối tượng không cần thiết, nhưng bạn không thể nói rằng GC chắc chắn sẽ phát hành bộ nhớ được sử dụng bởi các yếu tố bởi vì thu gom rác là hoàn toàn lên đến trình duyệt! Về lý thuyết GC chỉ nên khởi động khi không có tham chiếu đến phần tử DOM, ít nhất đó là cách Chrome works, nhưng bằng các ngôn ngữ như JavaScript, bạn không nói rõ thời gian chạy bạn đã hoàn thành với đối tượng, mọi thứ trở nên lộn xộn trong JavaScript một cách nhanh chóng: một hàm có thể truyền đối tượng vào một số hàm khác, đối tượng có thể được lưu lại như một thành viên trong một đối tượng khác, một đối tượng có thể được tham chiếu thông qua việc đóng vv, vì vậy nó hoàn toàn phụ thuộc vào trình duyệt như thế nào và những gì để thu thập!

Trong trường hợp bạn xóa div1 giải phóng tài liệu html và phần tử sẽ không hiển thị trong chế độ xem, trên thực tế, phương pháp remove của jQuery sẽ loại bỏ tất cả các sự kiện, thuộc tính expando và phần tử con được gắn với phần tử cùng với phần tử chính nó, tuy nhiên bạn giữ một tham chiếu của div1 và div2 trong một đối tượng khác làm cho cả hai phần tử DOM Các phần tử Orphan! loại bỏ SomeClass biến mẫu giải phóng tất cả các tham chiếu đến các phần tử DOM làm cho chúng trở thành ứng cử viên cho việc thu gom rác nhưng ở đây có biến số that phức tạp khiến nguyên tố DOM thực hiện tham chiếu đến cá thể SomeClass thông qua clusure! Vấn đề này được biết đến như Circular Reference trong IE:

Đối tượng JavaScript và các yếu tố DOM lưu trữ tham chiếu tới một nguyên nhân khác thu gom rác của Internet Explorer để không đòi lại bộ nhớ , dẫn đến rò rỉ bộ nhớ

You can read more about it here

Sự rò rỉ đặc biệt này chủ yếu là lịch sử quan tâm đến IE < 8, nhưng một ví dụ tốt về việc phá vỡ liên kết vòng tròn là tránh sử dụng biến số that, thay vào đó hãy sử dụng proxy hoặc delegate để thay đổi ngữ cảnh của trình xử lý sự kiện thành một số ngữ cảnh cụ thể.

ECMA 5th bind method là bỏ thuốc lá thay đổi bối cảnh hữu ích khi nói đến xử lý sự kiện DOM, đây là một bộ xử lý đơn giản dựa trên mã của bạn mà không sử dụng biến đóng cửa:

this.$div2.click((function() { 
     this.someMethod2(); 
    }).bind(this)); 

Answer 3

Nếu bạn sẽ tạo ra yếu tố động, sau đó gán cho họ các sự kiện . tôi nghĩ rằng mã của bạn không phải là một cách hay để làm điều đó. bạn nên làm theo cách này:

cho các yếu tố cố định nếu bạn cần một sự kiện, sử dụng hai chức năng này; cái đầu tiên được gọi trong hàm tạo, cái thứ hai trong hàm hủy.

on_Events: function() { 
    $('your_form').on('event_name', {element_Selector}, callback_function) 
}, 
off_Events: function() { 
    $('your_form').off('event_name', {element_Selector}, callback_function) 
} 

cho các đối tượng động. thêm sự kiện khi tạo phần tử và xóa các sự kiện này ngay trước khi hủy phần tử.