Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

[fransua]

Круто, а где ответы на задачки в начале статьи?

[xnim]

Я думал, что ответы легко определяются по мере продвижения по event loop, но да, их будет не лишним кратко описать:

1. Будет ли выведено "1" в консоль? Почему?

   
   

   function loop() {
     Promise.resolve().then(loop);   
   }
   setTimeout(() => {console.log(1)}, 0);
   loop();

   
   

   Ответ: 1 выведено не будет, страница зависнет. Дело в том, что на каждый виток loop, мы получаем микротаску, которая попадает в microtask queue и по окончании функции loop мы будем доставать следующую микротаску loop. До получения задачи из TaskQueue мы никогда не дойдем. Подробнее описано в разделе: Что же такое микротаски?

   
   

2. Есть сайт, а на сайте ссылка, у которой при наведении cursor: pointer ставится через :hover стиль CSS и кнопка, у которой также по :hover меняется background-color c серого на синий. Добавляем скрипт:

   
   

   while (true);

   
   

   Вопрос: Что будет если навести мышку на ссылку? А на кнопку? Почему?

   
   

   Ответ: Мы получаем бесконечный цикл, поэтому задачи из RenderQueue никогда выполнены не будут. Это означает, что мы вообще никогда не выполним ни один из этапов: Style\Paint\Layout\Composite, стили на :hover не применятся. Подробнее про это в TaskQueue

   
   

3. Как анимировать выпадающий элемент по height с 0 до auto? Здесь важно обсудить способы c помощью JS и/или CSS. Кстати, если гуглить этот вопрос, то stackoverflow вначале предлагает неверный ответ. Суть понимания event loop и работы браузеров сводится к тому, как замерить то самое height = auto с помощью JS.

   
   

   Если говорить про CSS решения, то можно использовать scaleY: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY. Если говорить про JS решения, то можно воспользоваться следующим подходом:

   
   

   div1.style.height = 'auto' // Запланировали изменение высоты
   const animateTo = div1.offsetHeight; // форсим layout, размеры будут пересчитаны, но пользователь изменений не увидит
   div1.style.height = '0' // возвращаем первоначальное значение

   
   

   После этого кода animateTo знает до какого размера анимировать элемент. Дальше уже дело техники. Подробнее почему так происходит можно почитать в блоке RenderQueue и в частности в Layout разделе статьи

   
   

[fransua]

Ага, спасибо
Вообще много нового из статьи узнал.
Заодно вчера попытался разобраться с rAF в WebWorker, он видимо влияет только на OffscreenCanvas и никак не связан с event loop основного потока.
Так что даже если основной поток висит в

while(true);

worker может рисовать на канвасе, что очень круто.

[Alexandroppolus]

По поводу 3: если автоматическая высота может быть разная (меняется контент), то это надо делать перед каждой анимацией?

scaleY совсем не то же самое, что height.

[xnim]

1) Да, конечно

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