webf-async-rendering

Skill wyjaśniający asynchroniczny model renderowania w WebF — kluczową różnicę między rozwojem webowym a WebF. Dowiesz się, dlaczego getBoundingClientRect() zwraca zera, jak obsługiwać zdarzenia onscreen/offscreen i poprawnie mierzyć elementy. WebF przetwarza zmiany DOM w batches w następnej klatce renderowania zamiast synchronicznie, co daje 20-krotnie lepszą wydajność. Skill obejmuje praktyczne wzorce do pracy z tym modelem i unikania typowych pułapek.

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.