đoàn sự kiện vs trực tiếp ràng buộc khi thêm các yếu tố phức tạp đến một trang

Question

Tôi có một số đánh dấu như thế này (các lớp học chỉ dành cho phụ diển):

<ol id="root" class="sortable"> 
    <li> 
    <header class="show-after-collapse">Top-Line Info</header> 
    <section class="hide-after-collapse"> 
     <ol class="sortable-connected"> 
     <li> 
      <header class="show-after-collapse">Top-Line Info</header> 
      <section class="hide-after-collapse"> 
      <div>Content A</div> 
      </section> 
     </li> 
     </ol> 
    </section> 
    </li> 
    <li> 
    <header/> 
    <section class="hide-after-collapse"> 
     <ol class="sortable-connected"> 
     <li> 
      <header/> 
      <section class="hide-after-collapse"> 
      <div>Content B</div> 
      </section> 
     </li> 
     </ol> 
    </section> 
    </li> 
</ol> 

Đó là, lồng danh sách sắp xếp. Tuy nhiên, plugin có thể sắp xếp đủ điều kiện vì mỗi li (sau đây là "mục") duy trì mức của nó, mặc dù các danh sách bên trong được kết nối. Các mục có tiêu đề luôn hiển thị và một phần hiển thị khi ở trạng thái mở rộng, được chuyển đổi bằng cách nhấp vào tiêu đề. Người dùng có thể thêm và xóa các mục từ cấp độ theo ý muốn; việc thêm một mục cấp cao nhất sẽ bao gồm một danh sách tổ trống bên trong nó. Câu hỏi của tôi là liên quan đến JS khởi của mặt hàng đó mới được tạo ra với: Trong khi họ sẽ chia sẻ một số chức năng thông thường, mà tôi có thể trang trải qua

$("#root").on("click", "li > header", function() { 
    $(this).parent().toggleClass("collapsed"); 
}); 

và

li.collapsed section { 
    display: none; 
} 

(câu hỏi phụ: đây sẽ là một nơi thích hợp để sử dụng chi tiết/tóm tắt các thẻ HTML5? Có vẻ như tôi không biết liệu những người đó có thể đưa nó vào thông số cuối cùng hay không, và tôi muốn chuyển đổi trượt, vì vậy có vẻ như tôi cũng cần JS cho điều đó. ném câu hỏi đến công chúng. Xin chào, quần chúng.)

Nếu danh sách gốc là phần tử duy nhất (có liên quan) được đảm bảo tồn tại khi tải trang, để .on() hoạt động hiệu quả, tôi phải liên kết tất cả các sự kiện với phần tử đó và đánh vần bộ chọn chính xác cho mỗi phần tử Tôi hiểu rôi. Vì vậy, ví dụ, để buộc các chức năng riêng biệt với hai nút ngay bên cạnh nhau, tôi phải đánh vần bộ chọn đầy đủ mỗi lần, & agrave; la

$("#root").on("change", "li > section button.b1", function() { 
    b1Function(); 
}).on("change", "li > section button.b2", function() { 
    b2Function(); 
}); 

Điều đó có chính xác không? Đó là trường hợp, nó có ý nghĩa hơn để từ bỏ .on() và ràng buộc các sự kiện của tôi tại thời điểm mục mới được thêm vào trang? Tổng số mặt hàng có thể sẽ có số lượng lớn nhất trong hàng chục, nếu điều đó tạo ra sự khác biệt trong phản hồi.

Answer 1

Bạn sẽ tạo ít chi phí CPU hơn trong việc ràng buộc các sự kiện bằng cách sử dụng $(<root-element>).on(<event>, <selector>) vì bạn sẽ ràng buộc với một phần tử "gốc" duy nhất thay vì có khả năng nhiều phần tử con đơn độc hơn (mỗi liên kết mất thời gian ...).

Điều đó đang được nói, bạn sẽ phải chịu thêm chi phí CPU khi các sự kiện thực tế xảy ra khi chúng phải bong bóng DOM lên phần tử "root".

