First, the browser work process

  • The browser first uses HTTP or HTTPS to request a page from the server.
  • The REQUEST back HTML code after parsing, built into a DOM tree;
  • Compute CSS properties in the DOM tree;
  • Finally, the elements are rendered one by one according to THE CSS attributes to get the bitmap in memory.
  • An optional step is to compose the bitmap, which greatly increases the speed of subsequent drawing;
  • After composition, draw on the interface.

Came back from the HTTP request, produce the streaming data, follow-up of the DOM tree building, CSS calculation, rendering, synthesis, paint, are as much as possible output flow processing in the previous step: don’t need to wait until the end of a step completely namely, began to deal with the output of the previous step, when browsing the web, so will see the page appears gradually

Second, network communication

1. HTTP protocol

The HTTP standard is developed by the IETF organization, and there are two main standards related to it:

  • HTTP1.1 tools.ietf.org/html/rfc261…

  • HTTP1.1 tools.ietf.org/html/rfc723…

HTTP is based on TCP, which is a two-way communication channel. HTTP defines the request-Response mode on the basis of TCP. This mode determines that the communication must be initiated by the browser side first.

In most cases, a browser implementor needs only a TCP library, or even a ready-made HTTP library, to handle the web traffic part of the browser. HTTP is a pure text protocol. It is an application layer protocol that uses TCP to transmit text formats.

2. HTTP protocol format

  • Path is the path of the request that is completely defined by the server, without much special content;
  • Version is almost always a fixed string;
  • Response Body is the HTML we’re most familiar with

3. HTTP Method

  • GET
  • POST
  • HEAD
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE

Browsers use the GET method to access pages from the address bar. The form submission produces the POST method.

HEAD, like GET, returns only the request header, mostly from JavaScript

PUT and DELETE represent to add and DELETE a resource, respectively, but in reality this is only a semantic convention with no strong constraints.

CONNECT is now mostly used for HTTPS and Websockets

OPTIONS and TRACE are generally used for debugging and are not supported by most online services.

HTTP Status code and Status text

  • 1xx: Temporary response, indicating that the client please continue.

  • 2xx: The request succeeded.

    • 200: Request succeeded.

  • 3xx: indicates that the target of the request has changed and the client is expected to further process it.

    • 301&302: Permanent and temporary jumps.
    • 304: The client cache is not updated.

  • 4xx: The client request is incorrect.

    • 403: No permission.
    • 404: The requested page does not exist.
    • This is a teapot. This is an Easter egg, from an April Fool’s Joke by IETF. (Hypertext Coffee maker control Protocol)

  • 5xx: The server requests an error.

    • 500: server error.
    • 503: Server has a temporary error. You can try again later.

The 1XX series status code is very unfamiliar to the front end, because the 1XX state is handled directly by the browser HTTP library and is not known to the upper layer applications.

The most familiar status of the 2XX series is 200, which is usually a sign of successful web requests and is everyone’s favorite status code.

The 3XX series is more complex. The 301 and 302 states indicate that the current resource has been transferred, but one is permanent and the other is temporary. In fact, 301 is more like an error, telling the client not to come again.

304 is a state that each front end must know and must know. This state is generated when the client has a cached version locally and tells the server in the Request. When the server finds that there is no update through time or tag, it will return a 304 state without the body.

5, HTTP Head

The HTTP header can be viewed as a key-value pair. In principle, HTTP headers are also data, and we are free to define HTTP headers and values. In the HTTP specification, however, some special HTTP headers are specified. Such as:

Response Header

HTTP Request Body

Common body formatting:

  • application/json
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/xml

7, HTTPS

Based on the HTTP protocol, HTTPS and HTTP2 specify more complex content, but it basically maintains HTTP design ideas: use request-response mode

First, let’s look at HTTPS. HTTPS has two functions: one is to determine the identity of the target server and the other is to ensure that the transmitted data cannot be eavesdropped or tampered with by intermediate nodes.

The STANDARDS for HTTPS are also defined by the RFC, which you can check out at the following link:

Tools.ietf.org/html/rfc281…

HTTPS uses an encrypted channel to transport HTTP content. But HTTPS first establishes a TLS encryption channel with the server. TLS is built on top of TCP, which encrypts the transmitted content once. Therefore, HTTPS is no different from HTTP in terms of transmitted content.

8 HTTP2.

HTTP 2 is an upgrade to HTTP 1.1, and you can check out its details link.

Tools.ietf.org/html/rfc754…

The biggest improvements in HTTP 2.0 are support for server push and TCP connection reuse.

When the client sends the first request to the server, the server can push part of the content to the client in advance and put it into the cache, which avoids the low parallelism caused by the client request sequence, resulting in performance problems.

TCP connection multiplexing, the same TCP connection is used to transmit multiple HTTP requests, avoiding the three-way handshake overhead during TCP connection establishment and the problem of small transmission window during initial TCP connection establishment.