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;
lubtransform: 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?
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! –
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
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. –