Как стать автором
Обновить

Комментарии 5

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

Я думал, что ответы легко определяются по мере продвижения по 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 разделе статьи


Ага, спасибо
Вообще много нового из статьи узнал.
Заодно вчера попытался разобраться с rAF в WebWorker, он видимо влияет только на OffscreenCanvas и никак не связан с event loop основного потока.
Так что даже если основной поток висит в
while(true);
worker может рисовать на канвасе, что очень круто.
По поводу 3: если автоматическая высота может быть разная (меняется контент), то это надо делать перед каждой анимацией?

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

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


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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории