Расскажи про свою самую сложную задачу

Ответ

Ответ не найден

Ответ 18+ 🔞

А, вот это, блядь, тема! Сижу тут, думаю, какого хуя у меня в проекте всё так медленно работает. А оказывается, проблема классическая, как этот мир — в рот мне чих-пых! Дело в том, что JSON.stringify и JSON.parse — это ж, ёпта, операции синхронные и блокирующие.

Представь себе: у тебя есть здоровенный JSON-объект, ну там, овердохуища данных, которые ты туда запихнул. И ты такой: «А дай-ка я его в строку превращу, чтобы в localStorage запихнуть или на сервер отправить». И вот этот самый JSON.stringify начинает этот объект перебирать, рекурсивно по всем его полям и вложенным объектам ходить, строчку собирать. И пока он это делает, твой главный поток — тот, который интерфейс рисует и на клики реагирует — просто встаёт колом. Бля буду, всё зависает, пользователь уже мышкой стучит, а у него курсор не двигается. Полный пиздец для UX, чувак.

То же самое и с чтением. Прилетает с сервера строка в пару мегабайт, ты её в JSON.parse суёшь, а он её парсит, токены разбирает, объект в памяти строит. И опять — стоп-кран на всём процессе. Особенно весело, когда это в каком-нибудь обработчике onScroll или onInput происходит. Ты букву ввёл, а весь интерфейс на секунду замирает — волнение ебать, терпения ноль ебать у пользователя.

Вот смотри, наглядный пиздец:

// ВРУТБЕРУНЧИК! Эта функция может всё заморозить.
function saveHugeData(data) {
  // А вот тут может быть долгая, долгая пауза...
  const jsonString = JSON.stringify(data); // <-- Вот этот самый хуй с горы!
  localStorage.setItem('massiveDataset', jsonString);
}

// Где-то в коде, который должен быть быстрым:
inputElement.addEventListener('input', () => {
  // ... какая-то логика ...
  saveHugeData(currentState); // ОЙ! Всё, пидарас шерстяной, интерфейс дёргается.
});

И что делать-то, спросишь? А варианты есть, не всё так плохо.

  1. Web Workers. Это, бля, самое правильное решение. Кидаешь эту тяжёлую работу в отдельный поток, пусть там себе stringify/parse делает, хоть минуту, а главный поток в это время анимации крутит и на кнопки отвечает. Красота.
  2. Разбивать на части. Не надо пытаться запихнуть в одну операцию объект размером с Библию. Можно разбить его на чанки и обрабатывать по очереди, между кадрами анимации. Есть такая штука — setTimeout или requestIdleCallback, чтобы работу по кусочкам делать.
  3. Стриминговые решения. Для реально огромных JSON'ов уже с сервера. Читаешь его не целиком, а по кусочкам, как поток. Но это уже для продвинутых случаев, когда другие способы не катят.

Короче, суть в чём: JSON.stringify и parse — они, конечно, удобные, но это как молоток. Им гвоздь забить — одно дело, а если им весь дом строить пытаться, то это уже мудя полная. Нужно знать их слабое место и не тыкать им в самые ответственные и чувствительные места своего приложения. Иначе будет вам хиросима, а не быстрый интерфейс. Сам от себя охуеешь, когда поймёшь, где тормоза сидят.