Optimieren Generieren von HTML-Tabelle in js

Question

Ich habe Skript in js, die HTML-Tabelle mit 1k Elemente generieren.

Skript dauerte 2 ~ s für generieren.

Wie kann ich die Leistung verbessern?

Hier mein Skript:

var 
i = 0, 
larr = [], 
lvls = [/* 1k int's */]; 
while (1000!==i) { 
    larr[i]=lvls[i]+' '+(++i); 
} 
lvls = []; 

var lvl = document.getElementById('lvl'); 

lvl.innerHTML = `<table id="levels"> 
<tr> 
    <th>LvL</th><th>Experience</th> 
</tr>`+ 
larr.join(',') 
.replace(/(\d+)\s(\d+),?/g, `<tr><td>$2</td><td>$1</td></tr>`) 
.replace(/,/g, ``) 
+`</table>`; 
larr = []; 

Hier vollständige Skript: http://codepen.io/anon/pen/NNZabz

Ps. Ich möchte das einzige js verwenden; Ich möchte das Ergebnis nicht auf dem Server speichern.

Answer 1

Normalerweise ist innerHTML sehr leistungsschwach. Ich würde vorschlagen, die Elemente zu generieren und sie an ein Tabellenelement anzuhängen. Ich habe mich auch komplett von Larr befreit, da es unnötig aussieht.

Sie können diesen Teil des Codes auch in die while-Schleife einfügen.

var i = 0, 
lvls = []; 
var lvl = document.getElementById('lvl'); 
//Make a table 
var table = document.createElement('table'); 
table.id = 'levels'; 
//Add that header HTML 
table.innerHTML = '<tr><th>LvL</th><th>Experience</th></tr>' 

//Add that to the lvl element so it renders 
lvl.appendChild(table); 

var d = document.createDocumentFragment(); 

//Execute your level creating loop while appending children to the fragment 
while (1000!==i) { 
    var _tr = document.createElement('tr'); 
    var _t1 = document.createElement('td'); 
    var _t2 = document.createElement('td'); 
    _tr.appendChild(_t1); 
    _tr.appendChild(_t2); 
    _t1.innerHTML = lvls[i]; 
    _t1.innerHTML = ++i; 
    d.appendChild(_tr); 
} 

//Add the document fragment to the table 
table.appendChild(d); 

Basierend auf einem schnellen Test, dies wird ausgeführt in ~ 200ms