preface

It can be said that the browser is a necessary tool for front-end developers, and it is also one of the ways for front-end developers to show their results to users. Without a profound understanding of the browser, how can we say that we are front-end developers? Understand the browser running track features, no doubt on the code optimization and rendering optimization and user experience has a qualitative leap.

so

A programmer’s career lasts about ten years, a tenth of a human lifespan. The front-end project is just a part of your life and work, but you are all of it. You are his soul. Stop playing games for long hours and playing games at work. Study more to accompany your project in the most perfect state!

The body of the

This is the word count, this is very important, please don’t go away!

knowledge

  • Major Browser Kernels (Simple)
  • Basic Browser architecture (Heavy)
  • How to ensure that the page file is delivered to the browser in its entirety?
  • Why do many sites open quickly the second time?

Major Browser Kernels (Simple)

Browser/RunTime Kernel (rendering engine) JavaScript engine
Chrome webkit V8
FireFox Gecko SpiderMonkey
Safari Webkit JavaScriptCore
Edge EdgeHTML Chakra(for JavaScript)
IE Trident JScript (IE3.0 – IE8.0)
Opera Presto->blink Linear A (4.0-6.1)/Linear B (7.0-9.2)/Futhark (9.5-10.2)/Carakan (10.5-)
Node.js V8

Basic Browser architecture (Heavy)

  • Why 4 processes with only 1 page open?
  • Threading and parallel processing
  • Process vs. Thread
  • Evolution of browsers from ancient times to the present

Why 4 processes with only 1 page open?

Does Chrome have multiple processes open in task Manager when opening a page? Why? To understand the basic concepts of processes and threads and the Chrom architecture, let’s first look at processes and threads.

Process, thread, and parallel processing

Parallel processing BI: Processing multiple tasks at the same time is called parallel processing.

Thread: divided into multithreading and single thread, as the name implies, when a task is divided into multiple small tasks at the same time of only one child’s shoes in called single-threaded, and more for the children’s shoes to carry on the multiple small tasks at the same time, become a multi-threaded) see the explanation, the first concept is obviously, multi-threaded time, need more people power, single thread, on the other hand. And if you combine that with parallel processing,

Threads can be handled in parallel, but threads cannot exist alone. Threads are managed by processes

Process vs. Thread

A process is a running instance of a program. When a program is started, the operating system creates a block of memory for the program, which is used to store code, running data and a main thread to perform tasks. We call such a running environment a process.

The following conclusions can be drawn from the diagram

  • Thread is attached to process, and using multi-thread parallel processing in process can improve computing efficiency.
  • The failure of any thread in the process will cause the entire process to crash.
  • Threads share data in a process.
  • When a process is shut down, the operating system reclaims the memory occupied by the process
  • The contents of the processes are isolated from each other

If we look at this picture carefully, we divide a task into four small tasks, and the four small tasks exist in three threads in a process, and the threads share the data in the process.

Evolution of browsers from ancient times to the present

  • Single-process browser era
  • Multi-process browser era
  • The future of service-oriented architecture

Single-process browser means that all the browser modules run in the same processThese modules include networks, plug-ins, JavaScript runtime environments, rendering engines, pages, etc.

Obviously the disadvantages are obvious

  • unstable
  • Not smooth
  • unsafe

As you can imagine, a plugin or script problem causes the current process to be very slow, or even crash the browser.

Early multi-process architecture

  • One process per page, multiple threads
  • Processes are isolated from each other. When a page or plug-in crashes, only the current page or plug-in process is affected, not the browser or other pages (stable).
  • JavaScript also runs in the renderer process, so even if JavaScript blocks the renderer process, it only affects the current process and the page. When a page is closed, the entire rendering process is also closed, and any memory used by the process is reclaimed by the system (smooth)
  • An added benefit of the multi-process architecture is the use of a secure sandbox, which you can think of as a lock placed on the process by the operating system. The program inside the sandbox can run, but it cannot write any data to your hard drive or read any data from sensitive locations, such as your documents and desktop. Chrome locks the plugin and renderer processes in a sandbox, so that even if a malicious program is executed in the renderer or renderer process, the malicious program cannot break through the sandbox to obtain system permissions. (safety)

Current multi-process architecture

As can be seen from the figure, the latest Chrome Browser includes: one main Browser process, one GPU process, one NetWork process, one Storage process, multiple rendering processes and multiple plug-in processes.

