ASP.NET 4.6 と IIS10 での HTTP/2 の活用

ASP.NET 4.6 と IIS10 での HTTP/2 の活用

過去10年間で、Webは何度も大きな進歩を遂げました。基本的なHTMLから、Webページはより豊かなルックアンドフィールを開発し、日々直感的でユーザーフレンドリーで光沢を増しています。

6min read

過去10年間で、Webは何度も大きな進歩を遂げました。基本的なHTMLから、Webページはより豊かなルックアンドフィールを開発し、日々直感的で、ユーザーフレンドリーで、光沢を増しています。

これらの変更の主な要因は、最新のハードウェアとより優れたインターネット接続に支えられた新しいテクノロジーと改良されたテクノロジーです。ただし、パフォーマンスは当初からWebアプリケーションにとって懸念事項でした。

ここ数年で、JavaScriptライブラリ、CSSライブラリ、およびプラグインの噴火により、各ページが多くのJavaScript、CSS、画像、およびその他のリソースファイルにアクセスできるようになりました。ページがサーバーに対して 50 を超える HTTP 要求を開始するシナリオは多数あります。各要求は、サーバーへの新しい TCP 接続を作成し、ファイルを取得して、接続を閉じます。これは、サーバーに対して 50 を超える TCP 接続が確立されることを意味します。各接続の作成と破棄は重いプロセスであり、それとは別に、多くのブラウザーでは同時接続の数も制限されています (通常は 4 から 8)。

HTTPプロトコルも過去15年間であまり変わっていません。現在使用されているHTTP1.1は1997年に定義され、それ以来、Webは大きく変化しました。IETF(Internet Engineering Task Force)は、新たな課題を理解し、POCを使用してしばらくの間これに取り組んできました。現在、彼らはHTTP/2と呼ばれるHTTPプロトコルの別の新しいバージョンを考案し、現在標準化プロセスにあります。

HTTP/2とは?

HTTP/2 は HTTP プロトコルの 2 番目のメジャー バージョンであり、主に遅延を減らしてページの読み込み速度を向上させることに重点を置いています。これはGoogle の SPDY プロトコルに基づいており、次の主要な項目をカバーしています。

  • 単一のTCP接続で複数のリクエストを並行してロードする
  • HTTP ヘッダーでの圧縮の有効化
  • サーバーがクライアントにコンテンツをプッシュできるようにする

以前のバージョンとの違いは何ですか?

HTTP 設計の初期バージョンでは、要求ごとに新しい TCP 接続が使用されていましたが、これには接続やその他のパケットの設定が含まれ、非常に時間がかかりました。HTTP 1.1 では多くの変更が加えられ、パイプラインが導入され、理論的には 1 つの接続で複数のリクエストを送信できるようになりました。それでも、リクエストとレスポンスは同期して処理されました。HTTP/2 は SPDY プロトコルに基づいており、1 つの TCP 接続を開き、多重化を使用して、応答を待たずに多くの要求を同時に送信できます。絵で見てみましょう。

HTTP/2 は、1 つの TCP 接続を開き、多重化を使用する SPDY プロトコルに基づいており、応答を待たずに多くのリクエストを並行して送信できます。

それとは別に、前述のようにHTTPヘッダーを圧縮し、サーバープッシュを有効にします。これがページの読み込みにどのように影響するかは、以下の例で見ていきます。

ASP.NET 4.6 を使用した HTTP/2 の動作

一般的なWebページは、JavaScriptファイル、CSSファイル、画像など、さまざまなリソースを参照します。次の例では、Visual Studio 2015を使用して4.6空のWebフォームアプリケーションの ASP.NET サンプルを作成し、Webページで同じものを参照するさまざまなリソースをソリューションに追加しました。次に、アプリケーションに Web フォームを追加し、複数のリソースも追加しました (以下を参照)。

<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の異なるリソース(3つのCSS、8つの画像、8つのJSファイル)を参照しています。その後、Win Server 2016 の IIS10 にアプリケーションをデプロイしました (Windows 10 も使用できます)。次に、アプリケーションをテストします。

実験値

まず、HTTP 1.1 を使用してこのアプリケーションを実行し、読み込み時間を分析します。次に、HTTP2に移動して違いを確認します。アプリケーションを実行して、Developer Toolbarのネットワークタブを見てみましょう(最近のほとんどのブラウザには、F12を押すことで開くことができるDeveloper Toolbarがあります)。これにより、Webページに対して発生したリクエストの数、待機時間、開始時間、読み込み時間、およびその他の関連する詳細が表示されます。

アプリケーションを実行して、Developer Toolbarのネットワークタブを見てみましょう(最近のほとんどのブラウザには、F12を押すことで開くことができるDeveloper Toolbarがあります)。

上の画像の詳細を よく 見ると、3列目(プロトコル)で参照されているHTTP1.1プロトコルを使用していることがわかります。また、すべてのJavaScript、CSS、および画像ファイルが期待どおりに読み込まれましたが、開始時間は異なります。前の要求が完了すると、いくつかの要求を開始できたことは明らかです。最後のリクエストは、ブラウザからの並列接続数の制限により、約4.5秒待たなければなりませんでした。このページのロード時間は約 9.59 秒です。

次に、プロトコルをHTTP2に切り替えて同じページを開き、違いを確認しましょう。これを行うには、アドレスバーのURLをHTTPからHTTPSに変更し、ページを再読み込みして、開発者ツールバーのネットワークタブを再度表示する必要があります。

プロトコルをHTTP2に切り替えて同じページを開き、違いを確認しましょう

ここでは、タイムラインがまったく異なり、すべてのリクエストが同時に開始されています。また、ページの読み込み時間が80%短縮され、現在は約2秒です。これは、すべてのリクエストが http1.1 では同期していたサーバー parallel で送信されたことを明確に示しています。最後のリクエストの待機時間はわずか 70 ミリ秒です。

最近では、バンドルや縮小などのいくつかの手法を使用してパフォーマンスを向上させましたが、これにはいくつかの制限もあります (たとえば、JavaScript ファイルと CSS ファイルにのみ適用できます)。各ファイルタイプは、異なるバンドルで追加する必要があります。重複するファイルを 1 つのバンドルに含めることもお勧めしません。複数のバンドルは、さまざまなアプリケーションページでの使用状況に基づいて作成する必要があります。HTTP2 は、開発者がこれらの機能を使用する手間を省きます。これらの問題を解決するため、TCP接続は1つだけで、すべての異なるリソースを同時にダウンロードし始めるため、時間を大幅に節約し、開発者の負担を軽減します。

注 – 現在、HTTP2 は SSL でのみ機能します。そこで、最初にHTTP1.1を使用したHTTPを使用して同じページを開き、次にHTTP2プロトコルを使用したhttps（ここではh2として表示されています）を使用しました

結論

この投稿では、現在のWeb開発の実践と私たちが直面しているパフォーマンスの問題について説明しました。HTTP2 に関する議論を続け、IIS10 (Windows 10 および Windows Server 2016) と Visual Studio 2015 を使用して ASP.NET 4.6 で使用できることを確認しました。次に、JS、CSS、画像など、複数のリソースを含むサンプル ページを作成しました。HTTP2を使用することで、読み込み時間を75%以上節約できたことがわかりました。これは、最終的に、現在慣れ親しんでいるパフォーマンスの問題がすぐに過去のものになることを示しています。

Web アプリで jQuery HTML5 コントロールを試して、その強力な機能をすぐに活用してください。今すぐ無料トライアルをダウンロード!

操作方法
デモを予約