webf-async-rendering

Understand and work with WebF's async rendering model - handle onscreen/offscreen events and element measurements correctly. Use when getBoundingClientRect returns zeros, computed styles are incorrect, measurements fail, or elements don't layout as expected.

1. Zainstaluj skill webf-async-rendering z repozytorium openwebf. Skill jest dokumentacją i wzorcami kodu — nie wymaga osobnego pakietu npm, ale powinieneś mieć zainstalowane WebF w swoim projekcie (Vite, npm, React/Vue/Svelte).

2. Zrozum fundamentalną różnicę: w przeglądarkach getBoundingClientRect() zwraca wymiary natychmiast po dodaniu elementu do DOM, w WebF zwraca zera, bo layout jeszcze się nie wykonał. Zmiana DOM jest asynchroniczna — elementy istnieją w drzewie DOM, ale nie zostały jeszcze zmierzone i umieszczone.

3. Zamiast czytać wymiary od razu po modyfikacji DOM, czekaj na następną klatkę renderowania. Użyj requestAnimationFrame() lub handleuj zdarzenia onscreen/offscreen, które WebF emituje po wykonaniu layoutu.

4. Jeśli napotkasz problemy z getBoundingClientRect() zwracającym zera, computed styles zwracającymi nieprawidłowe wartości lub elementy nie rozmieszczającymi się jak oczekiwano — przyczyna leży w asynchronicznym modelu. Przenieś logikę pomiaru na moment po renderowaniu, nie zaraz po zmianie DOM.

5. Pamiętaj, że asynchroniczny rendering eliminuje layout thrashing i nie wymaga optymizacji z DocumentFragment — WebF automatycznie batchuje zmiany. Twój kod będzie prostszy i szybszy niż w przeglądarce.