Forum PHP.pl > Optymalizacja generowania tabeli html.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Optymalizacja generowania tabeli html.

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

KsaR

26.04.2016, 00:36:56

[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ę

Pyton_000

26.04.2016, 06:58:57

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

KsaR

26.04.2016, 10:37:47

Cytat(Pyton_000 @ 26.04.2016, 07:58:57 )

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

26.04.2016, 11:11:25

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

Pyton_000

26.04.2016, 11:14:50

@trueblue przecież on tak w sumie właśnie ma

@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

26.04.2016, 11:48:59

Cytat(Pyton_000 @ 26.04.2016, 12:14:50 )

@trueblue przecież on tak w sumie właśnie ma

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

KsaR

26.04.2016, 12:13:13

Cytat

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

Zawartość stringa = 69

Cytat

[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.

_____

Cytat

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.

trueblue

26.04.2016, 13:13:24

Pyton_000,
zwracam honor.

Pyton_000

26.04.2016, 13:19:57

Ale o co chodzi

KsaR

26.04.2016, 13:20:57

[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

26.04.2016, 13:39:37

Co dokładnie nie działa?

Cytat

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

26.04.2016, 13:41:59

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

I mi nie tworzy tabeli teraz..

trueblue

26.04.2016, 13:56:18

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

KsaR

26.04.2016, 14:29:40

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

trueblue

26.04.2016, 14:39:56

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

KsaR

26.04.2016, 14:47:40

[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

nospor

26.04.2016, 14:51:36

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

KsaR

26.04.2016, 15:06:09

[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

nospor

26.04.2016, 15:17:14

/(\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

26.04.2016, 15:35:27

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

nospor

26.04.2016, 15:40:41

i = 0;
alert(i++);
i = 0;
alert(++i);

Pyton_000

26.04.2016, 15:48:17

Wiesz jaka jest różnica międzi '++i' a 'i++'

może lepiej tak:

Kod

for (var i = 0, len = lvls.length; i < len; i++) {
larr[i]=(i+1)+' '+lvls[i];
}

KsaR

26.04.2016, 16:02:48

Cytat(Pyton_000 @ 26.04.2016, 16:48:17 )

Wiesz jaka jest różnica międzi '++i' a 'i++'

może lepiej tak:

Kod

for (var i = 0, len = lvls.length; i < len; i++) {
larr[i]=(i+1)+' '+lvls[i];
}

No raczej. ++i dodaje przed wywolaniem zmiennej a i++ po wywolaniu.
Jednak co poradze ze dzialalo u mnie tak samo a nie tak jak powinno?

Co do petli - moja wersja bedzie szybsza.
Samo sprawdzenie czy < jest wolniejsze od !==.
Gdy typ jest pierwszy a uzyjemy !== tez jest szybciej.
I dodatkowo nie musze 'len' robic bo to bedzie najblizsze sto lat pewnie 10k.
Jako ze w tej grzej przez 10 lat najwyzszy lvl to 260?

lub mniejszy.

nospor

26.04.2016, 16:16:52

Cytat

No raczej. ++i dodaje przed wywolaniem zmiennej a i++ po wywolaniu.
Jednak co poradze ze dzialalo u mnie tak samo a nie tak jak powinno?

Dzialo sie tak,bo niezaleznie czy dales ++i czy i++ to do petli i tak juz wchodzilo zwiekszone.
Miales i zwiekszac na samym koncu petli a nie jeszcze zanim do petli weszlo.

czyli nie:
while (1000!==++i) {
larr[i]=(i+1)+' '+lvls[i];
}

a
while (1000!==i) {
larr[i]=(i+1)+' '+lvls[i];
i++;
}

KsaR

26.04.2016, 17:28:23

Tak zrobiłem:

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

Dzieki zmienie pozycjami z $1 $2 na $2 $1 oraz zmiana kolejnosci elementu tablicy,
Skrypt nie musi zbednie robic i+1 ciagle. Przy okazji zmienilem mniej wiecej tak jak podales, zeby w petli inkremowac.

Comandeer

26.04.2016, 18:01:00

Hmm… A rozbicie tego na kilka asynchronicznych części? Co prawda może nie będzie szybsze, ale na pewno non-blocking.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.