Optymalizacja generowania tabeli html. Opcje

[KsaR]

[JAVASCRIPT] pobierz, plaintext 
var
d = document,
div = d.createElement('div'),
i=0,
larr = [],
lvls = [0,10,40,110,260,...]; // 1k int'ów.
 
while (1000!==++i) {
   larr[i]='<tr><td>'+(i+1)+'</td><td>'+lvls[i]+'</td></tr>';
}
 
div.innerHTML = '<table id="levels">
<tr>
   <th>LvL</th><th>Experience</th>
</tr>'+
larr.join('')
+'</table>';
 
d.body.appendChild(div);
[JAVASCRIPT] pobierz, plaintext 

Wygenerowanie tabeli zajmuję około 2s na moim tablecie,
a strona będzie głównie na urządzenia mobilne.
Da się jakoś zoptymalizować to? Bo już bardziej nie potrafię (IMG:style_emoticons/default/tongue.gif)

[Pyton_000]

Zamiast przypisywać do tablicy spróbuj od razu wrzucać do DOM

[KsaR]

Zamiast przypisywać do tablicy spróbuj od razu wrzucać do DOM

1. Chodzi ci o przechowywanie gotowej treści statycznej w dom'ie?
2. Czy dopisywania na bieżąco do dom'u?

Bo jak dla mnie oba rozwiązania odpadają.
1. Strona zwiększy rozmiar kilkukrotnie a w tym przypadku każdy bajt będzie się liczył.
2. A to będzie za wolne.

[trueblue]

Pomoże?
http://stackoverflow.com/a/4865247/5889778

[Pyton_000]

@trueblue przecież on tak w sumie właśnie ma (IMG:style_emoticons/default/smile.gif)
@KsaR chodzi mi o to że zamiast robić od razu append na całości, po prostu wrzucać w pętli append,. Przeglądarka będzie na bieżąco rysowała

[trueblue]

@trueblue przecież on tak w sumie właśnie ma (IMG:style_emoticons/default/smile.gif)

Pyton_000,
w sumie to inaczej, bo sugestia jest aby rozdzielić string na mniejsze części i je dodawać do tablicy.

[KsaR]

[JAVASCRIPT] pobierz, plaintext 
r[++j] = '</span></td><td width="2%"><input type="button" class="failOne" rev="';
[JAVASCRIPT] pobierz, plaintext 

Zawartość stringa = 69 (IMG:style_emoticons/default/biggrin.gif)

[JAVASCRIPT] pobierz, plaintext 
larr[i]='<tr><td>'+(i+1)+'</td><td>'+lvls[i]+'</td></tr>';
[JAVASCRIPT] pobierz, plaintext 

U mnie najdłuższy string będzie taki:

[HTML] pobierz, plaintext 
<tr><td>1000</td><td>100000000000</td></tr>
[HTML] pobierz, plaintext 

Co daję 43 znaki.
Więc chyba nie ma sensu tu bardziej dzielić.
Niby można by każde połączenie w tym do kolejnego elementu tablicy ale to nie powinno dodać dużo różnicy...
_____
Wpadłem teraz na pomysł żeby w html robić div'a. W nim komunikat że trwa generacja tabeli,
I asynchronicznie dołączać skrypt.
// czesciowo zainspirowane pomyslem @Pyton_000, co do appendowania także daje (+).
_____
Jednak, gdyby ktoś miał jakieś dodatkowe pomysły to chętnie poczytam - bo może da się jeszcze lepiej. (IMG:style_emoticons/default/tongue.gif)
_____

You may squeeze a bit more performance out by specifying the length of the array when you construct it e.g. var r = new Array(data.length*19+2)

Jeszcze spróbuję to dodać według komentarza z stack @trueblue.
Może coś poprawi bo wygląda jak SplFixedArray z php. (IMG:style_emoticons/default/tongue.gif)

Ten post edytował KsaR 26.04.2016, 12:20:26

[trueblue]

Pyton_000,
zwracam honor.

[Pyton_000]

Ale o co chodzi (IMG:style_emoticons/default/tongue.gif)