To sum up 👇

  • Browser process. It is mainly responsible for interface display, user interaction, sub-process management, and storage.

  • Render process. The core task is to turn HTML, CSS, and JavaScript into web pages that users can interact with. Both the typography engine Blink and JavaScript engine V8 run in this process. By default, Chrome creates a rendering process for each Tab Tab. For security reasons, renderers are run in sandbox mode.

  • Process of GPU. In fact, Chrome didn’t have a GPU process when it was first released. The original intention of using GPU was to achieve 3D CSS effect, but later the UI interface of web page and Chrome were drawn on GPU, which made GPU become a common requirement of browser. Finally, Chrome has introduced GPU processes on top of its multi-process architecture.

  • Network process. It is responsible for loading web resources on the page. It used to run as a module in the browser process until recently, when it became a separate process.

  • Store processes. Responsible for local storage of pages, the latest Chrome discovery has been independent

  • Plug-in process. It is mainly responsible for the running of plug-ins. Plug-ins are prone to crash. Therefore, plug-ins need to be isolated through the plug-in process to ensure that the plug-in process crash does not affect the browser and page.

The future of service-oriented architecture To address these issues, in 2016, the Official Chrome team used theService-oriented architecture“(Services Oriented Architecture, or SOA) designed the new Chrome Architecture

Chrome eventually reconstructs the UI, database, files, devices, network and other modules into basic services, similar to operating system low-level services.

Knowing the architecture of the browser, we move on to the next step

How to ensure that the page file is delivered to the browser in its entirety?

  • TCP/IP transmits data packets
  • HTTP, WebSocket, they’re all based on TCP/IP

FirstPaint (FP) is an important indicator to measure the performance of Web pages. FP refers to the length of time from page loading to First drawing. This metric directly affects the bounce rate of users, as faster page responses mean more PVS, higher engagement, and higher conversion rates. So what affects the FP measure? One of the most important factors is network loading speed

On the network, a file is usually divided into many packets for transmission, and the packets are likely to be lost or make errors during transmission. So how do you guarantee that the page file will be delivered to the browser intact?

1. IP: Sending packets to the destination host To be transmitted over the Internet, packets must comply with the Internet Protocol (IP) standard

A computer’s address is called an IP address, and visiting any website is really just your computer asking another computer for information

  • The upper layer passes packets containing nuggets to the network layer;
  • The network layer then attaches the IP header to the packet to form a new IP packet, which is delivered to the bottom layer.
  • The bottom layer transmits data packets to host B through the physical network.
  • The data packet is transmitted to the network layer of host B, where host B unwraps the IP header of the data packet and delivers the disassembled data to the upper layer.
  • Eventually, the packet containing the “nuggets” message reaches the upper layer of host B.

2. UDP: Sends data packets to the application

User Datagram Protocol (UDP). One of the most important pieces of INFORMATION in UDP is the port number

In order to support UDP protocol, I extended the previous three-layer structure to four-layer structure, and added a transport layer between the network layer and the upper layer, as shown in the figure below:

Add an operation in the transport layer, the UDP header in the packet will be broken, and according to the UDP port number provided by the application, the data part to the upper layer application program;

There are some disadvantages to all of this:

  • UDP does not guarantee data reliability, but the transmission speed is very fast
  • Data packets are easily lost during transmission.
  • Large files are broken up into smaller packets for transmission. These packets take different routes and arrive at the receiver at different times. UDP does not know how to assemble these packets so that they can be restored to a complete file

3.TCP: Delivers data to the application in its entirety

