For browser implementers, what they do is turn a URL into a web page displayed on the screen. The process goes like this:

  • 1. The browser uses HTTP or HTTPS to request a web page from the server.
  • 2. Parse the REQUESTED HTML code and build a DOM tree;
  • 3. Calculate the CSS properties in the DOM tree.
  • 4. Finally, render the elements one by one according to CSS attributes to get the bitmap in memory;
  • 5. An optional step is to compose the bitmap, which greatly increases the speed of subsequent drawing;
  • 6. After the composition, draw it on the interface.

Before going into detail, establish an emotional understanding. From the time the HTTP request comes back, the process is not one step and then the next, but an assembly line. 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.

1) HTTP protocol

The first thing the browser has to do is retrieve the data based on the URL, using HTTP, and there’s actually a DNS query before that, but I won’t go into detail here.

  • The HTTP standard: Developed by THE IETF, there are two main standards related to it:
    • HTTP1.1 tools.ietf.org/html/rfc261…
    • HTTP1.1 tools.ietf.org/html/rfc723…
    • The protocol 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.
  • HTTP protocol Format
  • HTTP Method
    • GET: The browser uses the GET method to access the page from the address bar
    • POST: Form submission generates the POST method
    • HEAD: Similar to GET, HEAD returns only the header of a request, mostly from JavaScript
    • PUT: Adds resources
    • DELETE: deletes resources
    • CONNECT: now used for HTTPS and WebSocket
    • OPTIONS: Generally used for debugging, most online services do not support
    • TRACE: Generally used for debugging and not supported by most online services
  • HTTP Status code and Status text
    • 1xx: temporary response, indicating that the client please continue, the 1XX series status code is very strange, the reason is that the 1XX state is directly handled by the browser HTTP library, will not let the upper layer application know.
    • 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: no update to the client cache: the client already has a cached version of the Request, which is told to the server in the Request. When the server finds that there is no update through time or tag, it will return a 304 status without the body.
    • 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: Server request error.
      • 500: server error.
      • 503: Server has a temporary error. You can try again later.
  • 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. However, there are some special HTTP headers specified in the HTTP specification, and we’ll look at them now. In the HTTP standard, there are complete request/response headers, so here are a few highlights:
    • Request Heade
    • Response Header
  • HTTP Request Body
    • The body of the HTTP request is primarily used in the submission form scenario. In fact, the BODY of the HTTP request is quite free, as long as the body server that the browser sends accepts it. Some common body formats are:
      • application/json
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/xml
    • We submit HTML requests using HTML form tags. By default, application/ X-www-form-urlencoded data formats will be generated, and multipart/form-data will be used when files are uploaded.
  • HTTPS
    • HTTPS on the basis of HTTP protocol, HTTPS and HTTP2 stipulate more complex content, but it basically retains HTTP design idea: use request-response mode.
    • Let’s look at HTTPS first. 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.
    • HTTPS also shall be prescribed by the RFC standards, you can view the details of the link: it 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.
  • HTTP 2
    • 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.
    • Note: Many optimizations actually involve lower-level protocols. Subcontracting at the IP layer, and connection time at the physical layer need to be considered.

2) Parse the code

  • How are tokens splitFirst let’s look at how a fairly standard tag would be split: 
    <p class="a">text text text</p>
Copy the code
    • If we break it down from the definition of the smallest meaningful unit, what is the first word (token)? Obviously, as a word (token), the whole P tag must be too big (it can even be nested).
    • So, is it appropriate to just use the beginning of the P tag? We consider that the start tag also contains attributes, and the smallest unit of meaning is actually “
    • We continue to split this code into tokens:
      • Class = “a” attribute;

      • The end of “tag start”;

      • Text c.

      • The label ends.

    • This is the simplest example. What else is like it? Now let’s take a look at what these tokens look like:
  • The state machineThe lexical part of most languages is implemented using state machines. So let’s interpret some words (token) into a state machine:
  • Build a DOM tree: Next we’ll turn these simple words into a DOM tree using a stack, which almost any language has.
  • Loading CSS styles