2016-12-16 28 views
14

Utrzymuję problem z wydajnością podczas przewijania w systemie iOS. Zarówno w przypadku touchstart, jak i touchend Safari unieważnia, a następnie ponownie oblicza style, co powoduje niewielkie opóźnienie przed odpowiedzią na przewijanie. Narzędzia Safari mają kolumnę "inicjatora", ale w moich testach jest ona pusta.Jak ustalić, co powoduje "Niewydajne style" w Safari na iOS?

Próbowałem:

  • zastosowanie jednego will-change: transform; lub transform: translateZ(0); na elemencie przewijania. Pomogło to niezmiernie w Chrome, ale nie robi nic dla Safari na iOS. Profiler nadal zgłasza, że ​​style są ponownie obliczane.
  • Usuwanie wszystkich elementów z DOM, które mają position: fixed;
  • Inspecting każdą linię Javascript (co było po prostu jQuery i kątowe kod rdzeń w moich testów) zgłoszone przez profilera aby sprawdzić, czy są one w Paul Irish's list of things that force layout/reflow
  • odtworzyć go na Androida, więc bez powodzenia mogłem używać doskonałych narzędzi dla Chrome. Problem dotyczy tylko iOS Safari, który można debugować tylko na komputerowym Safari.

Jak ustalić, co powoduje, że moje style są unieważniane w Safari na iOS?

Javascript timelines Layout timelines

+0

Jest to znany "problem" w iOS, zobacz tutaj: https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away. Użyj Fastclick.js, aby pomóc w złagodzeniu i myślę, że nowsze wersje iOS po 8 usunięciu "funkcji" opóźnienia kliknięcia. Mam nadzieję, że pomaga! –

+0

Nie jestem pewien, czy to jest to samo. Przewijanie szybciej reaguje na stronach o prostszej strukturze DOM, nie jest to statyczne opóźnienie. Jestem pewien, że jest to związane z unieważnianiem stylu. – adamdport

+0

Wobec tego samego problemu, jedynym sposobem, w jaki pracował, było przeglądanie wszystkich animowanych rzeczy na jednej stronie i próba wyłączenia go i sprawdzenie, czy pomogło. W moim przypadku reflow był spowodowany przez "animated =" true "" parametr komponentu z jonowego. –

Odpowiedz

2

Ten pracował dla mnie, kiedy debugowany podobny problem.

  1. Uzyskaj czas rozpoczęcia wydarzenia, które chcesz obejrzeć. Powinien znajdować się na drugiej do ostatniej kolumnie w widoku z twojego zrzutu ekranu.
  2. Kliknij kartę obok karty "Wydarzenia" o nazwie "Ramki".
  3. Poszukaj ramki o najbliżej dopasowanym czasie rozpoczęcia. (Czasami nie jest to dokładne)
  4. Rozwijanie ramki pozwala zobaczyć zdarzenia, które miały miejsce tuż przed/po wydarzeniu, na które patrzysz. W ostatniej kolumnie "Lokalizacja" możesz zobaczyć, gdzie powstał problem. Jeśli jest wypełniony, możesz kliknąć prawą strzałkę, aby zobaczyć linię, która spowodowała. ALE nie zawsze ma coś w kolumnie. Muszę wtedy spojrzeć na poprzednie wydarzenia, aby spróbować dowiedzieć się, jaki jest problem.

Nie jest idealny, ale udało mi się usunąć problemy, które napotkałem za pomocą tej metody. Mam nadzieję że to pomoże!