Сетевой запрос на 314 КБ Фоновое изображение в приложении Angular 2 занимает 14 секунд.
У меня возникают некоторые очень неприятные проблемы со временем загрузки веб-приложения, которое я создаю, и у меня нет большого опыта работы с сетями, поэтому мои попытки диагностировать проблему не слишком далеко зашли.
Как я сказал в описании, я использую Angular 2 для сборки приложения. На домашней странице есть фоновое изображение полной страницы, сжатое до размера около 314 КБ. Фоновое изображение помещается в div размером с браузер в файле css компонента домашней страницы. Я размещаю его из корзины Amazon S3. Я использую инструмент angular cli, поэтому я использовал команду 'ng build', чтобы собрать приложение в папку dist / и загрузить его в корзину s3. Когда я отправился в конечную точку для корзины, чтобы протестировать приложение, потребовалось почти 14 секунд, чтобы сетевой запрос был выполнен только для фонового изображения.
Ниже приведен обрезанный снимок экрана с вкладки "Сеть" в инструментах разработчика Chrome. Я заметил две интересные вещи о запросе. Во-первых, почти вся длина запроса находится в состоянии "остановлено", которое представлено серой полосой. Я не совсем уверен, что это значит или что будет причиной этого. Согласно некоторой документации Google для функции "Инструменты разработчика", это обычно означает, что браузер уже делает максимальное количество запросов, которые ему разрешено делать за один раз (6 для chrome), и поэтому запрос ожидает один из те, которые должны быть завершены до его запуска, однако это, кажется, не имеет смысла, потому что на протяжении всего времени запрос изображения "останавливается", это единственный запрос, который еще не завершен. Вторая интересная вещь, которую я заметил, заключается в том, что файл 'initiator' для практически любого другого запроса был zone.js, тогда как инициатором для запроса фонового изображения был config.js. Я не уверен, имеет ли это какое-то значение или нет, но, похоже, это как-то связано с этой проблемой.
Я довольно новичок в разработке внешнего интерфейса и JavaScript в целом, поэтому мне жаль, если я не предоставляю нужную информацию, но если есть какая-либо другая информация, которая поможет вам понять проблему, просто дайте мне знать, и я ' достану это для тебя.