Truyện ngắn: đại biểu lưu CPU khi ràng buộc trình xử lý sự kiện; liên kết tiết kiệm CPU khi sự kiện kích hoạt (ví dụ: người dùng nhấp vào một cái gì đó).

Vì vậy, tùy bạn quyết định điểm nào quan trọng hơn đối với hiệu suất. Bạn có sẵn CPU khi bạn thêm các phần tử mới không? Nếu như vậy thì ràng buộc trực tiếp với các phần tử mới sẽ là tốt nhất cho hiệu suất tổng thể, tuy nhiên nếu thêm các phần tử là một hoạt động chuyên sâu của CPU, bạn có thể muốn ủy quyền sự kiện ràng buộc và để sự kiện kích hoạt tạo thêm một số chi phí CPU từ tất cả các bong bóng.

Lưu ý rằng:

$(<root-element>).on(<event>, <selector>, <event-handler>) 

là giống như:

$(<root-element>).delegate(<selector>, <event>, <event-handler>) 

và rằng:

$(<selector>).on(<event>, <event-handler>) 

là giống như:

$(<selector>).bind(<event>, <event-handler>) 

.on() là mới trong jQuery 1.7 và nếu bạn đang sử dụng 1.7+ thì .delegate(<selector>, <event>, <event-handler>) chỉ là một đoạn đường tắt cho .on(<event>, <selector>, <event-handler>).

CẬP NHẬT

Dưới đây là một thử nghiệm hiệu suất cho thấy rằng nó là nhanh hơn để ủy ràng buộc hơn để ràng buộc vào mỗi yếu tố riêng lẻ sự kiện: http://jsperf.com/bind-vs-click/29. Rất tiếc, thử nghiệm hiệu suất này đã bị xóa.

CẬP NHẬT

Dưới đây là một thử nghiệm hiệu suất cho thấy sự kiện đó gây ra được nhanh hơn khi bạn liên kết trực tiếp đến các yếu tố chứ không phải ủy các ràng buộc: http://jsperf.com/jquery-delegate-vs-bind-triggering (Lưu ý rằng đây không phải là một thử nghiệm hiệu suất hoàn hảo kể từ khi phương pháp ràng buộc được bao gồm trong thử nghiệm, nhưng vì delegate chạy nhanh hơn trên ràng buộc nó chỉ có nghĩa rằng bind thậm chí còn nhanh hơn tương đối khi nói về kích hoạt)

Answer 2

kể từ khi trả lời chấp nhận có kiểm tra không chính xác (BTW: kiểm tra mã, hiệu suất đo của bạn, don không chỉ là một cách mù quáng thấp một số "quy tắc" - đây không phải là cách tối ưu hóa được thực hiện) và chỉ đơn giản là sai tôi gửi bài kiểm tra cố định: https://jsperf.com/jquery-delegate-vs-bind-triggering/49

trong đó chứng minh trên ví dụ đơn giản như không có khác biệt giữa phái đoàn hoặc trực tiếp ràng buộc

Các trường hợp duy nhất khi phái đoàn luôn luôn xấu là các sự kiện như di chuyển chuột và cuộn - được kích hoạt x lần mỗi giây. Đây là nơi bạn sẽ nhận thấy bất kỳ sự khác biệt hiệu suất.

Nếu bạn thậm chí có chênh lệch 1ms (sẽ không xảy ra, nhưng đây chỉ là một ví dụ) về một sự kiện - như lần nhấp - bạn sẽ không nhận thấy điều đó. Nếu bạn có chênh lệch 1ms trên sự kiện xảy ra 100 lần trong một giây - bạn sẽ thấy mức tiêu thụ CPU. Chỉ cần có hàng ngàn yếu tố sẽ không tác động tiêu cực đến hiệu suất của bạn với đoàn đại biểu - thực sự - đây là trường hợp khi chúng được sử dụng - để tránh hogging CPU khi gắn hàng nghìn trình xử lý sự kiện.

Vì vậy, nếu bạn thực sự cần một quy tắc để theo dõi (đừng làm điều đó) - hãy sử dụng ủy quyền trên mọi thứ ngoại trừ di chuyển chuột, cuộn và các sự kiện khác mà bạn có thể mong đợi liên tục.