How browsers Work (1.2W words)

preface

To be a qualified front-end engineer, it is necessary to understand how browsers work, so that you have a complete body of knowledge. “If you can understand how browsers work, you can solve 80% of the front-end problems.”

“Other articles:“

❝

• The 9 basic operations of the “Algorithms and Data Structures” list
• [full of sincerity 👍]Chrome DevTools debugging tips, efficiency ➡️🚀🚀 ➡️
• (dry 👍) From detailed manipulation of JS arrays to a brief analysis of array.js in V8
• [1.1W word] To his girlfriend’s secret – how the browser works (rendering process) chapter
• [suggestion 👍] Again 100 JS output questions sour cool continue (total 1.8W words + consolidate JS foundation)
• 54 JavaScript interview questions

❞

The key is “girlfriend interview of the time, this part of the knowledge to hang her” 😹 so ready to write… .Mmm ~ o(￣▽￣)o

❝

Again, “Understanding how the browser works gives you a higher level of understanding of the front end.”

❞

❝

I hope that through this article, you can re-understand the browser, and JavaScript, network, page rendering, browser security and other knowledge connected together, so that you have a new understanding of the whole front-end system.

❞

“From the macro point of view to see the browser work, big guy do not spray, your likes and favorites are the biggest support for me” 😿

“After reading this installment, you will learn“

• The underlying logic of front-end performance optimization;

• The core process of browser page rendering

• JavaScript runtime mechanism parsing

• Browser network and security mechanism analysis

Let’s get started. What’s with the ink? 🔊

Whisper: You are welcome to share your thoughts with me in the comments section, and you are welcome to record your thought process in the comments section 👊

How much you know about the browser architecture

Girlfriend: ❓❓❓ I want you to fill my browser principle related knowledge, you talk to me about structure ❓

Me (weakly) : You see, to design a high-performance Web application, or to optimize an existing Web application, you need to understand the Web flow of the browser, the page rendering process, the JavaScript execution process, and the Web security theory, and these functions are scattered across the various components of the browser, and learned through the browser’s multi-process architecture. You can string together a web of disparate information, so it’s important to learn about the browser’s multi-process architecture

Girl friend: that now browser kind is too much, that more or less all existence difference, that estimate of speak half an hour?

Me: No, I think Chrome is the most representative, because Chrome, Microsoft Edge and most of the mainstream browsers in China are based on Chromium secondary development; Chrome is the official release of Google, features and Chromium are basically the same, there are only some product level differences; HMMM ~ o(~ ▽ ~)o🔊 Take Chrome for example

Me: Do processes and threads understand?

Girlfriend: What? I’ve heard of it, but I’m not sure 😰

Processes and threads

To introduce processes and threads, we need to talk about parallel processing first. Once you understand the concept of parallel processing, it becomes much easier to understand the relationship between processes and threads.

What is parallel processing

Parallel processing in computers is processing multiple tasks at the same time. For example, we want to evaluate the values of the following three expressions and display the results.

A = 1+2
B = 20/5
C = 7*8
Copy the code

When writing code, we can break this process down into four tasks:

• Task 1 is to calculate A=1+2;
• Task 2 is to calculate B=20/5;
• Task 3 is to calculate C=7*8;
• Task 4 is to display the result of the final calculation.

Normally a program can be processed using a single thread, that is, each of the four tasks is executed in four steps in sequence

What happens if you use multiple threads? The first step is to use three threads to execute the first three tasks simultaneously. Second, perform the fourth display task.

By comparison, you can see that it takes four steps to execute with a single thread, compared to two steps with multiple threads. Therefore, using parallel processing can greatly improve performance.

Threads vs. processes

Multithreading can process tasks in parallel, but threads cannot exist alone. They are started and managed by processes. What is a process?

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.

Look at the picture 👇

As can be seen from the figure, threads are attached to processes, and multi-threaded parallel processing in processes can improve computing efficiency.

The relationship between processes and threads has the following four characteristics:

1. The failure of any thread in the process will cause the entire process to crash.

2. Threads share data in a process.

1. As can be seen from the figure above, thread 1, thread 2, and thread 3 write the execution results to A, B, and C, respectively. Then thread 2 continues to read data from A, B, and C to display the execution results.

2. When a process is shut down, the operating system reclaims the memory occupied by the process

3. The contents of the processes are isolated from each other

Supplement the foundation, the beginning of the topic 👇

Single-process browser era

As the name suggests, a single-process browser is a browser where all modules run in the same process, including the web, plug-ins, JavaScript runtime environments, rendering engines, and pages.

The architecture of the single-process browser is shown in the following figure 👇

