Wycieki pamięci zdarzają się w wielu programach, także w Microsoft Edge. Jednak nowe narzędzie sprawi, że przestaną być problemem.
Zobacz także: Życie na Marsie jeszcze bardziej zagadkowe – niesamowite odkrycie
Wycieki pamięci w Microsoft Edge
Wycieki pamięci występują, gdy kod JavaScript aplikacji przechowuje w pamięci coraz więcej obiektów, których już nie potrzebuje, zamiast udostępniać je przeglądarce do zbierania śmieci. W przypadku długo działających aplikacji niewielkie wycieki pamięci, wynoszące zaledwie kilka kilobajtów, mogą z czasem znacząco obniżyć wydajność.
Twórcy stron internetowych, którzy używają frameworka React wiedzą, że React utrzymuje zwirtualizowaną kopię DOM. Niepoprawne odmontowanie komponentów może potencjalnie prowadzić do wycieku dużej części wirtualnego DOM przez aplikację.
Zespół Microsoft Edge jest bardzo podekscytowany mogąc ogłosić nowe narzędzie Detached Elements w Microsoft Edge DevTools. Pomoże Ci zbadać i rozwiązać wycieki pamięci DOM. To narzędzie, zainspirowane przez zespół z Microsoft Teams, pomogło już ulepszyć wiele witryn i aplikacji.
Zanim wypróbujesz to nowe narzędzie na własnej treści internetowej, ważne jest, aby zrozumieć niektóre niuanse między odłączonymi elementami a wyciekami DOM. Zwykle tworzymy węzły DOM w JavaScript, aby wstawić je gdzieś na stronie, aby je wyświetlić. Ale możliwe jest tworzenie węzłów i nigdy nie dołączanie ich lub usuwanie węzłów ze strony i przechowywanie odniesień do nich w JavaScript.
Wyciek pamięci DOM występuje, gdy aplikacja przechowuje odniesienia do coraz większej liczby odłączonych elementów, bez faktycznego ich późniejszego wykorzystania.
Wraz ze wzrostem rozmiaru i złożoności kodu aplikacji, łatwiej jest popełniać błędy i zapominać o sprzątaniu, co może prowadzić do nieświadomego przechowywania elementów DOM w pamięci.
Jest to szczególnie problem w przypadku długotrwałych aplikacji. Wyobraź sobie klienta poczty e-mail, który odłącza elementy DOM za każdym razem, gdy wiadomość e-mail jest otwierana i zamykana. Jeśli użytkownik utrzyma aplikację działającą przez cały tydzień, może to oznaczać naprawdę duże zużycie pamięci, które może z czasem spowolnić działanie całego urządzenia, zwłaszcza że odłączone elementy mogą zawierać dużo danych.
Nowe narzędzie Microsoftu
Aby pomóc znaleźć i naprawić wycieki pamięci DOM, zespół Microsoft Edge współpracował z Microsoft Teams w celu zbudowania narzędzia, które wykrywa i wyświetla odłączone elementy na stronie.
Nowy panel „Odłączone elementy” jest dostępny od Microsoft Edge 97. W narzędziu możemy teraz zobaczyć, czy mamy odłączone elementy w naszej aplikacji. Aby to zrobić, należy skorzystać z aplikacji przez jakiś czas, generując wiadomości i przełączając się między pokojami. Następnie kliknąć Pobierz odłączone elementy. Spowoduje to wyświetlenie raportu z odłączonymi elementami, jeśli takie istnieją.
Węzły mogą czasami wyglądać na odłączone, ponieważ nie znajdują się już w DOM, ale mogą być zbierane przez przeglądarkę w późniejszym czasie. Dlatego narzędzie ma również sposób na wymuszenie GC (garbage collected), więc upewnij się, że pozbędziesz się tych węzłów, używając przycisku Collect garbage.
Źródło: microsoft