{"id":14856,"date":"2026-10-26T18:25:00","date_gmt":"2026-10-26T17:25:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=14856"},"modified":"2026-10-26T13:09:08","modified_gmt":"2026-10-26T12:09:08","slug":"klasyczne-skrypty-i-dom-wyszukiwanie-elementow-we-wlasciwym-momencie","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/klasyczne-skrypty-i-dom-wyszukiwanie-elementow-we-wlasciwym-momencie\/","title":{"rendered":"Klasyczne skrypty i DOM: wyszukiwanie element\u00f3w we w\u0142a\u015bciwym momencie"},"content":{"rendered":"

Parser HTML odczytuje kod strony i buduje struktur\u0119 jej element\u00f3w. Klasyczny skrypt przetwarzany przez parser HTML, bez async<\/code> i skutecznego defer<\/code><\/strong>, zatrzymuje dalsze parsowanie HTML na czas wykonania. Elementy zapisane dalej w \u017ar\u00f3dle zwykle jeszcze nie istniej\u0105 w drzewie dokumentu (DOM). Modu\u0142y, skrypty asynchroniczne i skrypty dodawane dynamicznie dzia\u0142aj\u0105 wed\u0142ug innych regu\u0142.<\/p>\n

To wyja\u015bnia typowy b\u0142\u0105d zmiany motywu: prze\u0142\u0105cznik w nag\u0142\u00f3wku dzia\u0142a, ale przy pierwszym \u0142adowaniu nie znajduje obraz\u00f3w w dalszej cz\u0119\u015bci artyku\u0142u. Wszystkie pliki obraz\u00f3w mog\u0105 ju\u017c istnie\u0107; wyszukiwanie nast\u0119puje po prostu zbyt wcze\u015bnie.<\/p>\n

\"Izolowany
Test z 24 pa\u017adziernika 2026 w Chromium: dwie figury po skrypcie w head. Wyniki dotycz\u0105 tego przyk\u0142adu, a nie historycznych ods\u0142on.<\/figcaption><\/figure>\n

Pozycja w \u017ar\u00f3dle nie jest pomiarem wykonania<\/h2>\n

Pozycja bajtowa opisuje kolejno\u015b\u0107 w dostarczonym HTML. Zliczenie znacznik\u00f3w otwieraj\u0105cych nie daje automatycznie liczby istniej\u0105cych element\u00f3w DOM: znaczenie maj\u0105 komentarze, tre\u015b\u0107 skrypt\u00f3w, elementy tworzone niejawnie oraz p\u00f3\u017aniejsze zmiany. Wcze\u015bniejsze skrypty mog\u0105 te\u017c doda\u0107 kolejne elementy.<\/p>\n

Mi\u0119dzy innymi dlatego w\u0142a\u015bciwy test zapisuje document.readyState<\/code> i rzeczywist\u0105 liczb\u0119 znalezionych element\u00f3w w chwili wykonania. Wcze\u015bniejsze rozmiary strony i liczby plik\u00f3w nie s\u0105 tutaj przedstawiane jako odtworzone pomiary. Mechanizm pokazuje niewielki, izolowany przyk\u0142ad uruchomiony w przegl\u0105darce.<\/p>\n

Co wykaza\u0142 test przegl\u0105darkowy<\/h2>\n

W te\u015bcie z 24 pa\u017adziernika 2026 dwa elementy figure<\/code> wyst\u0119puj\u0105 po klasycznym skrypcie w sekcji head. Wczesne wyszukiwanie znajduje zero figur. Zewn\u0119trzny skrypt klasyczny z defer<\/code> oraz zwyk\u0142y modu\u0142 znajduj\u0105 p\u00f3\u017aniej obie figury. Dodanie defer<\/code> do osadzonego skryptu klasycznego nie op\u00f3\u017ania wykonania.<\/p>\n

querySelectorAll()<\/code> zwraca ponadto statyczn\u0105 list\u0119. Pusta lista zachowana wcze\u015bniej pozostaje pusta tak\u017ce po utworzeniu obu figur. Po parsowaniu potrzebne jest wi\u0119c ponowne wyszukanie element\u00f3w. Sprawdzono izolowany przyk\u0142ad w Chromium, a nie zestaw r\u00f3\u017cnych przegl\u0105darek ani historyczny zapis ruchu sieciowego witryny.<\/p>\n

Dlaczego p\u00f3\u017aniejsze klikni\u0119cie nie wystarcza<\/h2>\n

Klikni\u0119cie po parsowaniu sprawdza zmian\u0119 stanu przy ju\u017c istniej\u0105cych elementach. Nie potwierdza poprawnego dzia\u0142ania podczas pierwszego \u0142adowania. Klikni\u0119cie mo\u017ce te\u017c nast\u0105pi\u0107 jeszcze w trakcie \u0142adowania, gdy przycisk jest ju\u017c widoczny i ma zarejestrowan\u0105 obs\u0142ug\u0119 zdarzenia.<\/p>\n

Zapisany wyb\u00f3r jasnego motywu, ponowne \u0142adowanie w ciemnym motywie i prze\u0142\u0105czenie podczas \u0142adowania stanowi\u0105 zatem osobne przypadki testowe. Przy ka\u017cdej zamianie obraz\u00f3w liczy si\u0119 bie\u017c\u0105cy stan motywu. Istnienie element\u00f3w nag\u0142\u00f3wka nie dowodzi, \u017ce figury w dalszej cz\u0119\u015bci artyku\u0142u ju\u017c powsta\u0142y.<\/p>\n

Zamiana obraz\u00f3w po parsowaniu<\/h2>\n

Poni\u017cszy przyk\u0142ad integracji wymaga istniej\u0105cej funkcji bilderJetztTauschen(hell)<\/code>. Funkcja musi przy ka\u017cdym wywo\u0142aniu ponownie wyszuka\u0107 aktualne obrazy i ustawi\u0107 odpowiednie adresy. Fragment okre\u015bla wy\u0142\u0105cznie moment wykonania.<\/p>\n

const wurzel = document.documentElement;\nlet bildtauschGeplant = false;\n\nfunction bilderTauschen(hell) {\n    if (document.readyState === 'loading') {\n        if (bildtauschGeplant) return;\n        bildtauschGeplant = true;\n        document.addEventListener('DOMContentLoaded', function () {\n            bildtauschGeplant = false;\n            bilderJetztTauschen(wurzel.getAttribute('data-theme') === 'light');\n        }, { once: true });\n        return;\n    }\n    bilderJetztTauschen(hell);\n}<\/code><\/pre>\n
Gdy readyState<\/code> ma warto\u015b\u0107 loading<\/code>, rejestrowany jest najwy\u017cej jeden nas\u0142uch zdarzenia. Po wyst\u0105pieniu zdarzenia bie\u017c\u0105cy wyb\u00f3r jest odczytywany z data-theme<\/code>. Po parsowaniu zamiana nast\u0119puje natychmiast z przekazan\u0105 warto\u015bci\u0105. Wyb\u00f3r w elemencie g\u0142\u00f3wnym musi zosta\u0107 zaktualizowany przed wywo\u0142aniem funkcji.<\/p>\n
W izolowanym te\u015bcie trzy wczesne wywo\u0142ania spowodowa\u0142y dok\u0142adnie jedn\u0105 p\u00f3\u017aniejsz\u0105 zamian\u0119 z ostatnio ustawionym jasnym motywem. Nast\u0119pne wywo\u0142anie z ciemnym motywem zadzia\u0142a\u0142o natychmiast. Jest to ulepszony przyk\u0142ad; kontrola artyku\u0142u nie zmieni\u0142a produkcyjnego motywu.<\/p>\n
\n
Pytania i odpowiedzi<\/h2>\n
Kiedy pomagaj\u0105 defer i modu\u0142y?<\/h3>\n
Dla zewn\u0119trznych skrypt\u00f3w klasycznych defer<\/code> przesuwa wykonanie po parsowaniu HTML i zachowuje kolejno\u015b\u0107 dokumentu. Zwyk\u0142e modu\u0142y r\u00f3wnie\u017c wykonuj\u0105 si\u0119 po parsowaniu. async<\/code> nie daje takiej gwarancji; wykonanie zale\u017cy od dost\u0119pno\u015bci skryptu. Przy modu\u0142ach async<\/code> mo\u017ce mie\u0107 znaczenie tak\u017ce bez w\u0142asnego src<\/code>. Dla osadzonych skrypt\u00f3w klasycznych defer<\/code> i async<\/code> pozostaj\u0105 bezskuteczne.<\/p>\n
Dlaczego DOMContentLoaded zamiast load?<\/h3>\n
DOMContentLoaded<\/code> nast\u0119puje po parsowaniu HTML i powi\u0105zanych skryptach odroczonych. Zdarzenie nie czeka na wszystkie obrazy ani skrypty asynchroniczne; arkusze styl\u00f3w mog\u0105 op\u00f3\u017ania\u0107 wykonanie po\u015brednio przez oczekuj\u0105ce skrypty. load<\/code> czeka na dodatkowe zasoby strony, ale pomija obrazy \u0142adowane leniwie. Dla potrzebnych font\u00f3w w\u0142a\u015bciwym punktem kontroli jest document.fonts.ready<\/code>. Do znalezienia figur wystarcza zbudowane drzewo dokumentu.<\/p>\n
Czy zamiana zapobiega podw\u00f3jnemu pobieraniu obraz\u00f3w?<\/h3>\n
Nie. Mechanizm wst\u0119pnego pobierania lub \u0142adowania obraz\u00f3w m\u00f3g\u0142 ju\u017c wys\u0142a\u0107 \u017c\u0105danie pierwotnego adresu. Rzeczywisty koszt zale\u017cy od pami\u0119ci podr\u0119cznej, odleg\u0142o\u015bci od widocznego obszaru, po\u0142\u0105czenia i przegl\u0105darki; loading=\"lazy\"<\/code> nie gwarantuje unikni\u0119cia \u017c\u0105dania. Lepszym dowodem jest zapis ruchu sieciowego, a nie pozycja skryptu.<\/p>\n
<picture><\/code> z prefers-color-scheme<\/code> mo\u017ce uwzgl\u0119dni\u0107 preferencj\u0119 systemow\u0105. Wyb\u00f3r przechowywany wy\u0142\u0105cznie w localStorage<\/code> nie jest dost\u0119pny dla zapyta\u0144 medialnych CSS ani automatycznie znany serwerowi. Wyb\u00f3r po stronie serwera wymaga osobnego przekazania stanu.<\/p>\n
Co z artyku\u0142ami dodanymi p\u00f3\u017aniej?<\/h3>\n
DOMContentLoaded<\/code> nie wyst\u0119puje ponownie dla tego samego dokumentu. Zmiana tre\u015bci bez pe\u0142nej nawigacji wymaga osobnego wywo\u0142ania po wstawieniu element\u00f3w. W te\u015bcie dodanie p\u00f3\u017aniej trzeciej figury nie uruchomi\u0142o automatycznie kolejnej zamiany.<\/p>\n<\/div>\n
\n
\u0179r\u00f3d\u0142a<\/h2>\n