With so many functional modules running in one process, there must be drawbacks:

• instability
• Not smooth
• unsafe

Question: If the interviewer asked you to elaborate, how would you explain yourself?

Multi-process browser era

Based on the above problems, modern browsers have solved these problems, how? Let’s talk about the multiprocess era

Early multi-process architecture

As you can see from the figure, Chrome pages run in a separate rendering process, and plug-ins run in a separate plug-in process, and processes communicate with each other through IPC (dotted line).

* * let’s look at how to solve the problem of unstable: * * because the process is isolated, so when a page or a plug-in collapse, affect only the process of the current page or plug-in process, will not affect the browser and other pages, it is perfectly solved the page or plugin will lead to the collapse of the entire browser crash, also is the problem of instability.

** Also, JavaScript is running in the render process, so if JavaScript blocks the render process, it will only affect the current rendered page, not the browser and other pages. Because the scripts for the other pages are running in their own rendering process. So when we run the script in Chrome, the only thing that doesn’t respond is the current page.

The solution to the memory leak is even easier, because when a page is closed, the entire rendering process is closed, and the memory occupied by the process is then reclaimed by the system, which can easily solve the memory leak problem of the browser page.

Finally, let’s look at how the above two security problems are solved: An added benefit of using a multi-process architecture is the use of a secure sandbox. You can think of the sandbox 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.

Above is I carry over of 🖕 explain than I clear, also afraid of girlfriend don’t understand 😹

The following is our focus: the current Chrome architecture is to use the following scheme, for the back of the common interview questions: from the browser to enter the URL press enter to the page display what happened this classic interview questions, there is a system of knowledge, than reciting regulations, is more important!

Current multi-process architecture

There are definitely new changes in Chrome development, so let’s take a look at the latest Chrome process architecture, which can be found at 👇

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

Let’s analyze the functions of these processes one by one 👇

• 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.
• 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.

However, every coin has two sides. While the multi-process model improves the stability, smoothness, and security of the browser, it also inevitably introduces some problems:

• Higher resource footprint because each process contains a copy of the common infrastructure (such as the JavaScript runtime environment), this means that the browser consumes more memory resources.
• More complex architectures browsers have high coupling between modules, poor scalability and other problems, resulting in the current architecture has been difficult to adapt to new requirements

The future of service-oriented architecture

In order to solve these problems, in 2016, the Chrome official team designed a new Chrome Architecture using the idea of “Services Oriented Architecture” (SOA)

Chrome eventually reconstructs UI, database, files, devices, and network modules into basic services, similar to operating system underlying services. Here is a diagram of Chrome’s “Service-oriented Architecture” process model:

Involve questions

Why couldn’t single-process browsers use security sandboxes at the time?

How many processes appear when you open a Tab page in Chrome?

Even in today’s multi-process architecture, there are still cases where a single page freezes and eventually all pages crash. What is your understanding?

https://time.geekbang.org

https://www.geekbang.org

https://www.geekbang.org:8080

conclusion

Girl friend: say of a lot of ah, be to remember not to live, can draw a thinking map, perhaps sum up 👧

I :(this is not already very concise and clear) see girlfriend so look forward to 😎 feeling arrangement

• Early browsers: Unstable (single process) not smooth (single process) Not secure (sandbox)
• Early multiprocess browsers: Main process renderer plug-in process
• Modern multi-process architecture: main process renderer process plug-in process GPU process network process
• The future of service-oriented architecture

HTTP Request Process

Girl friend: how to tell me to speak of HTTP request flow na, interview often ask input URL, the process that happen in the middle, I want to listen to this, you don’t say with me some don’t of 💢

I (whisper) : cute if you are familiar with a complete HTTP workflow, I believe that these knowledge points for your future study or work will be very helpful, and in this way, you said that the topic will naturally understand, or listen to me first chat?

Girlfriend :(￢ ̫̿￢) hum, what do you get out of here that interests me 💢

The whole 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

When the queue is over, you can finally happily shake hands with the server, with the browser establishing a connection via TCP before the HTTP work can begin. And the way TCP works, to open up the details, there are a lot of details to grasp, can take a look at this article:

TCP/UDP protocol details

• UDP packets are easily lost during transmission
• When a large file is split into many small packets, the small packets pass through different routes and cannot reach the receiving end at the same time. UDP does not know how to assemble these packets and UDP does not have a retransmission mechanism

TCP is a connection-oriented, reliable, byte stream – based transport – layer traffic protocol.

A complete TCP connection life cycle consists of three phases: Establish a connection, transfer data, and disconnect a connection.

