preface

As a front end, having a deep understanding of HTTP communication allows us to quickly locate problems in our daily development work. Recently just participated in the first byte youth training camp, today just liver HTTP course, here made some notes, I hope to be helpful to you, there is a record of mistakes also hope big guys pointed out ~🧐

First introduction to HTTP

So first of all, just to throw out a question, what happens from entering the URL to rendering the page?

This is a problem that can be infinitely difficult. The purpose of this topic is to see how deep your Web foundation is. Since this article is mainly about HTTP, the important process is described here

Please refer to(1.6W word) browser soul ask, how many can you catch?

Network request – > network response style computing — – > build a DOM tree – > > generate layout tree – > build layer – > generate map list – > generate blocks and generate bitmap – > display shows the content

This is a very simple diagram, in fact, each step is very complicated, this article is mainly based onHTTPProtocol, we mainly focus on the part of network communication that the browser initiates the request and the server responds to the request.

1.1 What is HTTP

  • Hyper Text Transfer ProtocolHypertext transfer protocol
  • Application layer protocol based on TCP
  • Request and response
  • Simple scalability
  • stateless

HTTP is designed as a client-server protocol with requests and responses.

Ii. Agreement analysis

2.1 development

Each of our excellent technologies is actually in the process of continuous progress. HTTP has also been updated and iterated over several versions

2.2 HTTP Packet Structure

For TCP, the transmission is divided into two parts: the TCP header and the data part, while HTTP is similar to header+body.

The starting line

For a request message, the starting line looks like this:

POST / HTTP/1.1
Copy the code

Method + path + HTTP version. For a response message, the starting line looks like this:

HTTP / 1.1 403 ForbiddenCopy the code

It consists of the HTTP version, status code, and cause.

The head

A blank line

Entity (Data part)

That’s the actual data, the body part. The request message corresponds to the request body, and the response message corresponds to the response body.

Method

Safe: A method that does not modify the server’s data

GET HEAD OPTIONS

Idempotent: The effect of the same request being executed once versus multiple times in succession isThe sameAll of the safe methods are Idemponent

GET HEAD OPTIONS PUT DELETE

Status code

2xx: success: the request is received, understood, or accepted successfully. 3XX: Redirection: further operations must be performed to complete the request. 4xx: client error: the request has syntax errors or the request cannot be implemented. Common status codes:

  • 200 OK – The client request succeeded
  • 301 permanent redirect
  • 302 Temporary redirect
  • 401 Request is unauthorized
  • 404 Requested resource does not exist, possibly the wrong URL was entered
  • 500 An unexpected error occurred on the server
  • 504 Gateway Timeut- The Gateway or proxy server cannot get the desired response within the specified time.

RESTful API

  • Has been widely used
  • Traditional API design: Treat each URL as a function
  • Restful API design: Treat each URL as a unique resource

RESTful API is an API design style

  1. Each URI represents a resource;
  2. Some representation layer that passes this resource between the client and the server;
  3. The client operates on the server side resources through HTTP Method to achieve “presentation layer state transformation”.

Use method instead of URL parameters.

Common request headers

Common response headers

The cache

cookie

Set-Cookie -response

2.3 Overview of HTTP/2

Faster, more stable, simpler Frame: The smallest unit of HTTP/2 communication. Each frame contains the frame header and at least identifies the data stream to which the current frame belongs.

Message: A complete sequence of frames corresponding to a logical request or response message. Data stream: a bidirectional byte stream within an established connection that can carry one or more messages. Staggered transmission, receiver reorganization

HTTP/2 connections are permanent and require only one connection flow control per source: server push mechanisms that prevent the sender from sending large amounts of data to the receiver

2.4 summary of HTTPS

HTTPS is encrypted by TSL/SSL

  • Symmetric encryption: The same key is used for both encryption and decryption

  • Asymmetric encryption, encryption and decryption need to use two different keys: public key and private key.

Scenario analysis

3.1 Static Resources

Let’s open the Chrome debug tool, go to the NetWork option, and try to visit the Nuggets website. Let’s take a look at the details of static resource requests. The static resource request we are looking at here is index.css

We can see that the status code is 200, read from the hardware cache, so sometimes a status code of 200 doesn’t necessarily make a real request.

Let’s look at the response header: cache-controlThis specifies the expiration time and is related to strong caching.

last-modifiedSpecifies the last modification time, relative to the negotiated cache.

access-control-allow-originWhich origin is allowed to access us depends on the same origin policy.

content-typeSpecifies the type of entity data

Static resource solution: Cache +CDN+ file name hash

CDN: Content delivery network. CDN ensures that content is serviced to users’ requests in an extremely efficient manner based on user proximity and server load.

The function of file name hash is to generate hash values based on the file content. In this way, when the file content changes, the requested file name will be different and the cache will not be used to obtain the latest file content.

3.2 the login

We logged out of the Nuggets’ official website and tried to log in, capturing a login request as follows:

General:

The Response Headers:

The Request Headers.

  1. What action to what address?
  • Using POST
  • The target domain name is juejin.cn
  • The target path/passport/web/sms_login /? account_sdk_source=web
  1. What information was carried and returned
    1. Carry information
      • Post body, data format is form
      • You want to get the data in JSON format
      • The existing cookies
    2. Return information
      • Data format JSON
      • Cookie information

authentication

3.3 Video Playback

Live video protocol

agreement describe advantages
HLS HTTP Live Streaming, Apple; Based on HTTP protocol; Take a video stream and break it up into small HTTP-based files for download – a cross-platform
RTMP Real Time Messaging Protocol, Adobe, based on TCP Low latency
HTTP-FLV Based on HTTP, HTTP + FLV encapsulates audio and video data into FLV format and transmits it to the client through HTTP Low latency

3.4 Uploading Files

Mainstream scheme:

Why are there many requests for options when uploading files?

Because it triggers a cross-domain scenario. The function is to ask the server whether cross-domain is allowed.

Cross-domain solutions

  • CORS
  • Proxy server
    • The same origin policy is a browser security policy, not an HTTP one
  • iframe
    • A lot of inconvenience

Four, in actual combat

The AJAX XHR

The AJAX Fetch

Standard library: HTTP/HTTPS

  • Default module, no additional dependencies are required
  • Limited functionality/not very friendly

Common request library: AXIos

  • Supports browser and Node.js environment
  • Rich interceptors

The user experience

Us in a production environment, but also concerned about the user experience, we want the user to have a better experience effect, so the user experience to optimize it, on the one hand, is known as the performance optimization, and one more thing is to do some optimization on the Internet, such as use HTTP2, its transmission efficiency but a higher, use the CDN, transmission data is faster, and so on.

Network optimization:Stability:

Five, extension,

5.1 Communication Mode

WebSocket

  • Full duplex communication between browser and server
  • Typical scenario: high real-time, such as chat room
  • Urls start with ws:// or WSS :// etc

QUIC: QUIC UDP Internet Connection

Although it is based on UDP, it can achieve reliable transmission and encrypted transmission similar to TCP.

QUICIs alsoHTTP3One version of the protocol, that is, HTTP3 will be based onUDP!!!!

The last

⚽ well, about the basic knowledge of HTTP is introduced to the end, this article just played a good effect, interested in HTTP students can further study ~ ⚾ if you are interested in this article welcome to like attention + collection, more wonderful knowledge is waiting for you! 😘 🏀GitHub blogs at github.com/Awu1227. 🏉 I have other columns, please read ~ 🏐 play the beauty of CSS 🎱Vue from giving up to getting started 🎳 simple JavaScript