Phân tích chi tiết của 3 commons cách tạo DOM trong JS và phương pháp tốt nhất.
Tôi sẽ cung cấp 3 cách để tạo DOM lớn và ưu điểm và nhược điểm của chúng, và tất nhiên là cách tối ưu nhất để tạo DOM lớn và tại sao. Điểm mấu chốt là khi tạo DOM trong js, các phương thức JS và DOM gốc là bạn của bạn, không sử dụng Jquery trừ khi không có cách nào khác (điều này không chắc chắn).
Kiểm tra dữ liệu để so sánh: Đã tạo 400 hàng với 5 cột và được nối vào DOM. testData là danh sách các đối tượng mà bạn nhận được từ chương trình phụ trợ dưới dạng json để tạo bảng.
đính kèm Execution time kết quả kiểm tra ảnh chụp cho các trình duyệt khác nhau 
HTML
<div id="employeeListContainer1"></div>
<table id="employeeList2">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Title</th>
<th>ID</th>
<th>Department</th>
</tr>
</thead>
cách 1: String nối (Tối ưu hóa Hầu hết cách về hiệu suất trên các trình duyệt)
var tableElementContainer1 = document.getElementById("employeeListContainer1"),
temptableHolder = '<table><thead><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>ID</th><th>Department</th></tr></thead><tbody>';
for(var i=0,len=testData.length; i<len; i++){
temptableHolder += '<tr><td>' + testData[i].firstName + '</td><td>' + testData[i].lastName + '</td><td>' + testData[i].title
+ '</td><td>' + testData[i].id + '</td><td>' + testData[i].department + '</td></tr>';
}
temptableHolder += '</tbody></table>';
tableElementContainer1.innerHTML = temptableHolder ;
Ưu điểm: - Thời gian thực hiện nhanh nhất trên Firefox/Chrome/IE/Safari (3-5 millisec trên các trình duyệt). Được đo lường thông qua cả API performance.now() và console.time().
Nhược điểm: - Khi số lượng cột nhiều hơn và bạn cần phải đặt nhiều thuộc tính thì làm việc với chuỗi có thể khó khăn và ít khó chịu hơn.
Cách 2: Native Js document.createElement() (Đây là cách tiếp cận tốt nhất 2 về hiệu suất trên các trình duyệt)
var tableBody = document.createElement('tbody'),
tableElement2 = document.getElementById("employeeList2"),
for(var i=0,len=testData.length; i<len; i++){
tableRow = document.createElement("tr");
for(var k in testData[i]){
rowCell = document.createElement("td");
rowCell.appendChild(document.createTextNode(testData[i][k]));
tableRow.appendChild(rowCell);
}
tableBody.appendChild(tableRow);
}
tableElement2.appendChild(tableBody);
Ưu điểm: - 2nd thời gian thực hiện nhanh nhất trên trình duyệt Firefox/Chrome/Safari (5 đến 12 millisec trên các trình duyệt). Được đo lường thông qua cả API performance.now() và console.time(). - Nhiều chính tenable hơn cách tiếp cận 1st
Nhược điểm: - Thời gian thi công là hơn trong các trình duyệt IE, 90 + millsec
3 Way: Sử dụng jQuery để tạo DOM (Tư vấn cho tôi là don 't sử dụng nó)
var tableBody = $('<tbody></tbody>'),
tableElement2 = document.getElementById("employeeList2"),
for(var i=0,len=testData.length; i<len; i++){
tableRow = $("<tr></tr>");
for(var k in testData[i]){
rowCell = $("<td></td>");
rowCell.append(testData[i][k]);
tableRow.append(rowCell);
}
tableBody.append(tableRow);
}
tableElement2.append(tableBody);
Ưu điểm: - dễ dàng thêm các thuộc tính/lớp/phong cách trên các yếu tố và rất dễ dàng để đọc và đứng vững được chính.
Nhược điểm: - thời gian tồi tệ nhất thực hiện trên tất cả các trình duyệt (220 ms 330 ms), số chậm nhất là trong IE
này nghe có vẻ giống như một công việc cho một công cụ khuôn mẫu JS, chẳng hạn như http: // handlebarsjs Tôi không biết đủ về nó để cung cấp cho bạn một giải pháp thực sự, nhưng tôi nghĩ rằng nó có thể giúp đỡ. – Nix
@Nix Cảm ơn, đã vấp phải điều này trong khi tìm cách tạo các phần tử DOM phức tạp theo cách thức lành mạnh và có thể duy trì được. handlebars.js là chính xác những gì tôi cần. :) – DavidScherer