ASP.NET 4.6 및 IIS10에서 HTTP/2 활용

ASP.NET 4.6 및 IIS10에서 HTTP/2 활용

지난 10년 동안 웹은 여러 차례 큰 발전을 이루었습니다. 기본 HTML에서 웹 페이지는 더 풍부한 모양과 느낌을 개발했으며 매일 더 직관적이고 사용자 친화적이며 광택이 나고 있습니다.

6min read

지난 10년 동안 웹은 여러 차례 큰 발전을 이루었습니다. 기본 HTML에서 웹 페이지는 더 풍부한 모양과 느낌을 개발했으며 매일 더 직관적이고 사용자 친화적이며 광택이 나고 있습니다.

이러한 변화의 주요 원인은 최신 하드웨어와 향상된 인터넷 연결로 지원되는 새롭고 개선된 기술입니다. 그러나 성능은 처음부터 웹 응용 프로그램의 관심사였습니다.

지난 몇 년 동안 JavaScript 라이브러리, CSS 라이브러리 및 플러그인의 폭발로 인해 각 페이지에서 많은 JavaScript, CSS, 이미지 및 기타 리소스 파일에 액세스할 수 있게 되었습니다. 페이지가 서버에 대한 50개 이상의 HTTP 요청을 시작하는 많은 시나리오가 있습니다. 각 요청은 서버에 대한 새 TCP 연결을 만들고, 파일을 검색하고, 연결을 닫습니다. 이는 서버에 50개 이상의 TCP 연결이 이루어짐을 의미합니다. 각 연결을 만들고 삭제하는 것은 많은 프로세스이며, 그 외에도 많은 브라우저는 동시 연결 수를 일반적으로 4개에서 8개로 제한합니다.

HTTP 프로토콜도 지난 15년 동안 크게 변하지 않았습니다. 요즘 사용되는 HTTP1.1은 1997년에 정의되었고, 그 이후로 웹은 많이 바뀌었다. IETF(Internet Engineering Task Force)는 새로운 과제를 이해하고 POC와 함께 한동안 이 문제를 해결하기 위해 노력했습니다. 이제 그들은 현재 표준화 과정에 있는 HTTP/2라는 HTTP 프로토콜의 또 다른 새 버전을 고안했습니다.

HTTP/2란 무엇입니까?

HTTP/2는 HTTP 프로토콜의 두 번째 주요 버전으로, 주로 페이지 로드 속도를 개선하기 위해 대기 시간을 줄이는 데 중점을 둡니다. Google의 SPDY 프로토콜을 기반으로 하며 다음과 같은 주요 항목을 다룹니다.

  • 단일 TCP 연결에서 여러 요청을 병렬로 로드
  • HTTP 헤더에서 압축 사용
  • 서버가 클라이언트에 콘텐츠를 푸시할 수 있도록 허용

이전 버전과 어떻게 다릅니까?

HTTP 설계의 초기 버전은 각 요청에 대해 새로운 TCP 연결을 사용했으며, 여기에는 연결 및 기타 패킷 설정이 포함되어 시간이 많이 걸렸습니다. 파이프라이닝이 도입된 HTTP 1.1에서는 이론적으로 단일 연결에서 여러 요청을 보낼 수 있도록 하는 많은 변경이 이루어졌습니다. 그러나 요청과 응답은 동기적으로 처리되었습니다. HTTP/2는 하나의 TCP 연결을 열고 멀티플렉싱을 사용하는 SPDY 프로토콜을 기반으로 하며, 이를 통해 응답을 기다리지 않고 많은 요청을 동시에 보낼 수 있습니다. 그림으로 보자.

HTTP/2는 하나의 TCP 연결을 열고 멀티플렉싱을 사용하는 SPDY 프로토콜을 기반으로 하며, 이를 통해 응답을 기다리지 않고 많은 요청을 병렬로 보낼 수 있습니다.

그 외에도 HTTP 헤더를 압축하고 앞에서 언급한 대로 서버 푸시를 활성화합니다. 아래 예에서 페이지 로드에 어떤 영향을 미치는지 살펴보겠습니다.

ASP.NET 4.6을 사용하여 작동하는 HTTP/2

일반적인 웹 페이지는 JavaScript 파일, CSS 파일, 이미지 등과 같은 다양한 리소스를 참조합니다. 아래 예제에서는 Visual Studio 2015를 사용하여 샘플 ASP.NET 4.6 빈 웹 양식 응용 프로그램을 만들고 웹 페이지에서 동일한 것을 참조하는 솔루션에 다른 리소스를 추가했습니다. 그런 다음 응용 프로그램과 여러 리소스에 웹 양식을 추가했습니다 (아래 참조).

<head runat="server">
    <title>HTTP2 Demo using ASP.NET Web forms 4.6</title>
    <!-- CSS resources -->
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Site.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <!-- Image resources-->
        <img src="Content/images/img1.jpg" />
        <img src="Content/images/img2.jpg" />
         <!-- For demo, there are eight images added, but removed here for brevity-->
 
    </div>
     <!-- JavaScript file resources -->
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
   <!-- For demo, total six file added, but removed here for brevity-->
 </form>
