24

Zajmuję się profilowaniem następującego użycia pamięci kodu za pomocą Osi czasu w Chrome Dev Tools v27.requestAnimationFrame garbage collection

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv='content-type' content='text/html; charset=UTF-8' /> 
    <title>RAF</title> 
</head> 
    <body> 
    <script type='text/javascript' charset='utf-8'> 
     var frame = function() { 
     window.webkitRequestAnimationFrame(frame); 
     }; 
     window.webkitRequestAnimationFrame(frame); 
    </script> 
    </body> 
</html> 

Zauważ, że to proste. Ale w końcu widzę wzór zębów, który wskazuje, że odśmiecacz odzyskuje pamięć.

Chrome Dev Tools Timeline

Czy raf tworzyć obiekty śmieci domyślnie? Czy istnieje sposób, aby tego uniknąć? Dzięki.

+0

Powiązane. Wydaje się, że istnieje więcej potencjalnych problemów w tym obszarze. Chciałbym poradzić, żeby zabrać to całe narzędzie do monitorowania pamięci z przymrużeniem oka? Szczerze mówiąc, nie jestem do końca pewien, co z tego wyniknąć. http://stackoverflow.com/questions/19395565/chrome-requestanimationframe-issues –

+0

Zrobię nagrodę za to, jeśli ktoś inny będzie chciał zrobić to samo:> już myślał, czy to może pomóc w odwróceniu dwóch funkcji flop rejestrują się nawzajem. –

Odpowiedz

2

Wygląda cyklu zatrzymania. Ramka sama się nazywa, więc trzyma liczbę zatrzymań i nie zostaje zwolniona. Za każdym razem, gdy monitorujesz uruchamianie kodu z profilem, linią czasową lub stosami sterty, pojawią się efekty uboczne.

Tak czy inaczej, nie martwię się o to. Jeśli próbujesz uzyskać dostęp do swojej aplikacji lub strony, musisz rozwiązać wiele poważniejszych problemów. Dopóki JS kończy się w niecałe 16ms, nikt nigdy nie zauważy niczego.

Największe problemy z pamięcią/procesorem to: połączenia sieciowe, dekompresowanie plików PNG/JPG, tworzenie i niszczenie elementów DOM, przetwarzanie/przetwarzanie danych w wątku innym niż wątek roboczy, słabe wykorzystanie tekstur GPU i przydzielanie dużej ilości danych w celu spowodowania GC potrzebuje dużo czasu, aby zebrać dane.

Udało mi się zoptymalizować listę przewijania z 1 000 000 elementów do uruchomienia z częstotliwością 120 klatek na sekundę na chrome (https://github.com/puppybits/BackboneJS-PerfView). Narzędzia wydajności powinny pomóc Ci znaleźć największe problemy, które użytkownik może zobaczyć, i nie musisz się martwić drobnymi sprawami.

+0

Hej tam! Czy wiesz, jak wykorzystać ten pomysł do animacji rAF? – thednp

4

enter image description here

Znalazłem następujące czynności: Jeśli zmienisz funkcję RAF w dwóch „ping-pong” jak funkcje, masz dużo mniej śmieci. Nie można uniknąć pierwszego początkowego "dużego GC", ale potem widzimy tylko niewielkie GC o wartości około 50 kb zamiast GK o masie 700kb-1mb. Kod będzie wyglądał następująco:

<script type='text/javascript' charset='utf-8'> 
    window.frameA = function() { 
    window.webkitRequestAnimationFrame(window.frameB); 
    }; 
    window.frameB = function() { 
    window.webkitRequestAnimationFrame(window.frameA); 
    }; 
    window.webkitRequestAnimationFrame(window.frameA); 
</script> 

Sądzę, że to najlepsze, co możesz zrobić w Chrome. Zauważyłem, że w FF odstępy gc lub pamięć prawie się nie zmieniają, więc prawdopodobnie jest to związane z chromowaniem błędów (więcej informacji na ten temat można znaleźć w raporcie o połączeniach z chrome chrome powyżej). Jednak zauważyłem poprawę we własnej grze podczas wdrażania RAF w ten sposób - i do diabła, muszę mieć możliwość debugowania bez sztucznych GC, które nie będą miały miejsca na zwykłych komputerach użytkowników.

+1

Jestem w szoku, mówiąc, że to działa. Niesamowite znalezisko, nie mogę sobie nawet wyobrazić, co sprawiło, że spróbowałeś tego.:) – Jaruba

+0

Nie widzę tej pracy – kevzettler

+0

Kevzettler: To był zawsze hack, który (mam nadzieję) stanie się przestarzały pewnego dnia. Czy możesz nam powiedzieć, która wersja przeglądarki testowała to? Czy nadal obserwujesz ogólnie problem gc? Odpowiednio edytuję odpowiedź. –