http1.1 and http2 and ServiceWorker

A hydrology article I wrote before, the thoughts caused by uploading 300 pictures at once,
became a hot search on 12.02. The number of followers increased from 8 to more than 400, which was really scary. Thank you all for your support and the android lady for her beautiful eyeshadows.

It’s not my intention to be on trending searches and gain fans. CSDN is just to record daily technical work (I blogged before, but most of my energy was spent on dressing up and maintaining the website, so I just used CSDN to save trouble). It's okay to occasionally say a few risqué words in the article, but you won't use some sensational titles or make some sidelines in order to get trending searches. The nonsense stops here and the real movie begins.

1. Browser concurrency limit

1.1 Browser

As mentioned before, in the case of http1.1, the browser has a default concurrency limit. Default is a group of 6
Insert image description here
picture links
Insert image description here

1.1.1 What is stalled?

Insert image description here

Image Source
Insert image description here

1.1.2 Why does the browser have this limitation?

Image source
Insert image description here
Image source
Insert image description here
Insert image description here
Insert image description here
The Facade mode mentioned here is a brief reflection on the middle layer . There are some mentions in this article.

1.2 Digression-Crawler

Browsers will limit the number of connections. But crawler scripts don't . Even for http1.1 URLs, crawler requests can reach any number of requests per second.

Therefore, when writing crawler code, you need to pay attention not to have too many loops per second. For others and for yourself.

2. http1.1

2.1 View http1.1

If you check whether the website uses http1.1 or http2. In fact, it is very simple. You only need to open the relevant configuration in the network of f12.

Image source
Insert image description here
You can see that http2 looks like this:
Insert image description here
http1.1 looks like this:
Insert image description here

2.2 http1.1 and https

If http1.1 has a browser concurrency limit, then https doesn’t have one either?
Image Source
Insert image description here
Image Source
Insert image description here

3. http2

3.1 http2 and browser concurrency limits

So why does http2 have no concurrency limit? Image source
Insert image description here
Image source
Insert image description here

3.2 What is multiplexing

As mentioned above, http2 only has no browser concurrency limit because it can multiplex TCP. So what if you know it's a multiplex?
Image source
Insert image description here
Image source
Insert image description here
Insert image description here
You can see that if tcp is reused, then the connectID is the same . Let’s take a practical look:
① The connectID of http1.1 is different
Insert image description here
② The connectID of http2 is the same for a period of time
Insert image description here

Insert image description here

3.3 Turn on http2

How to convert from http1.1 to http2. You can see how to upgrade your website to http/2 . This article is very good, but it may be more complicated. It is both an nginx version and an openssl version. I recommend a little tip: directly modify the nginx configuration and try restarting nginx .
Insert image description here
If you are lucky enough. You can see it's the same as mine. It just changed to http2. The previous 6 concurrencies also disappeared.
Insert image description here

3.4 http1.1 fun article

Although most mainstream websites are http2. But Baidu is indeed http1.1.
Why is Baidu still using http1.1 protocol instead of http2?
Insert image description here

4. Service Worker

4.1 Questions about network pinion

I accidentally saw on a previous project that one request was sent twice. And one has gears and one doesn't. But by looking at the logs, a request was indeed sent. Why is this?

After searching for information, I found that someone said this is
the source of the servicewroker picture .
Insert image description here

After checking, there is indeed one written ** from ServiceWorker **. One of them was not written
Insert image description here

Insert image description here

4.2 Introduction to ServiceWorker

For a preliminary introduction to ServiceWorker, you can briefly read Service Worker: Introduction and Service Worker - this should be a quite comprehensive arrangement.
Insert picture description here

Insert image description here

4.3 ServiceWorker and http1.1

service worker does not have to be http2, 1 is also acceptable
Insert image description here

4.4 ServiceWorker和https

Service workers can only be hosted by HTTPS

Image Source
Insert image description here
Insert image description here

4.6 Why are there two requests?

As mentioned before, start ServiceWorker. You will see 2 requests through the network, one with the pinion and one without it.
Image Source
Insert image description here
Image Source
Insert image description here

4.5 ServiceWorker和angular

Image Source

4.5.1 Must be accessed through https

ServiceWorker must be accessed through https, as mentioned above
Insert image description here

4.5.2 Some browsers do not support

Some browsers do not support ServiceWorker
Insert image description here

4.5.3 How to configure

Insert image description here
Insert image description here

4.5.4 Practical work

Insert image description here
Insert image description here
Insert image description here

4.5.5 What is being cached

Insert image description here
Insert image description here

4.5.6 How to close

If you don't want to use ServiceWorker, how do you turn it off?
Insert image description here
You can see that there is no small gear anymore.
Insert image description here
Generally, the project is turned on by default. It is faster after opening than closing. Take the thinking caused by uploading 300 pictures at one time as an example:
after closing, 1 is 25kb, 300 is about 7500 kb = 7.32M; it takes about 10s.
After opening, the same 300 pictures take about 8.73s

4.7 Doubts about ServiceWorker and http2

The attentive may notice,. Service worker made two requests, http2 dropped to 1, connection id changed to 0.
Insert image description here
Why? We clearly have http2 enabled. Why is it automatically downgraded to http1.1? Even if it becomes http1.1, why is connectID 0?
Image Source
Insert image description here

Guess you like

Origin blog.csdn.net/weixin_44050791/article/details/122027507