</body>
</html>

위의 페이지는 실시간 페이지를 모방하기 위해 19개의 서로 다른 리소스(CSS 3개, 이미지 8개, JS 파일 8개)를 참조합니다. 그 후 Win Server 2016의 IIS10에 응용 프로그램을 배포했습니다 (Windows 10도 사용할 수 있음). 이제 응용 프로그램을 테스트할 차례입니다.

테스트 결과

먼저 HTTP 1.1을 사용하여 이 애플리케이션을 실행하고 로드 시간을 분석합니다. 그런 다음 HTTP2로 이동하여 차이점을 확인합니다. 응용 프로그램을 실행하고 개발자 도구 모음의 네트워크 탭을 살펴 보겠습니다 (대부분의 최신 브라우저는 F12를 눌러 열 수있는 개발자 도구 모음을 제공합니다). 그러면 웹 페이지에 대해 발생한 요청 수, 대기 시간, 시작 시간, 로드 시간 및 기타 관련 세부 정보가 표시됩니다.

응용 프로그램을 실행하고 개발자 도구 모음의 네트워크 탭을 살펴 보겠습니다 (대부분의 최신 브라우저는 F12를 눌러 열 수있는 개발자 도구 모음을 제공합니다).

​ 위 이미지의 세부 사항을 자세히  살펴보 면 세 번째 열(프로토콜)에서 참조 되는 HTTP1.1 프로토콜을 사용하고 있음을 알 수 있습니다. 또한 모든 JavaScript, CSS 및 이미지 파일을 예상대로 로드했지만 시작 시간은 다릅니다. 이전 요청이 완료되면 여러 요청을 시작할 수 있었다는 것은 분명합니다. 마지막 요청은 브라우저의 병렬 연결 수에 대한 제한으로 인해 약 4.5초를 기다려야 했습니다. 이 페이지의 전체 로드 시간은 약 9.59초입니다.

이제 프로토콜을 HTTP2로 전환하여 동일한 페이지를 열고 차이점을 살펴보겠습니다. 이렇게 하려면 주소 표시줄의 URL을 HTTP에서 HTTPS로 변경하고 페이지를 다시로드한 다음 개발자 도구 모음에서 네트워크 탭을 다시 확인해야 합니다.

프로토콜을 HTTP2로 전환하여 동일한 페이지를 열고 차이점을 확인해보겠습니다

여기서는 타임라인이 완전히 다르게 보이고 모든 요청이 동시에 시작되었습니다. 또한 페이지의 로드 시간이 80% 단축되어 이제 약 2초가 단축되었습니다. 모든 요청이 http1.1에서 동기식 서버 병렬로 전송되었음을 분명히 보여줍니다. 마지막 요청의 대기 시간은 70ms에 불과합니다.

최근에는 번들링 및 축소와 같은 몇 가지 기술을 사용하여 성능을 향상시키지만 몇 가지 제한 사항도 있습니다(예: JavaScript 및 CSS 파일에만 적용 가능). 각 파일 형식은 서로 다른 번들에 추가해야 합니다. 하나의 번들에 중복 파일을 포함하는 것도 권장되지 않습니다. 다양한 애플리케이션 페이지에서의 사용량에 따라 여러 번들을 만들어야 합니다. HTTP2를 사용하면 개발자가 이러한 기능을 사용할 필요가 없습니다. TCP 연결을 하나만 만들고 서로 다른 모든 리소스를 동시에 다운로드하기 시작하여 많은 시간을 절약하고 개발자의 부담을 덜어주기 때문에 이러한 문제를 해결합니다.

참고 – 현재 HTTP2는 SSL에서만 작동합니다. 그래서 HTTP1.1을 사용하는 HTTP를 사용하여 먼저 동일한 페이지를 연 다음 HTTP2 프로토콜 (여기서는 h2로 표시됨)을 사용하는 https: 를 사용했습니다.

결론

이 게시물에서는 현재 웹 개발 관행과 우리가 직면한 성능 문제에 대해 논의했습니다. HTTP2에 대한 논의를 계속하여 Visual Studio 2015를 사용하여 IIS10(Windows 10 및 Windows Server 2016) 및 ASP.NET 4.6과 함께 사용할 수 있음을 확인했습니다. 그런 다음 JS, CSS 및 이미지를 포함한 여러 리소스가 포함된 샘플 페이지를 만들었습니다. HTTP2를 사용하면 로드 시간이 75% 이상 절약되었으며, 이는 궁극적으로 현재 우리에게 익숙한 성능 문제가 곧 과거의 일이 될 것임을 보여줍니다!

웹 앱용 jQuery HTML5 컨트롤을 사용해 보고 강력한 기능을 즉시 활용할 수 있습니다.지금 무료 평가판을 다운로드하세요!

어떻게
데모 요청