HTTP/2의 우선순위 제어에 따른 영향의 가시화

HTTP/2의 우선순위 제어가 미치는 영향을 시각적으로 설명합니다.
이 글은 https://nghttp2.org/blog/2014/11/16/visualization-of-http-slash-2-priority/의 일본어 번역에 독창성에 대한 설명을 첨가했다.
본론으로 들어가기 전에 HTTP의 우선 제어에 대해 말씀드리겠습니다.HTTP/1.1에 우선순위 기능이 없습니다.브라우저는 자신의 설명에 따라 여러 연결에서 자원 요청을 스케줄링하는 순서를 통해 우선 제어를 실현했다.SPDY는 기본적으로 하나의 도메인으로 하나의 도메인을 연결하고 이를 바탕으로 다중 재사용을 요구합니다.out of order에서 처리할 수 있지만 파일 크기가 큰 이미지 데이터가 CSS와 Javascript를 차단하면 페이지 표시가 지연될 수 있기 때문에 프로토콜에 우선 제어 기능이 포함되어 있습니다.SPDY는 음수가 아닌 정수 값에 따라 우선 순위를 지정합니다.0은 가장 높은 우선순위를 의미한다.
HTTP/2는 dependency based priority라는 구조를 가져옵니다.
모든 요청 (흐름) 간의 의존 관계를 설정합니다.
의존 관계는 나무 구조로 높은 우선순위의 흐름일수록 뿌리에 가까운 부분이다.이 나무는 dependency tree라고 합니다.주요 설정은 고객이 서버에 대한 일방적인 알림이고 서버는 이런 정보를 고려하여 자원을 처리한다.
HTTP/2는 의존 관계에 weight를 설정할 수 있는데 이것은 같은 의존 대상의 흐름 사이의 네트워크와 CPU 자원 분배의 비율을 결정하는 것이다.흐름이 다른 흐름에 의존하지 않을 때 weight는 SPDY의 기초처럼 사용할 수 있다고 생각합니다.그러나 weight와 의존 관계는 결정적인 차이가 있다.
의존 관계가 존재하면, 흐름은 모든 의존 하위 흐름을 막기 위해 작동합니다.weight는 그렇지 않습니다. weight의 분배에 따라 얽히는 일이 기대됩니다.웨이트의 높은 흐름이 웨이트의 작은 흐름을 막는 것을 원하지 않는다는 것이다.
HTTP의 프라이버시에 대해 약간 건성건성 이야기했다.1개의 연결에 여러 개의 요청이 다중으로 복원된 HTTP/2, SPDY에 대해서는 우선권이 있어야 하며, 이것이 없으면 HTTP/1.1보다 더 나쁜 사용자 Experience를 초래할 수 있음을 이해해 주십시오.그럼 본론으로 들어갑시다.HTTP/2에서 우선권을 지정한 경우 지정하지 않은 경우의 차이는 시각적으로 비교됩니다.
nghttp2 라이브러리는 이 글을 쓸 때 HTTP/2 dependency based priority를 구현하는 소수의 구현 중 하나입니다.이 실험에서nghttp2에 포함된nghttp 클라이언트를 사용합니다.nghttp 클라이언트는 명령선 HTTP/2 클라이언트로HARD 형식으로 HTTP/2의 흐르는 업무를 출력하는 기능을 가진다.HAR file viewer를 사용하여 이 HARQ 파일을 시각화합니다.
nghttp 클라이언트는 다음 규칙에 따라 리소스의 우선 순위를 결정합니다.

HTML(최대)

CSS(높음)

Javascripts(JS)(중)

이미지(낮음)

이것은 서버에서 CSS, 자바스크립트가 그림보다 먼저 불러오는 측면을 시뮬레이션한 것입니다.모든 브라우저가 이 원칙을 따르는 것은 아니다. 일반적으로 이 순서에 따라 자원을 불러와야 하는 것은 아니다.시험적 통제를 위한 규칙이다.
ghttp 클라이언트에서 -a 옵션을 제공하면 다운로드한 HTML에서 정적 자원 링크 (e.g.CSS, 자바스크립트, 이미지) 를 찾아서 다운로드합니다.Javascript를 설명하지 않기 때문에 동적 내용은 지원되지 않습니다.
웹 자원은 http2rulez의 데이터를 사용했다.서버의 구현은 ghttp2에 포함된 ghttpx 프록시 서버를 사용하여 백엔드에 ginx를 설정합니다.
그럼 우선 통제가 없는 상황을 살펴봅시다.

CSS는 연한 주황색, Javascript는 연한 빨간색으로 표시됩니다.보시다시피 CSS, Javascript 파일은 이미지와 교차하여 전송되며 전송 완료 시간은 뒤에 있습니다.bootstrap.css는 417.3ms, jquery-ui입니다.min.js는 468.9밀리초를 썼고, 이 마운트가 완료되었을 때 대부분의 그림의 마운트도 끝났다.
우선 제어를 지정하면 어떤 변화가 생길까.다음은 우선 순위 제어를 지정할 때의 그림입니다.

CSS에서 Javascript 파일의 마운트가 일찍 완료된 것 같습니다.독창적인 제어에 따라 이미지의 전송은 CSS, 자바스크립트보다 느리게 제어된다.bootstrap.css는 62.6ms, jquery-ui입니다.min.js는 159ms로 불러옵니다.
이렇게 하면 HTTP/2 프로토콜에서 우선권을 가져옵니다.우선 제어를 사용하면, 고객은 일찍 불러올 자원을 지정할 수 있습니다.페이지 레이아웃에 필요한 자원의 우선도를 높이면 사용자 자원의 향상을 기대할 수 있다. 예를 들어 페이지를 신속하게 표시하기 시작하는 등이다.
이 원고를 작성할 때 Firefox, Chrome는 dependency based priority를 실현하지 못했지만 두 개발자 모두 실시한다는 말을 들은 적이 있다.이러한 메인스트림(MainStream) 브라우저가 지원되기 시작하면서 Google 등 트래픽이 많은 웹 사이트의 서버들도 이를 기대하고 있습니다.
요컨대 현재 규격은'HTTP 2.0'이 아니라'HTTP/2'또는'HTTP2'의 정확한 명칭이다.