W iOS Safari zabrakło pamięci dzięki "-webkit-transform"

http://jsfiddle.net/ES4xG/8/ rozbija większość urządzeń Retina.W iOS Safari zabrakło pamięci dzięki "-webkit-transform"

"Safari" łatwo "uruchamia się" z pamięci i ulega awarii podczas korzystania z niektórych instrukcji -webkit-transform. Takie podejście zapewnia imponującą grafikę, ale, szczególnie na wyświetlaczach Retina, wydaje się zużywać dużo pamięci i powodować awarie.

Demo powyżej pokazuje tekst wyświetlony 150 razy, że w przeciwnym razie byłoby to normalnie w przeglądarce PC:

rozmiaru czcionki i liczba elementów jest przesadzone, aby spowodować katastrofę. Model -webkit-transform: translate3d(0,0,0) ma wymusić przyspieszone rysowanie GPU każdego elementu.

W rzeczywistym zastosowaniu, używamy translateX, Y, Z, scale i inne, które wydają się być podłączony do wykorzystania GPU w ten sam sposób. Obrazy i sprite'y są również używane, ale nie są bezpośrednio łączone z awariami.

Biorąc pod uwagę powyższy scenariusz:

1) Czy jest to błąd, który iOS Safari jest upaść?

2) Podłączenie monitora pamięci Instrumentów Apple, wirtualnej pamięci wspina się i wydaje się być przyczyną awarii. Co dokładnie używa tej pamięci?

3) Czy istnieje inne akcelerowane podejście GPU, które nie zużywa dużo pamięci?

Źródło

2013-07-24 Zero Distraction

Masz dużo szalenie dużym tekstem (1500px) co stwarza duże bufory na GPU - zwłaszcza na urządzeniach z wyświetlaczem Retina. To z pewnością zużyje dużo pamięci .. – i47

Tak, masz rację, zużycie pamięci jest problemem. Ale czy safari nie powinno się rozbić? Czyli ta pamięć rzeczywiście jest zużywana przez Gpu? Nie sugeruję, że rozmiar czcionki jest właściwy, to tylko uproszczenie problemu. Możesz mieć wiele elementów z mniejszymi czcionkami, które spowodują awarię w ten sam sposób. Twoje zdrowie. –

Ładny kod. Rozbił się mój iPad 2 (bez siatkówki) na Google Chrome. To jednak dużo renderingu. – TheDoctor

To awarii, ponieważ wysokość całego sprzętu przyspieszone W twoim przykładzie rzeczy to 257,025px. W moich testach okazało się, że mobilne safari może obsłużyć około 20 000 pikseli wysokości, zanim się zawiesi.

Akceleracja sprzętowa jest świetna, ale nie nadużywaj jej, wykorzystując ją do wszystkiego.

Aby pomóc debugować go poprzez trzeba będzie uruchomić Safari na Mac z terminala z następujących klawiszy:

$> export CA_COLOR_OPAQUE=1 
$> export CA_LOG_MEMORY_USAGE=1 
$> /Applications/Safari.app/Contents/MacOS/Safari

CA_COLOR_OPAQUE pokazy, które elementy są accelerated.CA_LOG_MEMORY_USAGE pokazuje nam, ile pamięci jest używany do renderowania.

Wystarczy popatrzeć na poniższe linki do szczegółów:

Źródło

2013-07-30 14:49:03 Andrey

Dzięki za odpowiedź. Rzeczywiście to użycie pamięci i czerwony/zielony kolor są bardzo przydatne. Coś, co robimy też, to MobileSafari podłączane do Instrumentów z OSX, uzyskujesz podobne wyniki i monitorujesz rzeczywistą pamięć iPada. Z łatwością dociera do 600 MB! Jednak niewiele można zrobić tylko przy użyciu pamięci. Wydaje się, że na iPadzie procesor GPU renderuje ogromne "bitmapy" w pamięci wirtualnej, więc gdy aktywność ekranu podskoczy, szczególnie w przypadku dużej ilości elementów, nie jest łatwo określić, co zajmuje dużo pamięci. Ten proces działa, ale wciąż poszukuje lepszego debugowania ... –

Dzięki, miałem problem z wysokością. Było to spowodowane dużym wcięciem tekstu w element. Lekcja dowiedziała się! Uważaj na wcięcia tekstowe i animacje. –

starają się to wykorzystać na rodzica elementu jesteś przekształcania

-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
transform-style: preserve-3d;

i to na lepsze osiągi na ty przekształcone elementem

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden;

Źródło

2013-07-26 16:28:30

Dzięki za odpowiedź. Spojrzałem na te dwie właściwości, myślę, że pomogłyby w bardzo konkretnych przypadkach. Ciągle szukam więcej wskazówek na temat tego, co dzieje się na GPU itp. –

Dzięki, dokładnie tego potrzebowałem! –

-1

Google Chrome rozbija minut po uruchomieniu -webkit-transform Javascript animację w tekście. Użyłem zarówno rotate(), jak i rotateZ(), a zwłaszcza, gdy widoczny jest animowany tekst, użycie pamięci zgłoszone przez system zwiększyło się do momentu, aż Aw, Snap! Wystąpił błąd.

Korzystanie z Google Chrome 31.0.1650.63, silnik Blink 537.36, w systemie Windows 7 w wersji 64-bitowej.

Przetestowano tę samą animację w przeglądarce Firefox 25.0.1 i nie było problemów.

Wydawało mi się, że Tristan Engine (moja własna biblioteka JS) ma poważne wycieki pamięci, ale został sprawdzony na wykresie Developer> Timeline Memory i nie pokazuje żadnego wskazania.

Posiadanie -webkit-transform na obrazie lub pustym DIV nie pokaże tego błędu.

Animacja tego samego tekstu o prostych właściwościach CSS2, takich jak left: lub top:, nie spowoduje wyświetlenia tego błędu.

Zgłoszono już zgłoszenie błędu w Google. Zajęło mi to trzy godziny, aby dowiedzieć się, co jest nie tak.

raport Bug:https://code.google.com/p/chromium/issues/detail?id=328245&thanks=328245&ts=1386906785

Źródło

2013-12-13 07:55:36

Cześć Marco, dzięki za odpowiedź. Ale ten problem dotyczy tylko iOS Safari i jest uruchamiany przez renderowanie bez żadnego JavaScriptu. Jeśli masz jakieś ustalenia w iOS, daj mi znać. –

W iOS Safari zabrakło pamięci dzięki "-webkit-transform"

Odpowiedz

Powiązane problemy