Хронология Chrome - как определить причину записи журнала «Пересчитать стиль»?

Question

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

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

Answer 1

Мой совет вам будет использовать Chrome Canary сборку Chrome.У Пола Айриша есть хорошая демонстрация использования временной шкалы в Chrome Dev Tools здесь

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

Answer 2

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

window.onanimationiteration = console.log;

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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