Z przyjemnością informujemy, że w Chrome w wersji 133 dostępny jest nowy interfejs DOM API moveBefore(), który ułatwia przenoszenie elementów w DOM bez utraty stanu. Czytaj dalej, aby dowiedzieć się, jak możesz go używać w swoich projektach.
Utrata stanu podczas mutacji DOM
Czy do wstawiania nowych elementów do DOM używasz interfejsu API appendChild()? Wiele osób ma ten problem. Czy próbowałeś/próbowałaś wywołać go (lub insertBefore() albo dowolny inny interfejs API do wstawiania) z elementem, który jest już w DOM? W takiej sytuacji możesz nie zauważyć, że element jest usuwany ze starego elementu nadrzędnego i ponownie wstawiany do nowego. Dzieje się tak, ponieważ od czasu wprowadzenia pierwszego projektu standardu DOM w 1998 r. model obiektowy dokumentu zawierał tylko prymitywne operacje usuwania i wklejania. Gdy wydaje Ci się, że coś „przesuwasz” w DOM z jednego miejsca do drugiego, tak naprawdę usuwasz i wstawiasz elementy.
Fakt, że „przesuwanie” jest w istocie „usuwaniem i wstawianiem”, zwykle nie ma wpływu na wrażenia użytkownika. Na przykład podczas „przemieszczania” elementu <p> w DOM-ie te dwie operacje nie mają żadnych zakłócających skutków ubocznych, ale podczas przemieszczania złożonych węzłów, które zawierają istotne stany, takich jak elementy <iframe>, elementy w trybie pełnoekranowym, animacje CSS itp., operacja domyślnego „usunięcia” powoduje zresetowanie wszystkich stanów.
Może to mieć zaskakująco niekorzystne skutki uboczne.
Aby zobaczyć, jaki stan jest resetowany, skorzystaj z demo strony internetowej z zachowaniem stanu i spróbuj przeprowadzić zmiany w drzewie DOM. Ten przykład pokazuje animacje CSS i stan <iframe> resetowany podczas przenoszenia elementów z jednego kontenera nadrzędnego do drugiego.
To ograniczenie może utrudniać, a nawet uniemożliwiać tworzenie dynamicznych treści. Użytkownicy są sfrustrowani i zdezorientowani, gdy stan aplikacji jest tajemniczo resetowany, a twórcy frameworków JavaScript muszą poświęcić niezliczone godziny na przeprojektowanie kodu po stronie klienta, aby rozwiązać ten problem, na napisanie złożonych bibliotek takich jak MorphDOM lub na rozpatrywanie raportów o błędach, które wykazują problemy, których nie można rozwiązać.
Nowy interfejs API moveBefore()
Aby rozwiązać ten problem, dodaliśmy do DOM nową operację prymitywną. Jest to odpowiednio nazwany prymityw „move” i jest udostępniany deweloperom za pomocą nowego interfejsu DOM moveBefore()API.
Funkcja moveBefore() przyjmuje te same argumenty co funkcja insertBefore(), ale zamiast usuwania i ponownie wstawiania węzłów, gdy są one już dołączone do DOM, nowy interfejs API przenosi je łącznie do nowego elementu nadrzędnego bez resetowania większości stanu. Dzięki temu deweloperzy JavaScripta mogą tworzyć dynamiczne treści z animowanymi elementami, ramkami iframe i elementami na pełnym ekranie. Możesz to sprawdzić samodzielnie, włączając flagę eksperymentalną chrome://flags/#atomic-move i otwierając naszą stronę demonstracyjną lub używając wersji 133 Chrome po jej wydaniu 4 lutego 2025 r.
Przykłady zachowań, które ten nowy element umożliwi autorom JavaScriptu:
- Zachowanie stanu odtwarzania filmu podczas poruszania się użytkownika po witrynie (niezależnie od tego, czy film jest udostępniany z elementu
<video>czy<iframe>). - Zachowywanie pola wprowadzania danych użytkownika w centrum uwagi podczas jego przenoszenia w DOM.
- Dozwolić na płynne zakończenie animacji podczas dodawania lub usuwania nowych treści z DOM.
- Algorytmy tworzenia przejść o wyższej jakości do porównywania dotychczasowych DOM-ów z nowymi treściami.
- Nie zamykaj okien modalnych, wyskakujących ani elementów pełnoekranowych.
Pracujemy nad wprowadzeniem tego interfejsu API na platformę internetową w innych przeglądarkach. Cieszymy się, że wkrótce udostępnimy go deweloperom, spełniając ich wieloletnie oczekiwania i wypełniając ważną lukę w platformie internetowej.
Jak zawsze przekazuj nam swoje opinie na Twitterze lub w komentarzach poniżej oraz zgłaszaj błędy na stronie crbug.com/new.