DOM thao tác sử dụng các chức năng có nguồn gốc từ thực hiện các hoạt động đơn giản. Các nhà cung cấp trình duyệt tối ưu hóa chúng. Bạn đang xây dựng hàng từ HTML. Nội bộ jQuery đang sử dụng .innerHTML để xây dựng bộ sưu tập mà sau đó các bản vá lỗi vào trình phân tích cú pháp siêu nhanh của trình duyệt.
Lựa chọn chậm so với mã JS cần lặp lại DOM nhiều lần. Các trình duyệt mới hơn có xử lý lựa chọn gốc cung cấp các tăng tốc đáng kể cho JS dựa trên bộ chọn. Khi thời gian di chuyển trên điều này sẽ ít hơn của một vấn đề.
Sau đây là cách truy vấn trong câu hỏi, $(".checkbox input", row), phá vỡ:
row.getElementsByTagName('*');- cho vòng qua mọi phần tử trở lại (tất cả các yếu tố trong hàng) và thử nghiệm
elements[i].className với /(\s|^)checkbox(\s|$)/.
- cho mỗi vòng lặp vẫn còn lại và thu thập
matched[i].getElementsByTagName('input');
- duy nhất bộ sưu tập cuối cùng.
Điều này khác với jQuery 1.3 vì động cơ của nó di chuyển qua bộ chọn theo cách khác, bắt đầu với nhận tất cả các yếu tố đầu vào và sau đó thử nghiệm các phần tử gốc.
Hãy nhớ rằng các công cụ chọn JS thực hiện nhiều thông số kỹ thuật chọn CSS hơn là thực sự có thể sử dụng với CSS (hoặc được thực hiện bởi trình duyệt hiện tại). Khai thác này, và kiến thức về các công cụ, chúng ta có thể tối ưu hóa bộ chọn có thể được tối ưu hóa trong một vài cách khác nhau:
Nếu bạn biết những gì yếu tố gõ .checkbox là:
$("td.checkbox input", row);
Nó là nhanh hơn cho bộ lọc đầu tiên cho loại và sau đó cho lớp chỉ cho những trận đấu đó. Điều này không áp dụng cho một tập hợp con các phần tử rất nhỏ, nhưng điều đó gần như không bao giờ xảy ra ở dạng praxis.
Kiểm tra lớp đơn là chậm nhất trong số selectors people actually use phổ biến nhất.
lựa chọn đơn giản hơn:
$("input[type=checkbox]", row);
Một vòng lặp là nhanh hơn so với hai vòng. Điều này chỉ tìm thấy các yếu tố đầu vào và sau đó trực tiếp lọc chúng theo thuộc tính type. Vì các phần tử con/con không bao giờ được sử dụng, độc đáo cũng có thể bị bỏ qua (và các công cụ thông minh sẽ cố gắng làm điều này vì duy nhất là chậm).
Một bộ chọn trực tiếp hơn:
$("td:first.checkbox input", row);
Một bộ chọn phức tạp hơn thực tế có thể nhanh hơn nếu nó là trực tiếp hơn (YMMV).
Nếu có thể, di chuyển bối cảnh tìm kiếm lên đến mức bảng:
Bằng cách này, tôi có nghĩa là thay vì lặp qua các hàng, và tìm kiếm các hộp kiểm trong mỗi người, để họ một mình cho đến sau lặp lại và sau đó chọn tất cả chúng tại một thời điểm:
$("tr td:first.checkbox input", table);
Điểm này là loại bỏ chi phí để kích hoạt công cụ chọn lên nhiều lần, nhưng thay vào đó làm mọi thứ trong một đoạn. Điều này được trình bày ở đây cho đầy đủ hơn là một cái gì đó mà tôi nghĩ rằng sẽ trả về tốc độ lớn.
Đừng chọn:
Build hàng từ bit, gán các sự kiện như bạn đi.
var row = $('<tr></tr>');
var cell = $('<td class="checkbox"></td>').appendTo(row);
$('<input type="checkbox" name="..."/>').appendTo(cell).click(/* ... */);
Điều này có thể là không thể vì lý do Ajax hoặc các mẫu khác ngoài tầm kiểm soát của bạn. Ngoài ra, tốc độ có thể không đáng để biến mã của bạn thành loại lộn xộn này, nhưng đôi khi điều này có thể có ý nghĩa.
Hoặc nếu không có cách nào phù hợp với bạn hoặc trả lại hiệu suất quá, thì có thể đã đến lúc phải suy nghĩ lại toàn bộ phương pháp. Bạn có thể gán một event listener cao lên cây và lấy những sự kiện đó, thay vì dụ mỗi phần tử:
$('table').change(function(e){
// you may want a faster check...
if ($(e.target).is('input[type=checkbox]')) {
// do some stuff ...
}
});
Bằng cách này bạn không làm bất cứ điều gì trừ khi và cho đến khi, người dùng thực sự yêu cầu nó. Nhanh nhất. :-)
ummm. này là số lẻ. Hai người đã cho tôi một giải pháp làm việc, nhưng sau đó bài viết của họ biến mất. Dù sao, có vẻ như việc loại bỏ các tên lớp từ các bộ chọn sẽ tăng tốc độ lên rất nhiều thứ. Câu trả lời của Christoph, để sử dụng sự kiện phái đoàn thực sự có vẻ tốt nhất với tôi, nhưng là một sự thay đổi lớn hơn. – morgancodes