Limity węzłów DOM DOMU

Pracuję nad emulatorem terminala dla zabawy i mam podstawy do działania i działania backendu. Jednak wciąż mam problemy z wydajnością na interfejsie.Limity węzłów DOM DOMU

Jak wszyscy zapewne wiecie, każdy znak w oknie terminalu może mieć inny styl. (kolor, tło, pogrubienie, podkreślenie itp.). Więc moim pomysłem było użycie <span> dla każdej postaci w oknie widoku i zastosowanie stylu liniowego, jeśli jest to konieczne, więc potrzebuję odpowiedniego poziomu kontroli.

Problem polega na tym, że wydajność jest horrendalna podczas odświeżania. Chrome może obsłużyć to na moim komputerze z około 120 ops na sekundę i firefox z 80. Ale Internet Explorer prawie nie ma 6. Więc po moim stint z html próbowałem użyć płótna, ale tekst na płótnie jest bardzo powolny. Online Czytanie pamięci podręcznej pomaga, więc zaimplementuję pamięć podręczną dla każdego znaku i mogę zastosować kolory do tej czcionki bitmapowej z jakąś złożoną operacją. Jest to jednak znacznie wolniejsza od DOM.

Potem wróciłem do domu i spróbowałem użyć document.createDocumentFragment, ale działa to trochę gorzej niż po prostu przy użyciu standardu.

Nie mam pojęcia, od czego zacząć optymalizację. Mógłbym śledzić, co zmienia się postać, ale potem nadal będę działał na to spowolnienie, gdy terminal uzyska dużo informacji wejściowych.

Jestem nowy DOM więc mogę zrobić coś zupełnie źle ...

Każda pomoc jest mile widziana!

Oto jsperf z kilkoma testami:

http://jsperf.com/canvas-bitma32p-cache-test/6

Źródło

2015-10-14 John Smith

Należy użyć pliku CSS zamiast wbudowanych stylów. Zobacz http://stackoverflow.com/a/8284398/5111146. –

Również http://jsperf.com/style-element-vs-attr –

Spróbuj użyć jednego zakresu dla każdej instancji stylu. Na przykład, jeśli styl nigdy się nie zmienia, jeden tag 'span' powinien zrobić. Jeśli styl zmieni się raz, a następnie zmieni się z powrotem na pierwotny styl, powinny to być trzy znaczniki 'span'. –

bezpośrednie wstawianie HTML jako łańcuch tekstowy jest zaskakująco skuteczny podczas korzystania insertAdjacentHTML aby dołączyć do elementu HTML.

var div = document.getElementById("output"); 
 
var charCount = 50; 
 
var line, i, j; 
 

 
for (i = 0; i < charCount; i++) { 
 
    line = ""; 
 
    for (j = 0; j < charCount; j++) { 
 
    line += "<span style=\"background-color:rgb(0,0,255);color:rgb(255,127,0)\">o</span>"; 
 
    } 
 
    div.insertAdjacentHTML("beforeend","<div>"+line+"</div>"); 
 
}

#output{font-family:courier; font-size:6pt;}

<div id="output"></div>

Wadą tego podejścia jest oczywista: nigdy nie dostać szansę na traktowanie każdego elementu dołączany jako obiekt w JavaScript (oni po prostu ciągi), więc nie można na przykład dołączaj bezpośrednio detektor zdarzeń do każdego z nich. (Można to zrobić po zapytaniu o wynikowy kod HTML dla pasujących elementów przy użyciu document.querySelectorAll(".css selector).)

Jeśli naprawdę formatujesz wydruk wyjściowy na ekranie, to idealnie nadaje się insertAdjacentHTML.

Źródło

2015-12-08 23:57:33 Thriggle

Limity węzłów DOM DOMU

Odpowiedz

Powiązane problemy