• If you want to talk about it in detail, the content is much more, such as three handshakes to establish a connection, four waves to disconnect the connection, many articles also introduced the whole process in detail, I will not introduce here, you can look at the article I recommend, about these contents.

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

Involve questions

• Why do many sites open quickly the second time? 🚀
• When you log in to a site, the next time you visit the site, you are already logged in. How does this work?
• How to use cookies for state management
• Why do you need three handshakes?
• UDP understand, compared with TCP, what are the advantages, disadvantages?
• You just said that TCP connections have TCP queues, but how to solve the problem when loading a large number of images or other resources

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.

Let’s talk about the first related point, why does it speed up opening?

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:

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

From the above understanding, the browser cache resources to the local, browser cache directly use a local copy of the response request, does not generate a real network request, thus saving time, speed up access 🚀

conclusion

• An HTTP request goes through the following eight stages:
• Build the request, find the cache, prepare the IP and port, wait for the TCP queue, establish a TCP connection, initiate an HTTP request, the server processes the request, the server returns the request, and disconnect
• Understand HTTP workflow, the overall framework, there are a lot of ideas to analyze the problem in it, < (^ – ^) > and then in depth to understand how each stage works, you can learn or work in the future to help.

From a macro perspective to see the HTTP request process, with an overall framework, the next step is the analysis of the problem, with doubts to learn, grasp the essence of the problem, such as in-depth understanding of how TCP connection, this is not a learning method 👊

Navigation flow: What happens between entering the URL and presenting the page

Girl friend (appear) : the interview must exam questions, give me to talk about the whole process first, I take notes down

I: HMM ~ O (￣▽￣) O, I think I can only tell you the overall process, too fine content, naturally need you step by step to analyze, with the problem to understand 👊

The whole process

Let’s start with a flow chart

As you can see from the figure, there is interprocess communication (IPC), so let’s review the responsibilities of processes in the previous section.

• Browser processes are responsible for user interaction, child process management, and file storage
• Web processes are web downloads for renderers and browser processes
• The rendering process parses HTML, CSS, JavaScript, images and other resources into pages that can be displayed and interacted with.

Usually the rendering process is in the security sandbox, Chrome security measures are necessary, you can understand that the rendering process so the content is obtained through the network, there may be some malicious code in the process, this kind of code exploits browser vulnerabilities to attack the system, so it is necessary… .

From the picture above, the process looks like this:

1. The browser process sends a URL request to the network process
2. After receiving the URL request, the network process initiates a network request. The server then returns HTTP data to the network process, which parses the HTTP response header data and forwards it to the browser process
3. After receiving the response header data from the network process, the browser process sends a CommitNavigation message to the renderer process. The browser process sends a CommitNavigation message with the response header and other basic information.
4. After receiving the CommitNavigation message, the renderer process is ready to receive the HTML data by directly plumbing the data to the network process
5. Finally, the renderer “confirms submission” to the browser process, which tells the browser process that I’m ready to accept and parse the page data
6. Finally, the browser process updates the page state

These are the main stages of experience, and the following is a detailed analysis of these stages 👇

Try to analyze the overall process

1. User input URL

The browser will determine whether to search or address based on the information entered by the user. If it is the search content, it will combine the search content and the default search engine into a new URL. If the content entered by the user complies with the URL rules, the browser adds the protocol to the content to synthesize a valid URL

For example, if you type www.baidu.com, the URL bar will combine the content with the protocol according to the rules to synthesize the complete URL, such as https://www.baidu.com

After entering content, the user presses enter. The loading state is displayed in the navigation bar of the browser, but the previous page is displayed. This is because the response data of the new page has not been obtained.

There is, of course, a beforeUnload event that allows the user to clean up some data before the page exits. It also asks the user whether to leave the page, such as if there is an unsubmitted form on the page. The user can use this event to unnavigate and keep the browser from doing any follow-up work.

2. URL Request process

The browser process will construct the request row data and conduct interprocess communication (IPC) to send the URL request to the network process, similar to the following:

GET /index.html HTTP1.1
Copy the code

3. Network process to obtain the URL, first to the local cache to find whether there is a cache file, if there is, intercept the request, directly 200 return; Otherwise, enter the network request process

4. The network process requests the DNS to return the IP address and port number corresponding to the domain name. If the DNS data caching service has cached the current domain name information before, the DNS data caching service directly returns the cached information. Otherwise, a request is made to obtain the IP address and port number resolved based on the domain name. If there is no port number, the default value is 80 for HTTP and 443 for HTTPS. If the request is HTTPS, you need to establish a TLS connection.

