Nối thêm JavaScript thay thế

1

Ngay từ đầu tôi đã làm điều này

for (var i=0; i<10000; i++) {
  $("BODY").append($("
").addClass("test-div"));
}

Mã này tạo ra thời gian chạy trung bình là 779. 463 mili giây. Điều này có nghĩa là phải mất hơn ba phần tư giây để nối các phần tử này vào DOM

Vậy vấn đề ở đây là gì?

Chà, có một vài - quá nhiều phản xạ và quá nhiều đối tượng jQuery. Chúng tôi sẽ giải quyết vấn đề sau trong bước tiếp theo, vì vậy hãy xem xét chỉnh lại dòng tại đây

Nói một cách đơn giản, chỉnh lại dòng là khi trình duyệt cần xử lý và vẽ trang web và đây là một trong những quy trình trình duyệt tốn kém nhất. Một trong những cách dễ nhất để cải thiện hiệu suất ứng dụng của bạn là giảm thiểu số lần chỉnh lại dòng và đó là điều chúng tôi sẽ thực hiện

Nhiều thao tác khác nhau có thể gây ra hiện tượng chỉnh lại dòng và không phải trình duyệt nào cũng giống nhau. Nhưng hãy yên tâm, việc thêm một phần tử vào DOM sẽ gây ra hiện tượng chỉnh lại dòng. Vì vậy, vấn đề rõ ràng với đoạn mã của chúng tôi là chúng tôi đang tạo 10.000 phản hồi. Một số trình duyệt có thể xử lý việc này một cách thông minh và giảm một số chi phí, nhưng chúng tôi có thể làm tốt hơn

2

Hãy khắc phục sự cố chỉnh lại dòng của chúng ta bằng cách tạo một nút chưa được thêm vào DOM. Sau đó, chúng tôi sẽ nối các div của mình vào nút này. Và cuối cùng, chúng tôi sẽ nối nút đơn này vào DOM, nút này sẽ kích hoạt một luồng phản xạ duy nhất

var $c = $("
").addClass("container");
for (var i=0; i<10000; i++) {
    $c.append($("
").addClass("test-div"));
}
$("BODY").append($c);

Điều này tốt hơn một chút nhưng vẫn không tuyệt vời. Thời gian chạy của chúng tôi bây giờ là 432. 524ms. Điều này vẫn còn khá tệ và chúng ta có thể làm nhiều điều để cải thiện

Vấn đề ở đây là chúng ta vẫn đang tạo quá nhiều đối tượng jQuery. Mặc dù chúng tôi đã giải quyết vấn đề chỉnh lại dòng, vẫn có rất nhiều chi phí để tạo một đối tượng jQuery. Tất nhiên, đối với một đối tượng, sự tiện lợi của jQuery vượt xa hiệu suất tối thiểu. Nhưng nếu chúng ta đang xử lý 10.000 yếu tố thì sự kém hiệu quả là điều đáng chú ý

Hãy xem điều gì sẽ xảy ra khi chúng ta bỏ qua việc sử dụng jQuery hoàn toàn và viết điều này bằng JavaScript đơn giản

var c = document.createDocumentFragment();
for (var i=0; i<10000; i++) {
    var e = document.createElement("div");
    e.className = "test-div";
    c.appendChild(e);
}
document.body.appendChild(c);

Thật đáng kinh ngạc, thay đổi này đã giảm tổng thời gian chạy của chúng tôi từ 432. 524ms đến 16. 237ms. Và điều này có ý nghĩa bởi vì jQuery thực sự cần một chút thời gian để tạo đối tượng. Hãy xem mất bao lâu để tạo một đối tượng jQuery so với. tạo phần tử bằng vanilla JavaScript

console.time("jquery div");
var jqDiv = $("
");
console.timeEnd("jquery div");
// jquery div: 0.272ms

console.time("js div");
var jsDiv = document.createElement("div");
console.timeEnd("js div");
// js div: 0.006ms

Đây là một sự khác biệt đáng kể - 0. 006ms so với. 0. 272ms. Mục đích của sự so sánh này không phải để nói rằng jQuery tệ mà là với tư cách là một nhà phát triển, bạn nên biết khi nào thì nên sử dụng nó và khi nào thì không. jQuery cung cấp rất nhiều chức năng không cần thiết cho mục đích của chúng tôi, vì vậy sẽ không hợp lý khi tạo 10.000 đối tượng jQuery với chi phí cao như vậy

3

Chúng tôi thực sự không phải tạo 10.000 nút. Thay vào đó, chúng ta có thể thấy điều gì xảy ra khi chúng ta sử dụng một chuỗi HTML dài

var s = "";
for (var i=0; i<10000; i++) {
    s += "
";
}
$("BODY").append(s);

Ở tuổi 69. 874ms, phiên bản này hoạt động tốt hơn nhiều so với phiên bản gốc của chúng tôi, nhưng không hoàn toàn tốt bằng phiên bản JavaScript thuần túy. Tuy nhiên, có một cải tiến nhỏ chúng ta có thể thực hiện. Nối chuỗi là tốn kém, đặc biệt là ở quy mô này. Hãy sử dụng một mảng các chuỗi và nối chúng lại với nhau

var a = [];
for (var i=0; i<10000; i++) {
    a.push("
");
}
$("BODY").append(a.join(""));

Điều này chạy trong 63. 885ms. Đây có lẽ không phải là một cải tiến đủ để nhấn mạnh, nhưng vì nó nhanh hơn nên chúng tôi sẽ giữ nguyên

Hãy đo lường chi phí sử dụng jQuery để nối thêm chuỗi. Như chúng ta đã học ở bước trước, sử dụng JavaScript thuần túy có thể nhanh hơn

var a = [];
for (var i=0; i<10000; i++) {
    a.push("
");
}
document.body.innerHTML = a.join("");

Sự khác biệt chính ở đây là chúng tôi không sử dụng jQuery. nối thêm. Thay vào đó, chúng tôi đang đặt thuộc tính InternalHTML trên phần thân thành chuỗi HTML của chúng tôi. Điều này chạy trong 22. 908ms nên sự cải thiện là rõ ràng. Nhưng chúng tôi vẫn không nhanh bằng phiên bản JavaScript thuần túy từ bước cuối cùng

4

Tóm lại, mã nhanh nhất là phiên bản JavaScript thuần túy

var c = document.createDocumentFragment();
for (var i=0; i<10000; i++) {
    var e = document.createElement("div");
    e.className = "test-div";
    c.appendChild(e);
}
document.body.appendChild(c);

Dựa trên những thí nghiệm này, có hai điểm chính

Trước tiên, hãy lưu ý thao tác nào sẽ gây ra hiện tượng chỉnh lại dòng. Đây là một quá trình tốn kém, và nó nên được giảm càng nhiều càng tốt

Thứ hai, hãy lưu ý về chi phí sử dụng jQuery. Đối với các hoạt động ở quy mô thấp, sự tiện lợi của jQuery thường sẽ lớn hơn chi phí thực hiện. Nhưng ở quy mô lớn, nên tránh sử dụng jQuery trừ khi thực sự cần thiết

Tôi có thể sử dụng cái gì thay vì appendChild?

Có append trong JavaScript không?

appendChild có nhanh hơn InternalHTML không?

Tôi nên sử dụng append hay appendChild?