Profilowanie strony za pomocą wbudowanego rejestratora osi czasu w przeglądarce Chrome powoduje wyświetlenie powtarzających się wpisów "Przelicz styl". Nie mają żadnych oczywistych informacji, aby połączyć je z elementem DOM lub wydarzeniem.Periodę Chrome - jak ustalić przyczynę wpisu dziennika "Przelicz styl"?
Jak najlepiej określić przyczynę tych wpisów?
Moja rada to skorzystanie z wersji Chrome w wersji Chrome Canary. Paul Irish ma dobrą demonstrację korzystania z Osi czasu w Chrome Dev Tools here
Możesz po prostu kliknąć wydarzenie, na przykład "Przelicz styl" i powinieneś otrzymać miniaturowy ślad stosu wskazujący miejsce zdarzenia w twoim kod.
Po prostu miałem ten sam problem (dlatego znalazłem twoje pytanie).
Mój problem był spowodowany przez przejście CSS3 wszystkich właściwości. Byłem leniwy, kiedy potrzebowałem tylko przejścia.
wykonawczego wynika, że pojedyncza zmiana wykonana pętlę
Skąd się dowiedziałeś, co go spowodowało? –
To więcej niż dwa lata temu, więc przepraszam, jeśli moja pamięć jest nieco niejasna.;) Ale myślę, że właśnie zrobiłem próbę i błąd. Usunięto wszystkie przejścia, a następnie dodałem wszystkie, dopóki nie zobaczyłem problemu. Kiedy znalazłem tylko problemy powodujące problemy, ograniczyłem przejście do jednej, potrzebnej mi rzeczy. Więcej szczęścia niż cokolwiek innego ... – jBoive
Jestem prawie pewien, że masz jakieś nieskończoną powtarzający animację na swojej stronie. To właśnie spowodowało ponowne obliczenie stylu bez konieczności wypowiedzenia przyczyny.
Udało mi się sprawdzić, czy przejścia CSS lub animacje wyzwalają ponowne obliczenia na mojej stronie. Kiedyś jQuery to zrobić, ale można użyć, co chcesz:
$('*').css('transition', 'none');
$('*').css('animation', 'none');
To skutecznie blokuje przejścia i animacje na każdym elemencie strony. Sprawdziłem je po jednym na raz, a potem ponownie przedstawiłem profilowanie. W moim przypadku winowajcą były animacje.
.css('animation') powróci coś
"myCustomAnimation 15s linear 0s infinite normal none running"
lub jeśli nie ma animacji,
"none 0s ease 0s 1 normal none running"
Więc po odświeżeniu (aby ponownie włączyć animacje), następujący fragment rejestruje każdy element, który ma animację zdefiniowano:
$('*').each(function(){
if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want
console.log(this);
}
});
Wyłączenie animatu jony każdego z osobna, udało mi się ustalić, który powodował moje problemy.
Sugestia JQuery była niesamowicie pomocna, ponieważ pozwala na bardzo szybką diagnozę. To szybko znalazło źródło problemu dla mnie - animacja z 'animation-iteration: infinite' konsekwentnie unieważniała CSS i przerysowywała, nawet jeśli element, którego dotyczy ten problem, nie był wyświetlany na ekranie. – jpolitz
Alternatywą dla oddelegowanego wersji jQuery dla dochodzenia jest prosta-liner w konsoli:
window.onanimationiteration = console.log;
To będzie drukować linię za każdym razem kilka biegnie animacji, w tym nazwę animacji i elementu gdzie zastosowano animację.
To było całkiem pomocne demo, ale są też wpisy "Przelicz styl", które nie pokazują śladu stosu i nie wydają się być dołączone do żadnego kodu. Kiedy pojawia się wiele elementów, otrzymuję ten wpis za każdym razem, gdy klikam, ale nie jestem w stanie prześledzić, dlaczego musi on ponownie przeliczyć. – redbmk
Otrzymuję to pochodzący z mniejszego GC. Sądzę, że powodzenia w ustaleniu tego. –