How to Use HTTP/2 in ASP. NET 4.6 and IIS10?

How to Use HTTP/2 in ASP. NET 4.6 and IIS10?

Over the past decade, Web technology has made various progress. Starting from the basic HTML, the webpage has developed a richer appearance and feeling, becoming more intuitive, more friendly to users, and more colorful. The key contribution of these changes comes from some new and refurbished technologies, and relies on the latest hardware development and better network connection support. However, performance has always been a focus of Web applications.

In recent years, the popularity of JavaScript libraries, CSS libraries, and plug-ins has made every page possible to contain a large number of JavaScript, CSS, images, or other resource files. In many scenarios, a page will initiate more than 50 http requests to the server, and each request will create a new TCP connection with the server, retrieve the file, and then close the connection. This means that more than 50 TCP connections have been established with the server. Creating and processing each connection is a costly process. In addition, many browsers limit the number of concurrent connections, usually ranging from 4 to 8.

In the past 15 years, the HTTP protocol has not changed much. Now the HTTP 1.1 was defined as early as 1997, and since that time, the network has undergone earth-shaking changes. IETF (Internet Engineering Task Force) is aware of these new challenges and has been working with POC for a while. Now, they propose a new version of the HTTP protocol-HTTP/2, which is currently in the standardization process.

What is HTTP/2?

HTTP/2 is the second major version of HTTP protocol. This version focuses on reducing the latency and thus improving the page loading speed. It is based on Google's SPDY protocol and includes the following main projects:

Load multiple requests concurrently in a single TCP Connection

Enable compression in HTTP headers

Allow the server to push content to the client

What is the difference from earlier versions?

The original HTTP Version used a new TCP connection for each request, which involved establishing a connection and data packet transmission, which was a very time-consuming process. HTTP1.1 has completed many changes and the pipeline has been introduced. Theoretically, multiple requests can be sent in a single connection, but requests and responses must be processed simultaneously. HTTP/2 is based on the SPDY protocol. It opens a TCP connection and uses it again. This allows many requests to be sent concurrently without waiting for a response. Let's visually view the process:

 

In addition, it also supports compressing HTTP headers and server push (as described above ). In the following example, we will see how it affects webpage loading.

Use HTTP/2 in ASP. NET4.6

A typical Web page references many different resources, such as JavaScript files, CSS files, and images. In the following example, I used Visual Studio 2015 to create an ASP. NET 4.6 empty Web form application example, and referenced some common resources in Web pages. Then, the author adds a Web form and multiple resources for the application, please refer to the following code:

'''Http2 Demo using ASP. NET Web forms 4.6

 
 

  
  
</div> 
  
  
 <!-- JavaScript file resources --> 
  
  
<script src="Scripts/jquery-1.10.2.js"></script> 
  
  
<script src="Scripts/jquery-1.10.2.min.js"></script> 
 
 

'''

The preceding page references 19 different resources (3 CSS files, 8 image files, and 8 JS files) to simulate real-world pages. Then, I deploy the application on Windows Server 2016 (Windows 10 can also be used) Where IIS10 is installed. Now it is time to test the application.

Test Results

First, I will use HTTP1.1 to run this application and analyze its loading time. Then, I moved to HTTP2 to understand the differences between the two Protocols. Run the application and view the network options in the developer toolbar. (most browsers provide the developer toolbar, which can be enabled by hitting F12 ). This item displays the number of requests sent by the web page, the waiting time, start time, loading time, and other related details.

 

By carefully looking at the details, you will find that it uses the HTTP1.1 protocol, marked in the third column (Protocol. In addition, it loads all JavaScript, CSS, and image files as expected, but their start time is different. Obviously, after some previous requests are completed, the subsequent requests will be started immediately. Due to the browser's limit on concurrent connections, the last request must wait about 4.5 seconds. The total loading time of this page is about 9.59 seconds.

Now, switch to the HTTP2 protocol and open the same web page to see if there is any difference. To this end, change the URL in the address bar from HTTP to HTTPS and reload the page. Check the network options in the developer toolbar again:

 

Here, the timeline looks completely different, and all requests start at the same time. In addition, the page loading time is reduced by 80%, that is, about 2 seconds. This clearly indicates that all requests synchronously transmitted in http1.1 are concurrently transmitted to the server. The waiting time of the last request is only 70 milliseconds.

Recently, we have used techniques such as bundling and minifiction to improve application performance, but these technologies also have some limitations (for example, they are only applicable to JavaScript and CSS files ). Each type of file must be added to a different package. It is not recommended to place all files of the same type in the same package file. Packages of different purposes should be created based on the web pages of the application. HTTP2 saves developers from these complex functions and solves these problems because it creates only one TCP connection and downloads all different resources at the same time, this saves a lot of time and reduces the burden on developers.

Note: currently, HTTP2 only supports SSL. Therefore, HTTP1.1 is used when a webpage is opened through http at the beginning, and then HTTP2 (h2 in the middle) protocol is used when the same page is opened through https.

Conclusion:

In this article, we discuss current Web development practices and performance issues. Later, we discussed HTTP2 based and found that it can be used in Visual Studio 2015 in IIS10 (Windows 10 and Windows Server2016) and ASP. NET4.6. Then, we created a sample page containing a variety of resources (including JS, CSS, and images) and found that using HTTP 2 can save more than 75% of the loading time-this eventually indicates that, the current performance problems will soon become a history!