Autor: Grzesiek

21 maj 2019

Tworzenie fragmentów dokumentu

CreateDocumentFragment jest metodą, która tworzy fragment dokumentu, jest to wirtualny dokument. Jest on podobny do diva, ale przy wstawianiu go do dokumentu, wstawiamy jego dzieci.

Gdzie to stosować, tam gdzie zależy Ci na wydajności i danych których wstawiasz jest dużo. Gdy wstawiamy do html nowy element całe drzewo DOM musi być za każdym razem przebudowywane.

const fragment = document.createDocumentFragment();
const ul = document.createElement("ul");

for (let i = 0; i < 10; i += 1) {
  ul.appendChild(document.createElement('li'))
    .appendChild(document.createTextNode("li element " + (i + 1)));
  fragment.appendChild(ul);
}

document.body.appendChild(fragment);
// wynik dostaniemy listę 10 elementów
// lista 1
// ...
// lista 10

Przykład dodania 540 rekordów.
Wersja użycia innerHTML w pętli - czas wykonania: 0.146240234375ms zaś wersja korzystająca z createDocumentFragment - czas wykonania: 0.072041015625ms

18 maj 2019

new Map jak i do czego używać.

Map jest prostym obiektem mapującym klucze na wartości - definicja.
Obiekt Map ma kilka właściwości:

Map.prototype​.clear()
Map.prototype​.delete()
Map.prototype​.entries()
Map.prototype​.for​Each()
Map.prototype​.get()
Map.prototype​.has()
Map.prototype​.keys()
Map.prototype​.set()
Map.prototype​.values()

Opiszę tylko kilka z tych właściwości.
Powiedzmy że mamy prosty obiekt i chciałbym sprawdzić ile jest elementów w obiekcie.
Poniżej ten obiekt.

const size = {
  desktop: 992,
  tablet: 768,
  phone: 576
}
Czytaj dalej
15 maj 2019

IntersectionObserver czyli lazy loading

IntersectionObserver - w prosty sposób można opisać że jest to API za pomocą którego można wywołać zdarzenie, gdy element zniknie lub pojawi się w obrębie naszego ekranu, a jeszcze prościej na przykładzie np. galerii zdjęć. Wczytać tylko te zdjęcia które pojawią się w polu widzenia naszego okna.

Czyli nie ładujemy powiedzmy 100 zdjęć tylko doczytujemy pojedyncze zdjęcia przy skrolowaniu. Do tej pory wykorzystywaliśmy pluginy które nam to ułatwiały.

IntersectionObserver można wykorzystać nie tylko do wczytywania zdjęć, ale np. filmów, treści wszystko to dzieje się asynchronicznie.

Np. film włączony na stronie jeżeli zaczniemy przewijać i zniknie nam z "widoku" zostanie zastopowane odtwarzanie. Jeżeli ponownie się pojawi zostaje wznowione jego odtwarzanie.

Czytaj dalej
Copyright © | kodyWiG Theme