Профилирование страницы со встроенным регистратором временной шкалы в Chrome, я вижу повторяющиеся записи "Пересчитать стиль". У них нет очевидной информации, чтобы связать их с элементом или событием DOM.
Как я могу лучше определить причину этих записей?
Мой совет вам будет использовать Chrome Canary для сборки Chrome. Paul Irish имеет хорошую демонстрацию использования Timeline в Chrome Dev Tools здесь
Вы можете просто щелкнуть по событию, например "Пересчитать стиль", и вы должны получить миниатюрный тракт стека, указывающий на то, где произошло событие в вашем коде.
Я смог проверить, были ли переходы или анимации CSS инициировать пересчеты на моей странице. Я использовал jQuery для этого, но вы можете использовать все, что хотите:
$('*').css('transition', 'none');
$('*').css('animation', 'none');
Это эффективно отключает переходы и анимации для каждого элемента вашей страницы. Я запускал их по одному, а затем перебирал профилирование. В моем случае анимация была виновником.
.css('animation') вернет что-то вроде
"myCustomAnimation 15s linear 0s infinite normal none running"
или если анимация отсутствует,
"none 0s ease 0s 1 normal none running"
Итак, после обновления (для повторного использования анимаций) следующий фрагмент регистрирует каждый элемент с определенной анимацией:
$('*').each(function(){
if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want
console.log(this);
}
});
Отключив анимацию по каждому из них отдельно, я смог определить, какой из них вызывает мои проблемы.
Я почти уверен, что на вашей странице есть бесконечная повторяющаяся анимация. Это вызвало перерасчет стиля, не сказав, что вызвало его.
У меня была одна и та же проблема (почему я нашел ваш вопрос).
Моя проблема была связана с переходом CSS3 на все свойство. Я был ленив, когда мне нужно было переходное дополнение.
Реализация этого единственного изменения сделала цикл
Альтернативой опубликованной версии jQuery для исследования является простой однострочный интерфейс в консоли:
window.onanimationiteration = console.log;
Это будет печатать строку при каждом запуске анимации, включая имя анимации и элемент, в который применяется анимация.