JavaScript: Tworzenie fragmentu dokumentu

0:00W tej lekcji powiemy sobie trochę o

0:02wydajności wstawienia elementów na stronę i w tym celu pokaże Ci fragment dokumentu.

0:07Mamy tutaj taki element

0:09ul i chciałbym do niego wstawić 5 dynamicznie wygenerowanych elementów li.

0:14Zatem przejdźmy od razu do pracy.

0:16Zapiszemy sobie w stałej list po to, żeby

0:18mieć odwołanie do tego elementu, czyli querySelector.

0:22Wyszukaj go po id list.

0:24Czyli tutaj mamy odwołanie do tego ul. I teraz pętlą for, bo jesteśmy w języku

0:28JavaScript, więc wszystko jest tutaj dla nas dostępne,

0:31będę chciał

0:33stworzyć taką pętle, która nam stworzy 5 elementów. Czyli będzie to i równa się 0

0:38i mniejsze lub równe 5 i + + standardowa pętla for.

0:45I teraz w środku będę chciał tworzyć sobie za każdym razem element li,

0:50czyli document.createElement li będę chciał do niego wstawić jakiś tekst,

0:57czyli zrobimy li.append

0:59i tutaj zrobimy document.createTextNode.

1:03Chciałbym żeby to było dynamiczne, więc tutaj

1:05sobie przekażemy taki template string i napiszemy element listy

1:09i chciałbym tutaj wstawić po prostu index. Czyli na początku index to będzie

1:130, a więc zrobimy sobie i + 1 czyli będzie element listy 1-2-3 itd.

1:19Od razu zauważ, że liniowo tutaj stworzyłem ten TextNode,

1:22można by go było zapisać w zmiennej i dopiero tutaj podstawić.

1:25Nie ma to znaczenia jak to zrobimy i tak najpierw to zostanie

1:28stworzone i podstawione do metody append. I teraz będę chciał do tego elementu list

1:35poprzez append dodać ten nowo utworzony element li.

1:37OK.

1:39Zapiszemy sobie to wszystko, odświeżymy stronę i

1:41jak widzisz dokładnie stało się to co chcieliśmy.

1:45OK, chciałbym żeby tutaj było mniej tych elementów o 1.

1:48Czyli zrobimy to tak.

1:49Wszystko się zgadza.

1:50Natomiast jaki tutaj jest problem?

1:52Tutaj trzeba trochę wiedzieć, jak działa przeglądarka.

1:54Otóż za każdym razem, kiedy utworzymy taki element i mówimy przeglądarce wstaw ten

1:58element do ul, to przeglądarka wstawia tutaj ten element

2:02i musi wykonać całą pracę pod tytułem wstaw ten element, czyli po prostu

2:07wyrenderuj go na stronie, ale przelicz wszystko.

2:10Czy tutaj pod spodem nie było jakiegoś

2:11elementu, który należy przesunąć w dół, bo są jakieś marginesy itd.

2:14czyli cały tzw. repainting

2:16przeglądarka musi zrobić co jest dla niej kosztowne z punktu widzenia oczywiście

2:21operacji na procesorze, szczególnie na urządzeniach mobilnych.

2:24Więc to nie jest tak, że jak tutaj zrobisz

2:26to w ten sposób i wstawisz 5 elementów to to będzie zauważalne.

2:29Aczkolwiek jeżeli tych elementów byłoby

2:31znacznie więcej, będzie to już miało wpływ na wydajność.

2:35W tej lekcji jednak chodzi o to, żebyś

2:36poznał fragment dokumentu i zobaczył jak on ten problem rozwiązuje.

2:40Chciałbym po prostu zrobić tak, aby utworzyć najpierw te 5 elementów, a potem

2:45jednorazowo wstawić je na stronę, a nie wstawiać ich za każdym razem.

2:49Zatem zrobimy sobie coś takiego, że

2:51utworzymy fragment dokumentu, czyli stworzę sobie jakąś stałą, którą nazwę dc

2:56jak DocumentFragment i znowu mamy na obiekcie document

3:01metodę, która się nazywa createDocumentFragment.

3:04Wywołujemy ją i nic jej nie przekazujemy.

3:07Ona nam tworzy fragment dokumentu, który możesz sobie wyobrazić, że jest

3:11takim jakby pustym div, ale on nie jest żadnym elementem HTML.

3:15I teraz co zrobimy?

3:16Skopiuję sobie to wszystko co było u góry i wykomentuje i wstawimy w to miejsce.

3:21I zamiast stawiać te elementy, które tworzymy do listy, która jest na stronie,

3:26będziemy je wstawiać do fragmentu dokumentu.

3:29Czyli fragment dokumentu to jest taki

3:31obiekt, który również posiada metodę append, tak samo jak inne elementy, takie

3:36rzeczywiste HTML, ale on nie jest takim elementem.

3:39Więc jeżeli coś takiego tylko zrobimy

3:41i odświeżamy, to zauważ, że nic się nie stało.

3:44Chociaż uwierz mi te 5 elementów li zostało

3:46utworzonych i wstawionych do fragmentu dokumentu.

3:49Natomiast to co zrobimy teraz to do naszej

3:51listy jednorazowo za pomocą append wstawimy tenże fragment dokumentu.

3:57Czyli zamiast tam wstawiać jakieś div czy pojedyncze elementy li, wstawiamy

4:01fragment dokumentu i dzięki temu to jest tak jakbyśmy

4:04wstawili na raz wszystkie te elementy li. Po odświeżeniu zobacz,

4:08działa to dokładnie tak samo, ale jest

4:10dużo bardziej wydajne, bo najpierw utworzyliśmy pięć elementów, których nie

4:13ma na stronie, potem jednorazowo je wstrzykneliśmy na stronę i przeglądarka

4:17jednorazowo musiała przeliczyć to wszystko i od nowa wyrenderować.

4:22Jeżeli zatem będziesz miał jakieś

4:23dynamiczne dane, z których będziesz tworzył np.

4:25długą listę takich elementów li albo np.

4:28jakąś tabelkę, to pamiętaj o tym, że możesz skorzystać z fragmentu dokumentu,

4:32do niego upchnąć wszystkie te elementy, a jego jednorazowo wstawić na stronę.