Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleBefore and after the probation 】 【 column end interaction | (01) the rules of interaction, standard: HTTP – (1) five layer network model and the development history of the HTTP protocol,


1. How does HTTPS implement encryption? 2. What is the difference between HTTP and HTTPS? 3. How to clear the page cache every time the page is opened?Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Foreword: HTTP this knowledge point, it and our “front end” itself is not directly related (it does not involve HTML, CSS, JS and other front-end knowledge). But as “Web programmers”, we can’t write a page and just look at it on our own computer, we definitely need to “interact” with the back end.

What does “interaction” depend on?

The HTTP protocol is a bridge to interaction! If you don’t know anything about HTTP, you can’t do anything about it. And the following article, the actual combat part, many are based on the default master HTTP related knowledge as the premise to explain.

Therefore, fully understanding the 19 articles in the “Front and back End Interaction” series (❗️ articles are in order, and have been distinguished on the title of each article, please read in strict order) will make you more skilled in the actual interview and job!

❗ ️ ❗ ️ ❗ ️ before starting this, please read it again “(01) cliches from your URL to the page to show what happened behind | Web front knowledge”, the first to get to know about the whole macro “process”.


1 What is THE HTTP Protocol?

The Web (World Wide Web) uses a Protocol named HTTP (HyperText Transfer Protocol) as a specification to complete a series of operations from “client” to “server”. And “agreement” refers to the “rules” of the agreement! It can be said that the Web is built on the HTTP protocol for communication.

❓ What is an “agreement”?

A: Communication between different hardware, operating systems, all of this requires a “rule” so that both sides are based on the same approach. And these complicated “rules” need to be determined in advance, without rules, there is no fangyuan.

Such as:

  • How are communication targets detected?
  • Which side initiates the communication first?
  • What language is used for communication?
  • How to end a communication?
  • …

So these “rules” are what we call “protocols”.


2. Classic five-layer model

Before we dive into the details of the HTTP protocol, we need to know something about network communication. Only with this knowledge in reserve, we will be able to get twice the result with half the effort when we formally explain “HTTP protocol” later.

To understand the whole process of network information transmission, the first thing we can’t get around is the “classical five-layer model” :

❗ ️ note:

  • Client: The end that requests access to text or images is called the “client”;
  • Server side: The side that provides the resource response is called the server side.

This “five-tier model” exists on every computer and server and is used to maintain the entire process of network data transmission.

That is, our own computer can also serve as a Web server to provide Web services.

❗️ Note: in this series of articles, we will not go into the next three layers (network layer, data link layer, physical layer). Our main focus will be on the “application layer” directly related to our front-end (because “HTTP protocol” is implemented on the “application layer”)! Of course, the transport layer also has some knowledge directly related to HTTP, so it will be covered as needed.

2.1 The main tasks of “Lower three Layers”

These three layers belong to the lowest level of knowledge, we first understand a general, know what they are, what is used, temporarily unnecessary in-depth study.

  • Physical layer: The main function is to define how physical devices transmit data. That is, the hardware of our computer, network card port, network cable, and network cable after connecting out need to have a fiber optic cable for us to transmit data to the Internet, transmission to the relevant server. So, without the “physical layer”, all software is unusable!

  • Data link layer: It establishes “data link” connections between communicating entities. That is, although the two machines can be physically connected, there must be a “software service” to help us create a circuit connection through the physical device that allows the two sides to transmit data (e.g. 0101).

  • Network layer: This layer is used to create “logical links” for data transfer between nodes. That is, my computer wants to visit Baidu’s server, and how to find the address of Baidu’s server is a “logical relationship”.

2.2 the transport layer

The “transport layer” has two main protocols — TCP and UDP. More often we use TCP, which is a more reliable protocol for transferring data.

2.2.1 Transport layer provides us with “end-to-end” service

The “end-to-end” service is that when I set up a connection between my computer and a server like Baidu, I define how the two ends should transfer data. That is, the way data is transmitted is defined in this layer.

The data transferred can be large or small. However, if the data transmitted is too large to be transmitted all at once, “subcontracting” and “sharding” will be involved. After these “shards” of data have been transmitted, the other side needs to “assemble” accordingly.

These “how to assemble”, “how to transport” protocols are defined at the “transport layer”.

2.2.2 The transport layer shields the details of the lower layer’s data communication from the higher layer

Because the HTTP protocol is implemented over TCP/IP, it is very simple for the HTTP protocol to transmit a data.

For example, we just need to enter a URL in the browser and press enter, it will automatically send some relevant data to the server. The server then parses this data and returns it to the browser, which renders the page.

In fact, we input the URL process, will involve a series of complex data assembly and transmission actions. But as a user, as a web developer, we do not need to know how it is to “sharding”, how to connect to the server and other operations.

And because we don’t need to know, the transport layer automatically encapsulates it for us.

