preface

In a recent interview, many candidates had no idea how code was executed in a browser, and most had only a rough idea. I happened to read God’s on Geek Hour recentlyHow browsers work, after reading the working principle of the browser has a sense of suddenly enlightened, while have spare time to put their own understanding of this piece of sorting out, I hope to be helpful to you.

The relevant knowledge

Memory space

The storage space of JavaScript execution time in the browser can be divided into three types: code space, stack space and heap space.

  • Code space: Stores executable code
  • Stack space: The place where the execution context is stored when JavaScript code is compiled and executed, mainly storing values of primitive types, as well as references to reference types.
  • Stack frame: The portion of stack space allocated separately for a function call.
  • Heap space: The storage of data in memory is unordered, and each data stored in the heap space has a unique index value, according to which we can get its true value. For example, in js object data types: we store references to objects on the stack so that there are no performance problems due to objects taking up too much memory. So when you manipulate an object, you’re really manipulating a reference to the object (an address pointer).

Note: the meaning of stack has the following several references from the cheongchang _f7AF article

The first definition of stack is the storage method of a group of data, characterized by LIFO, or Last in, first out (Last in, first out). The second meaning of stack is "call stack", which means functions or subroutines are stacked like piles of wood to implement layers of calls. Memory area The third definition of stack is a memory area where data is stored. When a program is running, it needs memory to store data. Typically, there are two different types of memory: one called stack and the other called heap.Copy the code

JavaScript code execution

  • The call stack: In JavaScript, because it’s a single thread, it creates a call stack when it executes a function, it pushes it into the call stack when the JavaScript code executes (when a function is called, the function goes into the call stack), and it pops out of the call stack when it completes execution, which is the life cycle of a function in JavaScript.

  • Queue: In JavaScript we are all familiar with the event mechanism (mouse click to move dom loading, etc.), and the event cannot be executed in the way of the call stack, its actual structure is executed in the queue, i.e. first in, first out, last in, last out.

Processes in the browser

Note: JavaScript execution is single-threaded and browsers are multi-process

  • Process: Now when the browser is open, it usually executes multiple processes. There are probably several processes outside the main process, such as plug-in process/network process/render process.
  • Thread: thread is an execution path, is the smallest unit of the program execution, it is an execution flow of the process, is the basic unit of CPU scheduling and dispatching, a process can be composed of many threads, threads share all the resources of the process, each thread has its own stack and local variables. Threads are scheduled independently by the CPU, allowing multiple threads to run simultaneously in a multi-CPU environment. Concurrent operations can also be performed by multithreading, with one thread assigned to each request.
  • Single threaded (why js is single threaded) : When the BROWSER JS engine is designed to be multi-threaded, there will inevitably be resource competition between DOM, so the implementation of the language will become very bloated, running on the client side, resource consumption and performance will be not very optimistic, so it is designed in the form of single thread. In addition, if the browser is multi-threaded, the user can interact (manipulating the DOM) and the page will appear many unexpected displays.
  • Multithreading: Web Worker multithreading is proposed in THE HTM5 standard, but this multithreading is controlled by the main thread and cannot manipulate DOM elements on the page.

Page rendering process

Browser parsing URL

Here’s what happens when you type a website address or other content into the browser’s navigation bar

  • Check whether the input is a valid URL rule: Determines whether the input complies with the URL rule based on the characteristic rule
  • Combine it into a valid URL or call the browser’s default search engine
  • Current page triggers beforeUnload event: The beforeUnload event for the current page is triggered when input is requested, where we can stop subsequent operations of the browser.
  • The browser sends an HTTP request: The network process of the browser checks whether the local cache has cached the resource. If there is a cached resource, it is returned directly to the browser process. If the resource is not found in the cache, the network request process is initiated directly. In the network request, the browser performs DNS resolution to obtain the real server IP address.
  • The server returns relevant data

Response data processing

  • The process begins to parse the response header: the browser retrieves the return status of the current request and proceeds with the next step if it is 200. If it is not 200, the corresponding data is processed. For example, 301/302 is processed.
  • The browser resolves the response type: when the request status code is 200, the browser will read the response type and judge the next processing logic according to the response type of the browser. If the request status code is text/ HTML, the browser will enter the rendering stage.
  • Enter the preparation page rendering stage

Page rendering processing

  • Renderer start: browser renderers usually start one render process on a TAB, and multiple tabs share one render process, 1. If page B is opened from page A, and A and B belong to the same site, then page B reuses the rendering process of page A; 2. Open multiple blank TAB pages

As you can see, my browser now has two tabs open.

  • Browser rendering process for return HTML file: main process to the process of network access to the data through data channel to the rendering process (note: there is no refresh the browser this time), the rendering process accept will tell the browser main process after complete, the browser main process began to update the entire page.

  • Page parsing and loading: Build DOM tree = style calculation = Layout = Layering = Draw = block = Rasterization and composition

  • Build a DOM tree:

  • Style calculation: Convert CSS to a structure that browsers can understand = “convert property values =” calculate styles in the DOM. The resulting image looks something like this

  • Layout: create (iterate over all DOM nodes on the page) = “calculate (calculate the position of DOM nodes according to CSS related properties)

Note: Layouts are complex to create and calculate, and can be the biggest performance drain on a site.

  • Layering: We need to know that pages in the browser are layered, and we need to understand the hierarchy of the layout tree before drawing

Note: This image is from Geek TimeCopy the code
  • Draw: The rendering engine begins to draw blocks of DOM diagrams
  • Rasterization and composition: Converting blocks to bitmaps

Note: This section mainly describes the basic process, detailed process will be shared in the following sections

conclusion

This chapter mainly introduces the basic knowledge of the principles of the browser (Chrome), hoping to help you understand the principles of the browser.