HTTP / 2 Server Pu sh приводит к дублированию запросов - PullRequest
1 голос
/ 05 января 2020

Ответ для документа со следующими заголовками вводится Nginx:

link: </picture.jpg>; as=image; rel=preload
link: </_next/static/chunks/commons.4e96503c89eea0476d3e.module.js>; as=script; rel=preload
link: </_next/static/runtime/main-3c17cb16bbbc3efc4bb5.module.js>; as=script; rel=preload
link: </_next/static/runtime/webpack-0b10894b69bf5a718e01.module.js>; as=script; rel=preload
link: </_next/static/Q53NXtgLT1rgpqOOsVV6Q/pages/_app.module.js>; as=script; rel=preload
link: </_next/static/Q53NXtgLT1rgpqOOsVV6Q/pages/index.module.js>; as=script; rel=preload

С помощью HTTP / 2 Server Pu sh запросы отправляются клиенту, но 5 из 6 запросов загружаются два раза (один раз с pu sh и один раз вызван документом). Вкладка «Сеть» в Chrome Dev Tools выглядит следующим образом: network graph Я проверил, правильно ли установлен Type и все ли в порядке. В чем может быть проблема?

Последовательные запросы (chrome кэш включен) также приводят к аналогичному результату: network graph with cache enabled

Что может быть не так? Я почти уверен, что запрос не должен дублироваться ). Работает без проблем. Проблема появляется, когда я использую Nginx. push via nodejs

Кстати. Я действительно знаю, что не следует извлекать весь контент через сервер Pu sh, особенно изображения, но я сделал это только для ясного теста. Если вы посмотрите поближе, кажется, что дублируются только сценарии, а картинка загружается только один раз.

Ответы [ 2 ]

0 голосов
/ 06 января 2020

Суть проблемы на самом деле хром. Эта вещь дает сбой только в Chromium из того, что я вижу.

Проблема с Nginx заключается в реализации http2_push_preload.

Что ищет Nginx, так это заголовок с Link: </resource>; as=type; rel=preload. Он читает его и передает файлы через pu sh, к сожалению, когда браузер (на самом деле я проверял только Chrome) получает документ с заголовком Link, а также с конфликтом Pu sh, что приводит к значительному замедлению и загружает ресурсы, которые были замечены при анализе документа.

# This results in HTTP/2 Server Push and the requests get duplicated due to the `Link` headers that were passed along
location / {
    proxy_pass http://localhost:3000;
    http2_push_preload on;
}

# This results in Resource Hints getting triggered in the browser.
location / {
    proxy_pass http://localhost:3000;
}

# This results in a regular HTTP/2 (no push)
location / {
    proxy_pass http://localhost:3000;
    http2_push_preload on;
    proxy_hide_header link;
}

# This result in a valid HTTP/2 Server Push (proper)
location / {
    proxy_pass http://localhost:3000;
    http2_push /commons.4e96503c89eea0476d3e.module.js;
    http2_push /index.module.js;
    http2_push /_app.module.js;
    http2_push /webpack-0b10894b69bf5a718e01.module.js;
    http2_push /main-3c17cb16bbbc3efc4bb5.module.js;
}

Кажется, Nginx пока не работает с этой функцией ...

Если бы я только мог удалить Link заголовки и использование http2_push_preload ...

В любом случае, я заставил его работать с использованием H2O H2O, что позволило мне удалить заголовки при сохранении сервера HTTP / 2 Pu sh

// h2o.conf
  [...]
  proxy.reverse.url: "http://host.docker.internal:3000/"
  header.unset: "Link"

Работает нормально с H2O: H2O success Надеюсь Nginx исправляет способ работы http2_push_preload и обеспечивает больший контроль.

Вдоль стороны, я думаю, что Хром должен решить проблему в любом случае, вместо того, чтобы загружать в 2 раза больше байтов.

0 голосов
/ 05 января 2020

Ваш HTML запрашивается по обычному «учетному» соединению. Затем он выталкивает JPG и JS по этому соединению.

Ваша страница затем также загружает через anonymous настройки перекрестного источника. Поэтому он не может использовать ресурсы выталкивания и запрашивает их снова.

Подробнее см. Здесь: https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/#requests -without-credentials-use-Отдельное-соединение

Btw рекомендации предназначены только для pu sh небольшого количества и не всех ресурсов, необходимых странице. Если вы даже хотите использовать pu sh, то это сложный процесс, а результаты не доказали, что они в целом стоят такой сложности.

...