Có tác động hiệu quả trong việc sử dụng trực tiếp thay vì liên kết trong jQuery không?

Question

Tôi đã tìm thấy một số câu hỏi liên quan đến live và bind, nhưng không có câu hỏi nào liên quan đến hiệu suất. Tôi nghĩ rằng tiêu đề là khá rõ ràng, do đó, có một tác động hiệu suất trong việc sử dụng live trong jQuery? Tại sao tôi yêu cầu này là beacuse bạn phải làm tra cứu mọi lúc sự kiện này được bắn khi sử dụng live và tôi nghĩ rằng điều này có thể ảnh hưởng đến hiệu suất một cách tiêu cực. Hoặc là jQuery đang thực hiện một số công cụ ma thuật để tăng tốc độ này, như nghe một số loại sự kiện được kích hoạt khi có thứ gì đó được thêm vào DOM?

Answer 1

Nói chung, nó có hiệu suất tổng thể tốt hơn để sử dụng .live()/.delegate() khi bạn có nhiều (...) thành phần trên trang web của bạn cần phải có trình xử lý sự kiện. Nó là tốn kém hơn để ràng buộc xử lý sự kiện 50x đến 50 nút khác nhau hơn là chỉ để ràng buộc một xử lý sự kiện cho một phụ huynh phổ biến của 50 yếu tố (mà về cơ bản là, những gì .live() không).

Giờ đây, người ta có thể tranh luận, "tốt, tuyệt vời, nhưng điều này đi kèm với sự kiện bong bóng trên cao", điều này hoàn toàn chính xác. Đó là lý do tại sao .delegate() được giới thiệu. .live() luôn liên kết một trình xử lý với số document.body rõ ràng là phụ huynh của bất kỳ mã con nào trong đánh dấu của bạn. Tuy nhiên, .delegate() lấy một đối số, trong đó bạn có thể chỉ định "mẫu số chung thấp nhất", có nghĩa là parentnode gần nhất được chia sẻ bởi các phần tử mà bạn muốn có trình xử lý sự kiện. Điều này làm giảm chi phí thực sự về không.

Tôi phải thừa nhận rằng tôi chưa bao giờ đo điểm chuẩn (chưa) tại thời điểm đó nên sử dụng "ràng buộc trực tiếp". Nhưng sau đó một lần nữa, nó có ý nghĩa ngay sau khi bạn có nhiều hơn một yếu tố để ràng buộc xử lý. Chỉ có một thực tế là chỉ có ONE chức năng thay vì N có vẻ thuận tiện cho tôi.

Answer 2

Nhìn từ góc độ bộ nhớ, live hoạt động tốt hơn. bind phải đính kèm cùng một sự kiện vào mọi mục trong mục tiêu lựa chọn.

Từ góc độ hiệu suất thực tế, live có chi phí nhỏ với séc is, nhưng điều này sẽ không đáng kể.

Đây là một thực sự đơn giản hóa live -like cách tiếp cận:

function live(event, selector, callback) { 
    $(document).bind(event, function() { 
    if ($(this).is(selector)) { 
     return callback(); 
    } 
    }); 
} 

Answer 3

Cách .live công trình là: Sự kiện này được liên kết với một trong các nút cha mẹ. Vì vậy, thực sự không có tra cứu mỗi khi sự kiện được bắn nhưng với chi phí của phương pháp này được hỗ trợ ít hơn nhưng IE. Tôi khuyên bạn nên gắn bó với .bằng số. Nếu bạn phải liên kết sự kiện với nhiều yếu tố, hãy sử dụng phương thức .giao tiếp.

docs

Answer 4

Các jQuery giải thích chính xác cách thức hoạt động:

tổ chức sự kiện Phái đoàn Các .live() phương pháp có khả năng ảnh hưởng đến các yếu tố chưa được thêm vào DOM thông qua việc sử dụng các đoàn đại biểu sự kiện: a trình xử lý được liên kết với một phần tử tổ tiên chịu trách nhiệm cho các sự kiện được kích hoạt trên các phần tử con của nó. Trình xử lý được chuyển tới .live() không bao giờ bị ràng buộc với một phần tử; thay vào đó, .live() liên kết một trình xử lý đặc biệt với gốc của cây DOM.Trong ví dụ của chúng tôi, khi phần tử mới được nhấp, các bước sau xảy ra:

1. Sự kiện nhấp chuột được tạo và chuyển đến để xử lý.
2. Không có trình xử lý nào được liên kết trực tiếp với, do đó sự kiện sẽ phát tán lên cây DOM.
3. Sự kiện bong bóng lên cho đến khi nó đến gốc của cây, đó là nơi .live() liên kết các trình xử lý đặc biệt của nó theo mặc định.
   • Kể từ jQuery 1.4, sự kiện bubbling có thể tùy ý dừng lại ở phần tử DOM "ngữ cảnh".
4. Trình xử lý nhấp chuột đặc biệt được ràng buộc bởi .live() thực thi.
5. Trình xử lý này kiểm tra mục tiêu của đối tượng sự kiện để xem liệu nó có nên tiếp tục hay không. Thử nghiệm này được thực hiện bằng cách kiểm tra xem $ (event.target) .closest ('. Clickme') có thể định vị một phần tử phù hợp hay không.
6. Nếu tìm thấy phần tử phù hợp, trình xử lý gốc được gọi trên đó.

Vì thử nghiệm ở bước 5 không được thực hiện cho đến khi sự kiện xảy ra, các phần tử có thể được thêm vào bất cứ lúc nào và vẫn phản hồi sự kiện.

Vì vậy, điều đầu tiên bạn đã nói. Nó sẽ kiểm tra khi nào sự kiện diễn ra.