Of course, “don’t need to know” does not mean “can’t know”, but a better understanding of the processes behind this can help us achieve a higher performance of the “HTTP protocol” in detail.

2.3 the application layer

The “HTTP protocol” is implemented at this level.

  • There are many convenient services for application software, we just need to use the “HTTP protocol” related tools, it can help us to transfer data.
  • Built on the TCP/IP protocol.
  • It blacked out the details of network traffic.


3 History of HTTP

HTTP / 0.9 3.1

HTTP was introduced in 1990.

In this version, the “HTTP protocol” is particularly simple:

  • There is only one command — GET;
  • Because the data request was very simple at the time, there was no HEADER or other information describing the data;
  • After the server sends the content, the “TCP connection” is closed.

HTTP / 1.0 3.2

HTTP/1.0 was released in May 1996.

This version is not very different from the HTTP/1.1 version we commonly use today.

It has the following characteristics:

  • Added a lot of commands (GET, POST, PUT, HEAD…) ;

  • Added Status Code and headers:

    • Status Code is used to describe the Status of a server after processing a request.
    • The Header represents a description of the “requested” or “sent” data, as well as a method of doing something with that “data.”

  • Added support for multi-character sets, multi-part sending, permissions, caching, etc.

HTTP / 1.1 3.3

HTTP/1.1 was released in January 1997.

This version is based on HTTP/1.0 to add some features to optimize the entire network connection process:

  • Added “persistent connections” – in HTTP/1.0, “an HTTP request” required the creation of a “TCP connection” between the client and server. And, when the “TCP Connection” is created, the “TCP Connection” will be closed after the server returns the content! This comes at a high cost because the “HTTP three-way handshake” in establishing a “TCP connection” is so costly and delayed that it is definitely not the best practice to use it once and turn it off. Therefore, HTTP/1.1 solved this problem for us – once a “TCP connection” is created, it does not close, and subsequent “HTTP requests” can always be sent inside the connection.

  • Added “pipeline” – when we send multiple “HTTP requests” within the same “TCP connection”, the server will return the contents of these “HTTP requests” in sequence. ❗️ Of course, there is a problem here: if the processing time of the former request is significantly longer than that of the latter, the latter request will not be sent before the first one. This shows the performance difference between serial and parallel. Fortunately, the HTTP/2.0 version optimizes this.

  • Add Host and some other commands:

    • With Host, we can run multiple different Web services (e.g., one Node.js Web service, one Java Web service) simultaneously on a physical server. I then use the Host field to indicate that I am sending requests to the physical server, but distinguish which “software service” I am requesting — Node.js/Java). The benefit is clear: since many different Web services can be deployed on the same physical server, the efficiency of the physical server is greatly improved.

HTTP / 2.0 3.4

This version is not yet available, but it is only a matter of time before it is.

It has the following powerful features:

  • All data is transferred “binary” — in HTTP/1.1, most of our data transfer is in the form of “strings”. HTTP/2.0 has a different “sharding” of data than HTTP/1.1. In HTTP/2.0, all data is transmitted as “frames”. Because the transmission is “frames”, multiple “HTTP requests” sent within the same “TCP connection” no longer need to be returned in sequence; they can be sent “in parallel”. In this way, the transmission efficiency of Web applications is greatly improved.

  • On the basis of HTTP/1.1, “header information compression” and “push” are added to improve efficiency:

    • Header compression: In HTTP/1.1, many of its “HTTP headers” require a full send and return each time we send and return a request. However, much of the Content in HTTP headers (cache-Control, Accept, Content-Type, etc.) is stored as strings, which can take up a lot of bandwidth. In HTTP/2.0, the “HTTP header” information is compressed, effectively reducing bandwidth usage.

    • “Push” : In HTTP/1.1, “HTTP request” can only be initiated by the client, and the “server” responds to the request and returns the content. That is, “client” is always the active party and “server” is always the passive party. In HTTP/2.0, a “push” feature was added, which allows the “server” to initiate data transfers. 🚀 A practical example is that we write Web pages with “CSS files” and “JS files” that are “linked” to HTML text. Under HTTP/1.1, the browser first requests the HTML text information and then parses the content. When the URL address of CSS or JS is parsed, the browser goes to the server again to request the CSS and JS file. That is, the whole process corresponds to a strict order problem. Under HTTP/2.0, thanks to the “push” function, when the browser requests an HTML document, the “server” can actively push the CSS and JS files referenced in the HTML to the “client”. In this way, the order in which HTML, CSS and JS are sent becomes “parallel”, which greatly improves the efficiency of transmission.

3.5 the HTTPS

HTTPS is a secure version of HTTP, and its actual use is not that different from the current popular HTTP/1.1. We will cover HTTPS in the following sections.


Postscript: In the next article we’ll cover “the HTTP three-way handshake” and the concepts of URIs, urls, and UrNs.

Theoretical knowledge learning needs patience, carefully follow the order of the text will benefit a lot.

I wish you good, QdyWXS ♥ you!