Ответ
Ответ не найден
Ответ 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); // ОЙ! Всё, пидарас шерстяной, интерфейс дёргается.
});
И что делать-то, спросишь? А варианты есть, не всё так плохо.
- Web Workers. Это, бля, самое правильное решение. Кидаешь эту тяжёлую работу в отдельный поток, пусть там себе
stringify/parseделает, хоть минуту, а главный поток в это время анимации крутит и на кнопки отвечает. Красота. - Разбивать на части. Не надо пытаться запихнуть в одну операцию объект размером с Библию. Можно разбить его на чанки и обрабатывать по очереди, между кадрами анимации. Есть такая штука —
setTimeoutилиrequestIdleCallback, чтобы работу по кусочкам делать. - Стриминговые решения. Для реально огромных JSON'ов уже с сервера. Читаешь его не целиком, а по кусочкам, как поток. Но это уже для продвинутых случаев, когда другие способы не катят.
Короче, суть в чём: JSON.stringify и parse — они, конечно, удобные, но это как молоток. Им гвоздь забить — одно дело, а если им весь дом строить пытаться, то это уже мудя полная. Нужно знать их слабое место и не тыкать им в самые ответственные и чувствительные места своего приложения. Иначе будет вам хиросима, а не быстрый интерфейс. Сам от себя охуеешь, когда поймёшь, где тормоза сидят.