Почему твой await fetch тормозит — и как это исправить

[danilovmy]

Спасибо @badcasedaily1 за статью, на паре мест прям вспомнил, что так и хотели сделать... но не хватило времени, было не до того и т.п. Это я про двойной option + get.

Пару вопросов появилось:

1. недавно было на habr - вы все еще пользуетесь axios? переходите на fetch. Тут появилось предложение опять переходить с fetch на "одиннадцать". А есть ли смысл? По бенчмаркам fetch и там и там очень близко, connection pool тоже есть.

2. Стриминговый json парсинг прекрасен в теории. Но мне казалось, что gzip на сервере отнимает все преимущества стриминга json, или я путаю и gzip сжимает json по частям?

Артем, спасибо еще раз за статью, приятно было освежить то что не знал и забыл.

[gudvinr]

zlib (и, соответственно, gzip тоже) не сжимает по частям, он сжимает поток

Он использует словарь, и потом ссылается на этот словарь далее по потоку.

При расжатии все наоборот, в начале потока клиент получает словарь и потом по ссылке на словарь распаковывает данные.

Т.к. словарь всегда в начале, ждать целиком не надо. Более того, обычно и не ждёт никто.

В деталях конечно сложнее всё, но суть примерно такая

[danilovmy]

@gudvinrспасибо за подсказку, а можно, пожалуйста, хоть какую-то ссылку на это, а то я, скорее всего, чего-то не понимаю. Посмотрел предложенный https://www.npmjs.com/package/stream-json не увидел упоминания чего-либо похожего на https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API. В итоге получается что json в stream-json не архивирован.

[movl]

В итоге получается что json в stream-json не архивирован.

В парсер stream-json необходимо направлять обычный текст

gzip на сервере отнимает все преимущества стриминга json

Речь в статье была про то, что парсинг JSON блокирует поток исполнения JS, а также требует выделения памяти сразу и на исходный текст, и на итоговый объект. Библиотека stream-json позволяет парсить большой JSON по частям, и соответственно блокировка будет происходит на короткое время, но много раз. Также за счет стрима, например, можно извлечь какую-то информацию из файла, размер которого превышает объем свободной памяти.

[amakhrov]

блокировка будет происходит на короткое время, но много раз

При этом суммарное время обработки одного конкретного запроса, скорее всего, будет больше, чем однократный `await response.json()`

[adminNiochen]

Статья интересная, но клиентский и серверный код свален в кучу

[ht-pro]

Я бы сказал, что в кучу свалена вся статья.

Но полезно.

[amakhrov]

Кое-где даже вредно, я бы сказал. Ни в одном из "фиксов" не указана область применения. Начитаешься тут и пойдешь такой лепить все фиксы на каждый fetch в своем проекте.

[tadaima]

В чем смысл кэширования DNS в nginx, если лочится поток на клиенте?

[muradali]

Круто что nextjs в своем fetch уже использует { request } from 'undici';

[polRk]

И где вы начитались про то, что фетч в 3 паза медленнее чем undici requests? я согласен с тем, что медленнее, но на реальных событиях это различие ничтожно мало

[Gagydzer]

В разделе про CORS

"Кэшируйте preflight на стороне сервера"

А этот кеш как-то обходится, если мы потом решим переконфигурировать респонс на опшинс?

[gen1lee]

{…data} это поверхностное копирование, и structured clone разумеется медленнее.

[ABrandt]

Используйте bun вместо ноды, там фетч нативный (не на js)

[amakhrov]

Сервер не умеет Brotli, а клиент не просит

Если чужой сервер не умеет, то ничего не поделаешь.

А клиент (`fetch`) и так просит brotli по умолчанию, незачем указывать Accept-Encoding вручную.

[Finesse]

Более того, если вы на клиенте указываете что-то в Accept-Encoding вручную, то вам также надо вручную этот формат декодировать, о чём автор статьи не упомянул.

[Finesse]

# nginx.conf

resolver 9.9.9.9 valid=300s;

Расскажите подробнее, как это должно помочь кешированию DNS в браузере или ноде? Судя по документации, этот параметр влияет только на то, как сам nginx резолвит домены в своей конфигурации.

import { Readable } from 'node:stream';
const enc = new TextEncoder();
const stream = Readable.from(
  bigArray.map(x => enc.encode(JSON.stringify(x) + '\n'))
);
await fetch('/bulk/ingest', { method: 'POST', body: stream });

Тут весь массив кодируется синхронно ещё до вызова fetch, то есть проблема не решена.