Понимание временной шкалы Chrome Dev Tools

Question

Я пытаюсь понять, почему у меня есть несколько длинных кадров, о которых сообщает Chrome Dev Tools.

Первая строка (вершина стека вызовов) в диаграмме пламени в основном Timer Fired события, вызванные jQuery.Deferred()S выполняет кучу $(function(){ }); готовые функции.

Если я копаюсь в источнике jQuery и заменяю их использование setTimeout с requestAnimationFrame диаграмма пламени не сильно меняется, я все еще получаю, как многие из rAF стреляют в одном кадре (как сообщили разработчики), создавая длинные кадры. Я ожидал сделать следующий псевдокод:

window.requestAnimationFrame(function() {
    // do stuff
});

window.requestAnimationFrame(function() {
    // do more stuff
});

выполняться на двух разностных анимационных кадрах. Разве это не так?

Весь JS, который выполняется, необходим, но что я должен сделать, чтобы выполнить его как "микро-задачи" (как указано, но не объяснено здесь https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution), когда setTimeout а также rAF кажется, не достичь этого.

Обновить

Вот увеличенный снимок одного из длинных кадров, в котором, по-видимому, нет перефразирования (принудительного или иного). Почему все обратные вызовы rAF здесь выполняются в одном кадре?

Спасибо

Answer 1

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

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

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

Диагностика принудительных синхронных макетов - это хорошо объясненная статья, в которой есть простой демонстрационный пример для обнаружения принудительного перекомпоновки в DevTools и способы его устранения.

Возможно, стоит также попробовать FastDom- библиотеку для пакетного чтения и записи. Это в основном система очередей, и она более масштабируема.

Дополнительный источник: Что заставляет компоновку / перекомпоновку, Пол Ириш, содержит исчерпывающий список свойств и методов, которые форсируют компоновку / перекомпоновку.

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

Посмотрите Кадры Анимации из спецификации HTML для большего количества деталей реализации.

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