Временная шкала Chrome - как я могу определить причину записи журнала "Пересчитать стиль"?

Профилирование страницы со встроенным регистратором временной шкалы в Chrome, я вижу повторяющиеся записи "Пересчитать стиль". У них нет очевидной информации, чтобы связать их с элементом или событием DOM.

Как я могу лучше определить причину этих записей?

Ответ 1

Мой совет вам будет использовать Chrome Canary для сборки Chrome. Paul Irish имеет хорошую демонстрацию использования Timeline в Chrome Dev Tools здесь

Вы можете просто щелкнуть по событию, например "Пересчитать стиль", и вы должны получить миниатюрный тракт стека, указывающий на то, где произошло событие в вашем коде.

Ответ 2

Я смог проверить, были ли переходы или анимации 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);
  }
});

Отключив анимацию по каждому из них отдельно, я смог определить, какой из них вызывает мои проблемы.

Ответ 3

Я почти уверен, что на вашей странице есть бесконечная повторяющаяся анимация. Это вызвало перерасчет стиля, не сказав, что вызвало его.

Ответ 4

У меня была одна и та же проблема (почему я нашел ваш вопрос).

Моя проблема была связана с переходом CSS3 на все свойство. Я был ленив, когда мне нужно было переходное дополнение.

Реализация этого единственного изменения сделала цикл

Ответ 5

Альтернативой опубликованной версии jQuery для исследования является простой однострочный интерфейс в консоли:

window.onanimationiteration = console.log;

Это будет печатать строку при каждом запуске анимации, включая имя анимации и элемент, в который применяется анимация.