5. Chrome has a mechanism for setting up a maximum of six TCP connections within a domain name. If there are 10 TCP connections within a domain name, four of the requests will go to the waiting table until the ongoing requests are complete. If the number of requests is less than 6, the TCP connection is directly established.

6. A TCP three-way handshake establishes a connection, and the HTTP request is sent down with a TCP header that includes the source port number, the destination port number, and the serial number used to verify data integrity.

7. The network layer adds an IP header to the packet, including the source and destination IP addresses, and continues down to the bottom layer

8. The bottom layer transmits the packet to the destination server host through the physical network. Then the network layer of the destination server host receives the packet, resolves the IP header, identifies the data part, and transmits the unwrapped packet up to the transport layer.

9. Destination server The host transport layer obtains the packet, parses the TCP header, identifies the port, and forwards the unwrapped packet to the application layer

10. The application layer HTTP parses the request header and request body. If a redirect is required, HTTP directly returns the status code301 or 302 of the HTTP response data. At the same time, attach the redirect address in the Location field of the request header, and the browser will redirect the operation according to code and Location. If the resource is not redirected, the server will determine whether the requested resource is updated based on the if-none-match value in the request header. If the resource is not updated, the server will return the 304 status code, which tells the browser that the previous cache is still available. Otherwise, return the new data, the status code of 200, and add a field to the corresponding header if you want the browser to cache the data:

    Cache-Control:Max-age=2000
    Copy the code

    The response data is returned to the network process in the order of application layer, transport layer, network layer, transport layer, application layer

11. When data transfer is complete, TCP waves four times to disconnect the connection. If the browser or server adds the following information to the HTTP header, TCP remains connected. Maintaining a TCP connection saves the time for establishing a connection next time, indicating the resource loading speed

    Connection:Keep-Alive
    Copy the code

12. The network process parses the packet and determines the type of the response data according to the Content-Type in the response header. If it is a byte stream, the request is sent to the download manager. If it is text/ HTML, the browser process is notified that it has the document ready to render

    

    

    The content-Type value of the response header is Application/OCtet-stream, and the data displayed is a byte stream. Normally, the browser will handle the request according to the download Type.

    Note that if the content-type is incorrectly configured on the server, such as setting the text/ HTML Type to application/octet-stream, the browser may misinterpret the file’s Content, for example, by turning a page intended for presentation, It becomes a download file.

13. The browser process gets A notification and, depending on whether the current page B is opened from page A and whether it is the same site as page A (the root domain and protocol are considered the same site), reuses the previous page process if the above conditions are met, otherwise, A separate renderer process is created.

14. The browser sends a “submit document” message to the renderer process. After receiving the message, the renderer process and the network process will establish a “pipeline” to transfer data. After the document data transfer is complete, the renderer process will return a “confirm submission” message to the browser process.

15. After receiving the confirm message, the browser updates the web page status, including the security status, URL in the address bar, and historical forward and backward status. In this case, the web page is blank.

This explains why, when you type an address into your browser's address bar, the previous page doesn't disappear immediately, but instead takes a while to load before the page is updated.Copy the code

16. The rendering process carries out page parsing and sub-resource loading of the document. HTML is transformed into DOM Tree (binary Tree similar structure) through HTM parser. CSS is transformed into CSSOM Tree according to CSS rules and CSS interpreter. Form the Render tree (excluding the specific HTML elements and the specific position of elements to draw), calculate the specific width and height color position of each element through Layout, combine them, start drawing, and finally display them in a new page on the screen.

The navigation process is important. It is a bridge between the web loading process and the rendering process. If you understand the navigation process, you will be able to string together the entire page display process, which is the key to understanding how the browser works.

Of course, the rendering stage is something every front-end engineer needs to be familiar with and master, and the next article will take care of the ✍ rendering process again

The next issue:

Rendering phase is very important, to understand the related process allows you to “see through” page works, with the knowledge, believe you can solve part of the problem, such as familiar with the use of developer tools, can optimize the page caton problem, use JavaScript to optimize the animation process, by optimizing the style sheet to prevent forced synchronous layout, and so on.

Girlfriend: Wow, I do seem to have an overall understanding of the browser process, which helps me to understand how the browser works to some extent 👏, when can you tell me the details of the rendering process, I still want to learn more 🏃

I opened (nan) heart (guo) said: ✍ for these two days, and then I will write it for you

reference

From browser multi process to JS single thread, JS running mechanism is the most comprehensive combing

DNS Principle Resolution

DNS basics for front-end engineers

TCP/UDP protocol details

A representative HTTP status code

What are the HTTP status codes required for an interview

Browser cache

Recommended 👍👍👍 Geek Time – How browsers work and practice