[KsaR]

[JAVASCRIPT] pobierz, plaintext 
while (1000!==++i) {
   larr[i]=(i+1)+' '+lvls[i];
}
 
div.innerHTML = '<table id="levels">
<tr>
  <th>LvL</th><th>Experience</th>
</tr>'+
larr.join('').replace(/(\d+)\s(\d+)/g, "<tr><td>$0</td><td>$1</td></tr>")
+'</table>';
d.body.appendChild(div);
[JAVASCRIPT] pobierz, plaintext 

Próbuje teraz tak, jednak nie działa. Ma ktoś jakieś pomysły?

[trueblue]

Co dokładnie nie działa?

For a non-global regexp - it finds the first match and returns an array: the full match becomes array item at index 0, the first group - at index 1, and so on.

[KsaR]

Testuje sobie na tej podstronie póki co
http://ksar.blutu.pl/tibiame/levels/

I mi nie tworzy tabeli teraz..

[trueblue]

http://stackoverflow.com/a/805113/5889778

[KsaR]

Ok. Teraz pokazuję tabele i dziala szybciej jednak mam błąd -
W lvl wyswietla $0.
A w experience podaje zly "exp".. Zamiast 0..10..40.. Itd jest 2...404...2606

Ten post edytował KsaR 26.04.2016, 14:30:01

[trueblue]

Elementy w tabeli wyglądają tak:
0: "2 10", 1: "3 40", kiedy połączysz, otrzymujesz tak: 2 103 404....

[KsaR]

[JAVASCRIPT] pobierz, plaintext 
while (1000!==++i) {
   larr[i]=(i+1)+' '+lvls[i]+',';
}
 
div.innerHTML = `<table id="levels">
<tr>
  <th>LvL</th><th>Experience</th>
</tr>`+
larr.join('').replace(/(\d+)\s(\d+),/g, "<tr><td>$1</td><td>$2</td></tr>")
+`</table>`;
d.body.appendChild(div);
[JAVASCRIPT] pobierz, plaintext 

Zrobiłem tak i już działa (IMG:style_emoticons/default/tongue.gif)

Ten post edytował KsaR 26.04.2016, 14:48:52

[nospor]

zamiast dowalac przecinek do tablicy, poprostu zamiast
larr.join('')
zrob
larr.join(',')

[KsaR]

[JAVASCRIPT] pobierz, plaintext 
while (1000!==++i) {
   larr[i]=(i+1)+' '+lvls[i];
}
 
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>$1</td><td>$2</td></tr>")
+`</table>`;
 
larr = lvls = [];
 
if (w && w.supports && w.supports('overflow', 'scroll')) {
   lvl.style='overflow:scroll;height: 250px;max-width: 200px;border:1px solid gray';
}
[JAVASCRIPT] pobierz, plaintext 

Tylko teraz dziwnie działa:

• Przed tabelka mam ostatni element z tablicy.
• W tabelce zaczyna sie lvl od 2 zamiast od 1.

I coś nie dodaję mi scrollowania ale to chyba nie związane z tym.

live demo

Ten post edytował KsaR 26.04.2016, 15:19:21

[nospor]

/(\d+)\s(\d+),/g
przecinek ma byc warunkowy. PRzeciez po implode(',') przecinek wstawiany jest miedzy elementami a nie po.

while (1000!==++i)
tutaj z 0 robisz na dzien dobry 1 wiec sie nie dziw ze gubisz pierwszy element

[KsaR]

Juz działa -

[JAVASCRIPT] pobierz, plaintext 
// (...)
var i = -1;
 
while (1000!==++i) {
   larr[i]=(i+1)+' '+lvls[i];
}
 
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>$1</td><td>$2</td></tr>").replace(/,/, '')
+`</table>`;
[JAVASCRIPT] pobierz, plaintext 

Wbrew pozorom pierw było var i = 0; i działało jak trzeba.
Tak jakby i++ oraz ++i nie mialo znaczenia w js w moim przypadku.
Zamienilem na -1 bo dawalo undefined 1001.... (Jak bylo i++).
I juz dziala ;d