Как определить, что вызывает "Стили недействительны" в Safari iOS?

Я прогоняю проблему производительности при прокрутке на iOS. На обоих touchstart и touchend Safari недействителен, а затем пересчитывает стили, что приводит к небольшой задержке до того, как прокрутка откликается. У инструментов Safari есть столбец "инициатор", но в моих тестах он пуст.

Я пробовал:

  • Применение элемента will-change: transform; или transform: translateZ(0); в элементе прокрутки. Это очень помогло Chrome, но ничего не делает для iOS Safari. Профилировщик все еще сообщает, что стили пересчитываются.
  • Удаление всех элементов из DOM, имеющих position: fixed;
  • Проверка каждой строки Javascript (который был только кодом ядра jQuery и Angular в моих тестах), сообщенным профилировщиком, чтобы узнать, находятся ли они в Paul Irish список вещей, которые заставляют компоновку/оплату.
  • Воспроизвести его на Android, чтобы я мог использовать инструменты звездного разработчика Chrome без успеха. Проблема затрагивает только iOS Safari, которая может быть отлажена только с рабочего стола Safari.

Как я могу определить, что заставляет мои стили быть недействительными в iOS Safari?

Временные рамки Javascript Временные рамки компоновки

Ответы

Ответ 1

Это работало для меня, когда я отлаживал аналогичную проблему.

  • Получить время начала события, которое вы хотите изучить. Должен быть на втором в последнем столбце, когда в представлении с экрана.
  • Перейдите на вкладку рядом со вкладкой "События" под названием "Кадры".
  • Посмотрите на фрейм с самым близким временем начала. (Иногда это не точно)
  • Расширение фрейма позволяет увидеть события, которые произошли прямо перед/после события, которое вы просматриваете. В последнем столбце "Местоположение" вы можете увидеть, где была вызвана проблема. Если он заполнен, вы можете щелкнуть стрелку вправо, чтобы увидеть линию, вызвавшую ее. НО, но у него не всегда есть что-то в столбце. Я должен посмотреть на предыдущие события, чтобы попытаться выяснить, в чем проблема.

Это не идеально, но я смог отладить проблемы, с которыми столкнулся этот метод. Надеюсь, это поможет!