08:22. Не совсем ясно, что имеется ввиду под "примерно 60 раз в секунду браузер пытается перерисовать содержимое документа"? Утверждается, что 60 раз в секунду браузер делает repaint?
Имеется в виду подготовка каждого конкретного кадра. Этот процесс состоит из нескольких частей, в том числе и repaint. Но в рамках этого процесса подготовки кадра, некоторые шаги могут пропускаться, если браузер знает что JS не менял свойства элементов, которые влияют на конкретный шаг. Поэтому, если вы не меняете 60 раз в секунду свойство отвечающее за стадию paint, то и repaint не будет проходить 60 раз в секунду. В целом производительность UI отдельная интересная и глубокая тема. Немного подробностей можно почитать тут frarizzi.science/journal/web-engineering/browser-rendering-queue-in-depth (en) developers.google.com/web/fundamentals/performance/rendering (ru)
Хорошее видео жаль без терминологии микро и макро задач. А так очень круто особенно, понравилась картина когда созданы обработчики событий и они сидят в web-API
@@astrobrite540 например между завершением Slow Function и Main() (допустим что мэйн это тоже какая то функция, а не скрипт) будет вызов еще какой то функции.
@@astrobrite540 пользователь сам нагрузит стек часто кликая по неработающим элементам. Обычное поведение любого человека. Кстати , кто нибудь знает как приостановить клики в период блокировки стека?
Все хорошо. Проблема лишь в том, что никто не рассказывает, что очередей задач на самом деле не одна и что в разных статьях называют её по разному callback queue, message queue и тд. Сложно найти материал, рассказывающий как в действительности устроен eventloop и вызов task, microtask и nexttick, animationframe. Все повторяют одно и тоже год за годом )
Стэк?) На сколько я знаю это называется стёк на русском, что кстати сразу дает понятие того, как это работает) Хотя видео рассказано круто, дополняет немного то, что читаешь в документации)
await это уже работа с микро задачами, а объяснение было про callstack и eventloop, сам setTimeout является макро задачей, а асинхронные функции это уже микро задачи. Так что не нужно на автора гнать.
Спасибо. Саша как всегда максимально доходчиво и понятно объясняет любые самые сложные темы.
Вот так вот хорошо... Прям очень хорошо) вот в такие моменты возникает желание послушать что-нибудь ещё...)
Отличное объяснение! Спасибо :))
Лайк за простоту донесения материала
Идеальное объяснение для меня.
Идеальный комментарий для нас 🙂
Фига се круто обьяснил, спасибо!
Спасибо, за объяснение
Спасибо! Оч наглядно
08:22. Не совсем ясно, что имеется ввиду под "примерно 60 раз в секунду браузер пытается перерисовать содержимое документа"? Утверждается, что 60 раз в секунду браузер делает repaint?
Имеется в виду подготовка каждого конкретного кадра. Этот процесс состоит из нескольких частей, в том числе и repaint. Но в рамках этого процесса подготовки кадра, некоторые шаги могут пропускаться, если браузер знает что JS не менял свойства элементов, которые влияют на конкретный шаг.
Поэтому, если вы не меняете 60 раз в секунду свойство отвечающее за стадию paint, то и repaint не будет проходить 60 раз в секунду.
В целом производительность UI отдельная интересная и глубокая тема.
Немного подробностей можно почитать тут
frarizzi.science/journal/web-engineering/browser-rendering-queue-in-depth (en)
developers.google.com/web/fundamentals/performance/rendering (ru)
@@aleksandrgribanov Спасибо за ссылки! Теперь понятно, что Вы имели ввиду.
Полезно!
Хорошее видео жаль без терминологии микро и макро задач. А так очень круто особенно, понравилась картина когда созданы обработчики событий и они сидят в web-API
Спасибо, Максим! Рады, что вам понравилось.
Спасиб, автор
👍👍
Я так понимаю если во время выполнения Slow Function продолжать нагружать стек, то пользователь еще дольше будет ждать?
TrinoUNO как вы собираетесь нагружать стек
@@astrobrite540 например между завершением Slow Function и Main() (допустим что мэйн это тоже какая то функция, а не скрипт) будет вызов еще какой то функции.
@@astrobrite540 пользователь сам нагрузит стек часто кликая по неработающим элементам. Обычное поведение любого человека. Кстати , кто нибудь знает как приостановить клики в период блокировки стека?
@@andreygokhan6893 Как вариант блокировать элементы управления. Например через аттрибут disabled или css свойство pointer-events
@@aleksandrgribanov а как проверить что он кликает много раз или как проверить что стэк занят ??
Все хорошо. Проблема лишь в том, что никто не рассказывает, что очередей задач на самом деле не одна и что в разных статьях называют её по разному callback queue, message queue и тд. Сложно найти материал, рассказывающий как в действительности устроен eventloop и вызов task, microtask и nexttick, animationframe. Все повторяют одно и тоже год за годом )
Почему же никто? Вот профессиональный разбор Node.js EventLoop на русском: ua-cam.com/video/7f787SsgknA/v-deo.html
@@Ekzalt да это наверно самое подробное видео за всё время )
Стэк?)
На сколько я знаю это называется стёк на русском, что кстати сразу дает понятие того, как это работает)
Хотя видео рассказано круто, дополняет немного то, что читаешь в документации)
доклад на уровне джуна
а что не было сказано?
Ахаха конечно, если есть авейт то нихрена не работает как обьяснили.
await это уже работа с микро задачами, а объяснение было про callstack и eventloop, сам setTimeout является макро задачей, а асинхронные функции это уже микро задачи. Так что не нужно на автора гнать.
Зачем мне джуны в рекомендациях?
Однотипные видео