1. Timer-Batch-Rendering
Da das gleichzeitige Rendern von 100.000 Datenstücken zu einer langsamen Seitenladegeschwindigkeit führt, können wir nicht so viele Daten auf einmal rendern, sondern in Stapeln rendern, z. B. 10.000 Stück auf einmal, und es in 10 Malen abschließen, was die Seitenrenderinggeschwindigkeit verbessern kann. Wenn diese 13 Vorgänge jedoch im selben Codeausführungsprozess ausgeführt werden, kann das Problem des Einfrierens fehlerhafter Seiten offenbar nicht nur nicht gelöst werden, sondern es wird auch den Code verkomplizieren. Die beste Lösung für ähnliche Probleme in anderen Sprachen ist die Verwendung von Multithreading. Obwohl JavaScript kein Multithreading hat, können die beiden Funktionen setTimeout und setInterval ähnliche Effekte wie Multithreading erzielen. Um dieses Problem zu lösen, kann setTimeout unter ihnen sein Talent unter Beweis stellen. Die Funktion der setTimeout-Funktion kann als Starten eines neuen Threads angesehen werden, um die Aufgabe nach der angegebenen Zeit abzuschließen.
function loadAll(response) {
//将10万条数据分组， 每组500条，一共200组
var groups = group(response);
for (var i = 0; i < groups.length; i++) {
//闭包， 保持i值的正确性
window.setTimeout(function () {
var group = groups[i];
var index = i + 1;
return function () {
//分批渲染
loadPart( group, index );
}
}(), 1);
}
}
//数据分组函数（每组500条）
function group(data) {
var result = [];
var groupItem;
for (var i = 0; i < data.length; i++) {
if (i % 500 == 0) {
groupItem != null && result.push(groupItem);
groupItem = [];
}
groupItem.push(data[i]);
}
result.push(groupItem);
return result;
}
var currIndex = 0;
//加载某一批数据的函数
function loadPart( group, index ) {
var html = "";
for (var i = 0; i < group.length; i++) {
var item = group[i];
html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
}
//保证顺序不错乱
while (index - currIndex == 1) {
$("#content").append(html);
currIndex = index;
}
} Beispiel: document.createDocumentFragment()
Wird zum Erstellen eines virtuellen Knotenobjekts verwendet, das nicht zum Dokumentbaum gehört.
Wenn mehrere DOM-Elemente hinzugefügt werden müssen, kann das DOM zuerst zu diesem virtuellen Knoten hinzugefügt werden. Fügen Sie dann der Seite gleichmäßig virtuelle Knoten hinzu, wodurch die Anzahl der DOM-Renderings durch die Seite verringert wird.
window.requestAnimationFrame
akzeptiert Parameter als Funktionen und bietet gegenüber setTimeout und setInterval die folgenden Vorteile:
1. Sammeln Sie alle DOM-Operationen in jedem Frame und schließen Sie sie in einer Neuanordnung/Neuzeichnung ab. 60 Bilder pro Sekunde.
2. In versteckten oder unsichtbaren Elementen wird requestAnimationFrame nicht neu gezeichnet/neu angeordnet.
//总数据
const total = 10000;
//每次插入的数据
const once = 20;
//需要插入的次数
const times = Math.ceil(total/once)
//当前插入的次数
const curTimes = 0;
//需要插入的位置
const ul = document.querySelector('ul')
function add(){
let frag = document.createDocumetFragment()
for(let i = 0;i<once;i++){
let li = document.createElement('li')
li.innerHTML = Math.floor(i+curTimes*once)
frag.appendChild(li)
}
curTimes++;
ul.appendChild(frag)
if(curTimes<times){
window.requestAnimationFrag(add)
}
}
window.requestAnimationFrag(add)