Улучшение отзывчивости ввода текста

Нолан Лоусон написал статью про улучшение отзывчивости ввода текста в ресурсоёмких приложениях — "Improving responsiveness in text inputs".

Если приложению требуется некоторое время для обновления интерфейса, то это негативно сказывается на отзывчивости ввода текста. Для решения этой проблемы Нолан предлагает использовать requestIdleCallback. С его помощью можно запланировать выполнение ресурсоёмкой работы на тот момент, когда главный поток будет свободен, освобождая его для быстрой обработки ввода текста:

let queued = false
textarea.addEventListener('input', () => {
  if (!queued) {
    queued = true
    requestIdleCallback(() => {
      updateUI(textarea.value)
      queued = false
    })
  }
})

Поддержка метода requestIdleCallback есть в Firefox и Chrome. В Safari он находится за экспериментальным флагом.

#performance

https://nolanlawson.com/2021/08/08/improving-responsiveness-in-text-inputs/

Поиск причины деградации времени сборки Webpack 5

Оуэн Хэннесси поделился историей поиска бага, из-за которого время запуска dev-сервера Webpack замедлилось в пятнадцать раз — "Understanding why our build got 15x slower with Webpack 5".

Проблема возникла после добавления невинной тёмной темы. Первые подозрения упали на CSS-in-JS-библиотеку Linaria. С помощью профилировщика внутри библиотеки была найдена проблемная функция, в которой использовался метод массива .concat(). Переписывание кода без использования .concat() решило проблему. Однако оставались вопросы, из-за того что в оригинальном коде просадки скорости не было при сборке проекта с помощью Webpack 4. Надо было исследовать исходники V8.

В V8 у метода .concat() есть две ветки выполнения кода — медленная и быстрая. Медленная ветка начинает работать в том случае, если движок хотя бы один раз устанавливал Symbol.isConcatSpreadable. В Webpack 5 это происходило в коде, отвечающем за обратную совместимость с четвёртой версией. Для решения проблемы разработчики Webpack добавили экспериментальную опцию backCompat, которая полностью отключает обратную совместимость, избавляясь от ещё большего количества проблемного кода.

#v8 #performance #webpack

https://engineering.tines.com/blog/understanding-why-our-build-got-15x-slower-with-webpack