React Native fetch и производительность XMLHttpRequest
Я пытаюсь понять, почему при использовании axios (который использует XMLHttpRequest) разбор большого (4-5 МБ json) занимает примерно в 10 раз больше, чем при использовании только fetch и .json() для результата. Хуже того, при использовании XMLHttpRequest весь пользовательский интерфейс перестает отвечать на запросы, а при использовании fetch может возникать крошечный блок при выполнении синтаксического анализа json, но пользовательский интерфейс в значительной степени реагирует на протяжении всего процесса загрузки.
Я не могу найти никакой документации о внутреннем устройстве fetch, но в устаревших блогах говорится, что он просто использует XMLHttpRequest для внутреннего использования. Если это так, то оба метода должны иметь одинаковую производительность.
Примечание. Эта разница была замечена как на Android, так и на IOS.
Ответы 2
...an easy, logical way to fetch resources asynchronously across the network. This kind of functionality was previously achieved using XMLHttpRequest. Fetch provides a better alternative that can be easily used by other technologies...
Fetch — это не просто оболочка для XMLHttpRequest. Это оправдывает разницу в производительности между двумя альтернативами.
Что я могу обнаружить, так это то, что синтаксический анализ JSON при выборке выполняется на более низком уровне, чем то, что делает axios. С axios это происходит позже в запросе, но в реактивном пакете синтаксический анализ JSON происходит сразу после получения ответа.
Дополнительный уровень возврата данных из XMLHttpRequest в виде строки в axios, который затем начинает синтаксический анализ данных, скорее всего, влияет на производительность.
Нативная версия fetch также является полифиллом, так что это не так. Разница в производительности заключается в том, как fetch анализирует данные прямо из XMLHttpRequest.
Похоже на то. Axios декодирует вывод JSON на стороне JS, а fetch делает это на нативной стороне?
Похоже, что выборка потока делает это, все еще находится в отдельном потоке, чем поток пользовательского интерфейса, что объясняет это. Коду сложно следовать, но он указывает на это.
В react-native
fetchзаполняетсяwhatwg-fetchи используетXMLHttpRequestвнутри. В Интернете вы правы; это другая реализация.