figure

Let’s do a text version

If it’s not IP

DNS (Domain Name System)

  1. Is there a cache?
    1. Chrome ://net-internals/# DNS
    2. Operating system cache
    3. Router & IPS Internet Service Provider
  2. No cache, DNS query request is looking for

The nature of DNS is a mapping relationship, too many queries, maintenance and update issues, using a distributed design

There are two main types of query

Recursion and iteration Iterative requests need to be made many times, recursion is equivalent to using the server as a proxy to find

The url contains the port number (default 80/443…).

Establishing a TCP Connection

TCP is a transport layer protocol, in addition to TCP and UDP, as the transport layer, built on the network layer IP, the purpose is to establish end-to-end communication

(Corresponding port of app/service on OS)

Reference zhuanlan.zhihu.com/p/157607847

TCP -> Transmission Control Protocol

The main features

  1. Reliable and ordered transmission mechanism
  2. connection-oriented
  3. The concept of a port is abstracted

One port corresponds to one TCP link, so a program that establishes a TCP link takes one port out of the system. This is a limited resource, which explains why browsers are only allowed to establish six simultaneous links on a page for a given domain name. (HTTP2 TCP reuse technology is solved)

Connection-oriented means making connections and releasing them

That corresponds to three handshakes and four waves

TODO

HTTP request and response

The client organizes the request packets and sends ~

After receiving the response packet, select the processing mode according to the corresponding content-type

If it is text/ HTML, prepare the render process

Document phase

The document is the HTML content returned by the original request

The premise here is that the rendering process does not have all the HTML it needs

FROM WIKI

Chunked transfer encoding is a streaming data transfer mechanism available in version 1.1 of the Hypertext transfer Protocol (HTTP). In chunked transfer encoding, the data stream is divided into a series of non-overlapping “chunks”. The chunks are sent out and received independently of one another. No knowledge of the data stream outside the currently-being-processed chunk is necessary for both the sender and the receiver at any given time.

The network process received the chunk, so the render check and the network process set up a PIPE for the transmission

Once this data has been transmitted, the rendering process sends a confirmation document to the browser process to complete any browser-related state changes, such as forward or backward

Apply colours to a drawing

DOM

CSSOM

Layout of the tree

The layer tree

The layer processing here is not only for the z-axis display, but also for the clip

Also to be able to optimize the layout and reduce the paint

Form the pint list

The browser uses The Chrome Compositor for compositing from the paint list -> Paint

Compositing reason

loaded

Non-blocking resources are also loaded ~ ✅

after

Browsers are operating systems developed on the front end

Whether it’s development or optimization, familiarity with the OS is the basic starting point