TCP (TransmissionControlProtocol, transmission control protocol (TCP) is a connection-oriented, reliable, byte stream based communication protocol of the connection, reliable transport layer, transport layer communication protocol based on byte streams. Compared with UDP, TCP has the following characteristics:

  • TCP provides a retransmission mechanism for packet loss.
  • TCP introduces the packet sorting mechanism to ensure that out-of-order packets are combined into a complete file.

A complete TCP connectionThe life cycle includes”Establish a connection Establish a connection“”Transmitting data Transmitting data“And”Disconnect Disconnect the connection“Three stages.

  • First, establish the connection phase. This phase establishes the connection between the client and server through a “three-way handshake.” TCP provides connection-oriented communication transport. Connection-oriented connection-oriented refers to the preparation work between the two ends before data communication begins. Three-way handshake When a TCP connection is established, the client and server send a total of three data packets to confirm the connection.
  • Secondly, the data transmission stage. In this phase, the receiving end needs to confirm each packet. That is, after receiving the packet, the receiving end needs to send the acknowledgement packet to the sending end. Therefore, if the sender does not receive the confirmation message from the receiver within a specified period after sending a data packet, the packet is considered lost and the retransmission mechanism is triggered. Similarly, a large file is divided into many small packets during transmission. After these packets arrive at the receiving end, the receiving end sorts them according to the sequence number in the TCP header to ensure complete data.
  • Finally, there is the disconnection phase, which terminates the connection after the data transfer is complete, and involves the final phase of “four waves” to ensure that both parties can disconnect.

By now you can see that TCP has sacrificed packet speed to ensure reliable data transmission, because “three-way handshake” and “packet verification” doubled the number of packets in the transmission process. You know how to ensure that the page file is delivered to the browser intact

Why do many sites open quickly the second time?

HTTP Request Process

To help you understand, take a look at an HTTP request diagram that shows the various stages an HTTP request goes through in a browser.

As you can see from the figure, the HTTP request in the browser goes through the following eight stages from initiation to completion:

  • Build request
  • Find the cache
  • The IP address and port are ready
  • Waiting for TCP queue
  • Establishing a TCP Connection
  • Making an HTTP request
  • The server processes the request
  • The server returns the request and disconnects

To better illustrate the above eight stages, let’s take a specific example 💪

The browser initiates an HTTP request process

If you type www.baidu.com into the browser’s address bar, what does the browser do next? Let’s follow up step by step.

1. Build the request

First, the browser builds the request line information (as shown below), and once it’s built, the browser is ready to make the web request.

GET /index.html HTTP1.1
Copy the code

2. Search the cache

Before actually making a web request, the browser looks in the browser cache to see if there is a file to request. Among them, browser caching is a technique for saving a copy of a resource locally for immediate use on the next request.

When the browser discovers that the requested resource already has a copy in the browser cache, it intercepts the request, returns a copy of the resource, and ends the request without going to the source server for a new download. The benefits of this are:

  • Alleviating server-side stress and improving performance (less time to acquire resources);

  • For web sites, caching is an important part of fast resource loading.

Of course, if the cache lookup fails, it enters the network request process.

3. Prepare IP addresses and ports

Before we look at network requests, however, we need to look at HTTP and TCP. Because the browser uses HTTP protocol as the application layer protocol, used to encapsulate the requested text information; It uses TCP/IP as the transport layer protocol to send it to the network, so the browser needs to establish a connection with the server over TCP before HTTP work can begin. This means that HTTP content is implemented through the TCP data transfer phase. You can better understand the relationship between the two by combining the following diagram.

Here’s a list of questions you can think about:

  • What is the first step in an HTTP web request? As shown in the figure above, the TCP connection is established with the server.
  • Do we have the information to establish a connection? The first step in establishing a TCP connection is to prepare the IP address and port number.
  • How do I get the IP address and port number? It depends on what we have, we have a URL, can we use the URL to get IP and port information?

You’ll find it easier to remember domain names than IP addresses, so a service has been developed to map domain names to IP addresses. The System that maps Domain names to IP addresses is called the Domain Name System (DNS).

So, along the way, you’ll see that in the first step the browser will ask DNS to return the IP of the domain name. Of course, the browser also provides DNS data caching service. If a domain name has been resolved, the browser will cache the result for the next query, which also reduces the network request.

Once you have the IP, the next step is to get the port number. In general, HTTP defaults to port 80 if the URL does not specify a port number.

If you want to learn more about DNS resolution, you can check out this article: Introduction to DNS Principles

4. Wait for the TCP queue

Now that you have the port and IP address ready, can you set up a TCP connection?

For example, Chrome has a mechanism that allows a maximum of six TCP connections to be established on the same domain name. If 10 requests occur on the same domain name, four of them will be queued. Until the ongoing request completes.

Of course, if the number of current requests is less than 6, the next step is to establish a TCP connection.

What if there are lots of pictures or other requests for support?

5. Establish the TCP connection

  • There are many things to be said in detail, such as three handshakes to establish a connection and four waves to disconnect the connection, as already mentioned above!

6. Send an HTTP request

We’ve talked a little bit about setting up a TCP connection, and you can understand that a TCP connection is a way for the browser to communicate better with the server. Of course, with the above process, HTTP data is also transmitted during this communication process.

How does the browser send messages to the server 👇

  • The browser sends a request to the server: request method, request URL HTTP protocol version
  • The request line basically says to the server, I need to do something like GET, I need to GET something from you, and POST usually means I need to raise some data to the server, but notice that if IT’s POST, the browser also needs to prepare the data and send it to the server through the body of the request.
  • Request header: the basic information of the browser is told to the server, such as the operating system used by the browser, the kernel information of the browser, the domain name information of the request, the Cookie information of the browser, and so on.

How about 🤖, if you understand some skin after hearing these, how can the server handle HTTP requests

7. The server processes the HTTP request

The HTTP request has finally been sent to the server, and the server will prepare the content based on the request

7.1 Return Request

After the server process, it returns the result data to the browser, let’s see how the data is put back 👇

  • Response line: HTTP protocol version status code. You can know the result of the processing through the common status code
  • Common status code: 200 Indicates that the processing is successful. If no page is found, the status code is 404

There are many types of status code, many information on the Internet, you can consult by yourself, or recommend two good articles:

A representative HTTP status code

What are the HTTP status codes required for an interview

  • Response header: You can think of it as containing information about the server itself, such as when the server generated the data, the type of data returned (HTML, streaming, JSON, XHTML, and so on), and the cookies the server saved on the client
  • Also important is the cache-control field in the response header, which relates to the HTTP Cache. The implication of this field is to set the time for caching the resource
  • After sending the response header, the server can continue sending the data in the response body, which usually contains the actual content of the HTML.

8.1 Disconnection

Typically, after the server sends data, the TCP connection is closed. But there’s one particular case, and let’s look at it

Connection:Keep-Alive 
Copy the code

If the browser or server adds the above header fields, the TCP connection is still maintained. In this way, the browser can send a request through the same TCP connection. Saving the TCP connection can save the time for establishing a connection for the next request and improve the loading speed of resources.

For example, the images embedded in a Web page are all from the same Web site, and if you initialize a persistent connection, you can reuse that connection to request other resources without having to re-establish a new TCP connection.

redirect

There is a special case we need to talk about, but it is related to the status code mentioned above. As we probably know, different status codes are returned by different servers. You must have encountered this situation: When you open baidu.com in your browser, you will find that the final URL is www.baidu.com **. The reason why these two urls are different is that they involve redirection **. Let’s take a look at this situation from an image: 👇

Let’s take a look at the status code 301 returned by the response line. Status 301 tells the browser that you need to redirect to another URL. The address you want to redirect is officially included in the Location field of the response header. Next, the browser retrieves the address in the Location field and renavigates, which is the complete redirection process.

This explains why when you type baidu.com, you end up with www.baidu.com

Of course I can only say KaoChaDian too much, just the HTTP protocol can ask lots of questions, I just come up with a example, only you step by step to analysis and put forward some problems, let questions lead you to learn, captured the essence of the problem through related knowledge, let you stand on a higher dimension to check the overall framework.

Why do many sites open quickly the second time?

Since the second time makes the page open faster, you must have cached the time consuming data the first time the page was loaded

From the core process described above, data from two areas such as DNS and page resource cache will be cached by the browser.

DNS caching is relatively simple, which can be looked at in the article above.

Browser cache

If you’re talking about the browser’s cache, you’re going to be talking about header fields

  • Cache-control (Critical Policy)
  • Expires
  • Last-modified
  • ETag

The caching process is shown as follows:

As you can see from the first request in the figure above, when the server returns an HTTP response header to the browser, the browser sets whether or not to Cache the resource through the cache-Control field in the response header

The browser cache expansion, again, is a big one. Take a look at this browser cache

conclusion

Basic Browser architecture (Heavy)

  • The original browsers were single-process, they were unstable, fluid, and insecure.
  • Then Along came Chrome, which creatively introduced the multi-process architecture and solved these legacy problems.
  • Later, Chrome tried to apply to more business scenarios, such as mobile devices, VR, video, etc., to support these scenarios, Chrome architecture became increasingly complex, the complexity of this architecture forced the Chrome development team to restructure the architecture, and ultimately the Chrome team chose the form of service-oriented Architecture (SOA).

How to ensure that the page file can be delivered to the browser (TCP) in its entirety?

  • Data on the Internet is transmitted through data packets, which are easy to lose or make errors during transmission.
  • IP is responsible for delivering packets to the destination host.
  • UDP is responsible for delivering data packets to specific applications.
  • TCP, on the other hand, guarantees complete transmission of data, and its connection can be divided into three stages: establishment of the connection (three-way handshake), transmission of data, and disconnection (four-way wave).

Why do many sites open quickly the second time?

  • An HTTP request in a browser goes through eight phases, from initiation to completion
  • The browser sets whether or not to Cache the resource through the cache-Control field in the response header