Compared with the front-end industry, APP development in a variety of new things emerge in an endless stream, the new standards and new technologies on the service side of the people are relatively less concerned, these standards and technologies are the cornerstone of the Internet, but a little distance from consumers and users, what millisecond level of 100% or even 500% performance improvement, Balabala also doesn’t have much feeling for users. To some extent, it feels very sad. Those who drink water will not remember those who dig Wells, and those who eat good water will not remember those who protect the environment.

Earlier this year, Nginx released an early-Alpha patch to provide HTTP/2 support, but starting with the latest release of Nginx 1.9.5, Httpv2module has replaced ngXHttpspDY_module and is officially starting to provide full HTTP/2 support.

I was reading the Definitive Guide to HTTP some time ago and thought I’d try again.

HTTP/2 was also a hot topic this year, and after several twists and turns, it was finally finalized and released in May.

Google niang and her real son Chrome launched SPDY early, and several of the world’s largest websites Facebook, Yahoo, Twitter, Youtube have also deployed SPDY protocol early. In February of this year, as HTTP/2.0 integrated SPDY and entered the final stages of standardization, Google announced that it was no longer developing SPDY.

Still, the SPDY concubine has somehow been put away, or put another way, SPDY is officially the first lady.

For SPDY and HTTP/2 details no longer wordy, I strongly recommend 360 front-end engineer @ Qu Guangyu’s series of articles:

  • HTTP/2 and WEB Performance Optimization (PART 1)

  • HTTP/2 and WEB Performance Optimization (PART 2)

  • HTTP/2 and WEB Performance Optimization (PART 3)

I really appreciate @Qu Guangyu, who has done in-depth research on HTTP and Web performance. His blog is a Web optimization expert.

Here’s how to upgrade to HTTP/2. Currently, Nginx 1.9.5 has experimental support for HTTP/2.

SSL deployment

For the problem of starting from scratch, there is no more waste text here, please Google SSL deployment and HTTPS and other keywords.

CentOS/Red Hat upgrade HTTP/2

Start by upgrading the Nginx version and making sure you are using the master source (which contains the latest experimental release).

Modify/etc/yum. Repos. D/nginx. Repo nginx warehouse address

[nginx]
name=nginx repo  
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/  
gpgcheck=0  
enabled=1
Copy the code

If nginx is not already installed, run yum install nginx. If nginx is already installed, you can update nginx with yum Clean all && yum.

Ubuntu/Debian upgrade http2/2

/etc/apt/source.list = /etc/apt/source.list = /etc/apt/source.list

deb http://nginx.org/packages/mainline/debian/ codename nginx  
deb-src http://nginx.org/packages/mainline/debian/ codename nginx  
Copy the code

Apt-get clean && apt-get install nginx

Verify the Nginx version

Let’s confirm that Nginx on our machine has been upgraded to at least version 1.9.5.

$nginx -v nginx version: nginx/1.9.5Copy the code

Nginx start HTTP / 2

Enabling HTTP/2 is also very simple and can be directly configured in the specified domain name nginx.conf.

server { listen 443 ssl http2; server_name luolei.org; #SSL configure SSL on; ssl_certificate /etc/nginx/conf.d/certificate.crt; ssl_certificate_key /etc/nginx/conf.d/certificate.key; }Copy the code

Add http2 to listen.

  • Note: you cannot mix SPDY with HTTP/2. If you enable both, an error will be reported.
nginx: [warn] invalid parameter "spdy": ngx_http_spdy_module was superseded by ngx_http_v2_module in /etc/nginx/conf.d/vhost.conf:12  
Copy the code

Restart the Nginx

Service nginx restart Restarts nginx.

At this point go back to your browser, open developer tools, go to Network, open Protocol.

Refresh your web page and the Protocol in the primary domain has changed to H2, which means you have successfully upgraded to HTTP/2.

Or use Chrome’s Web tools and enter Chrome ://net-internals/#http2 in the address bar

By this time, you should also see your website’s request manager, Protocol Negotiated column has changed to H2.

Performance difference

For comparison of HTTPS, SPDY, and HTTP/2 performance, you are advised to refer to:

  • A Simple Comparison of HTTPS, SPDY, and HTTP/2 Performance

  • Comparison of HTTPS, SPDY, and HTTP/2 Performance

After the speech

Web performance optimization for front-end developers, is also worth in-depth research, Yahoo 14 what is a personal will back, not just confined to the paper, hands-on practice again.

Here’s the question:

What happens from the time you enter the URL to the time the page loads?

It’s a great question, because at every step, at every node, there’s a lot of fun to be found from different angles.

If you were a front-end developer, how would you answer this question, and what optimizations could be made at each step?

Mm-hmm. I went to read. Blue ‘⊿´) Blue