one

CPU && GPU

  • The CPU can be thought of as the brain of a computer. A CPU has one or more cores on it, and each core can solve many different tasks one by one (sequentially).
  • Unlike cpus, Gpus excel at handling simple tasks across cores simultaneously.
  • When you launch an app on a computer or phone, it’s the CPU and GPU that power the app. Typically, applications run on cpus and gpus through mechanisms provided by the operating system.

Processes && threads

  • A process can be described as the execution of an application. Threads exist in a process and execute any part of a program.

Browser architecture

  • So how do you build a Web browser with processes and threads? There is no standard specification for how to build a Web browser. The way one browser is built can be very different from another.
What does each process control
The benefits of Chrome’s multi-process architecture

  • While each TAB has its own rendering process, if one TAB becomes unresponsive, you can close that TAB while the other tabs are still running and ready to use. If all tabs are running on the same process, then when one becomes unresponsive, all tabs become unresponsive.

  • Security and sandboxing.

    • Because the operating system provides a way to limit process permissions, browsers can sandbox certain function-specific processes. For example, Chrome restricts access to arbitrary files to processes that process arbitrary user input, such as the renderer process.

    • Because processes have their own private memory space, they often contain copies of the common infrastructure (such as V8, which is Chrome’s JavaScript engine). This means that more memory is being used, and if they were threads in the same process, those copies would not be shared. To save memory, Chrome puts a limit on the amount of memory that can be accelerated. The limit depends on the amount of memory and CPU capacity available on the device, but when Chrome runtime reaches the limit, it will start running the same process on different tabs on the same site.

      Save more memory – servitization in Chrome
      • Chrome is undergoing an architectural change to run each module of a browser application as a service, making it easy to disassemble or aggregate processes.
      • The conventional wisdom is that when Chrome is running on powerful hardware, it breaks up each service into different processes to improve stability, but when Chrome is running on resource-limited devices, it aggregates services into a single process to save memory footprint. Prior to this architectural change, a similar consolidation process to reduce memory usage had been used on Android-like platforms.

      two

      Simple navigation

      1. Process input

      • When the user starts typing into the address bar, the first thing the UI thread asks is “Is this a search query or a URL address?”

      2. Start navigation

      • When the user presses The Enter key, the UI thread enables a network call to retrieve the site content.
      • The network thread uses appropriate protocols, such as DNS lookups and establishing TLS connections for requests.

      Read the response

      • Once it starts receiving payload, the network thread looks at the first few bytes of the data stream if necessary. The content-Type field of the response message declares the data Type.
      • If the response is an HTML file, the next step is to pass the data to the renderer, but if it is a zipped file or something else, it means it is a download request and therefore needs to pass the data to the download manager.
      • SafeBrowsing is also performed at this point. If the domain name and response data appear to match a known malicious site, the network thread displays a warning page. In addition, a Cross Origin Read Blocking (CORB) check occurs to ensure that sensitive cross-domain data is not passed to the renderer process.

      4. Find the render process

      • Once all the checks have been performed and the network thread is sure that the browser will navigate to the requested site, the network thread tells the UI thread that all the data is ready. The UI thread looks for the renderer process to start rendering the Web page.

        • Because network requests can take hundreds of milliseconds to get a response back, an optimization measure can be applied. In step 2, when the UI thread is sending a URL request to the network thread, it already knows which site they will navigate to. In parallel with the network request, the UI thread attempts to actively find or start a rendering process. This way, if everything goes as expected, the rendering process is already on standby when the network thread receives the data. If the navigation is redirected across domains, the standby process may not be used, in which case another process may be used.

      5. Submit navigation

      • Now that the data and renderer are ready, the browser process sends an IPC (inter-process communication) to the renderer process to submit the navigation.
      • Once the browser process receives an acknowledgement that the renderer has committed, the navigation is complete and the document load parsing begins.

      Initial loading completed

      • Once the navigation is committed, the rendering process starts loading the resources and rendering the page.
      • Once the render process has rendered “finished”. It sends an IPC back to the browser process (this happens after all frame onload events on the page have been fired and executed).
      • At this point, the UI thread stops the loading animation on the TAB page.

      Navigate to another site

      • Easy navigation is complete! But what happens when the user enters another URL in the address bar? Well, the browser process performs the same steps to navigate to a different site. But before it does this, it checks whether the currently rendered site cares about the beforeUnload event.
      • Beforeunload can create “Leave this site?” when you try to navigate off or close tabs. Warning. Everything inside the TAB, including your JavaScript code, is handled by the renderer process, so when a new navigation request comes in, the browser process must check with the current renderer process.
      • If the renderer has enabled navigation (like the user clicking on a link or the client JavaScript running window.location = “newsite.com”), the renderer checks the beforeUnload event handler first. It then performs the same steps as the browser handles launch navigation. The only difference is that the navigation request is sent by the renderer process to the browser process.

      3 Rendering process

      The rendering process processes the web site content

      • The renderer is responsible for everything that happens inside the TAB. In the renderer process, the main thread handles most of the code that the server sends to the user.
      • The core job of the rendering process is to transform HTML, CSS, and JavaScript into a web page that users can interact with.

      parsing

      1. DOM construction

      • When the renderer process receives the submission message for the navigation and begins to receive THE HTML data, the main thread begins to parse the text string (HTML) and convert it into the Document Object model (DOM).
      • The DOM is the internal representation of a page in a browser and a data structure and API that Web developers can interact with through JavaScript.

      2. Load subresources

      • As the DOM is parsed and built, the main thread requests them one by one (external resources like images, CSS, and JavaScript) in the order it is processed, but for speed, the “preload scanner” runs at the same time.
      • If there is one in the HTML document<img> 或 <link>The preload scanner looks at the markup generated by the HTML parser and sends the request to the network thread in the browser process.

      3. Js blocks parsing

      • When the HTML parser encounters<script>The parsing of the HTML document is paused and the JavaScript code is loaded, parsed, and executed. Why is that? Because JavaScript can rewrite documents using methods such as document.write(), this changes the entire DOM structure (an excellent illustration of this is in the Overview of the Parsing Model in the HTML specification).

      4. Prompt browser how to load resources

      • Web developers can send prompts to browsers in a number of ways to load resources properly. If your JavaScript doesn’t use document.write(), you can use the<script>The tag adds the async or defer attribute so that the browser loads the running JavaScript code asynchronously without blocking parsing. You can also use JavaScript modules if appropriate. You can use<linkrel="preload">Tell the browser that you definitely need the resource for the current navigation and that you want to download it as soon as possible.

      5. Style calculation

      • The main thread parses the CSS and determines the computed style of each DOM node. This is information about what style to apply to each element based on CSS selectors, as you can see in the Computed section of DevTools.

      6, layout,

      • Now, the rendering process knows the style of each node and the structure of the document, but this is not enough to render the page.
      • Layout is the process of calculating the geometry of elements. The main thread traverses the DOM, calculating the style and creating a layout tree that contains information such as x and Y coordinates and bounding box sizes.

      7, drawing

      • Having DOM, style, and layout is still not enough to render a page. Suppose you’re trying to recreate a painting. You know the size, shape, and position of the elements, but you still need to determine the order in which to draw them.
      • For example, you can set z-index for some elements, where drawing in the order of the elements written in HTML will result in incorrect rendering.
      • In the draw step, the main thread traverses the layout tree to create the draw record. A drawing record is a record of the drawing process

      Updating the render pipeline is expensive

      • The most important thing in the rendering pipeline is that in each step, the results of the previous operation are used to create new data for the next operation.

      synthetic

      How to draw a page

      • Now that the browser knows the structure of the document, the style of each element, the geometry of the page, and the order in which it draws the page, how does it draw the page? Converting this information into pixels on the screen is called rasterization.

      What is composition

      four

      View input events from the browser

- The browser process sends the event type and coordinates to the renderer process ** synthesizer to receive the input event ** ## other ### # 1 - Browsers are multi-threaded and work together under kernel control to keep in sync. It has at least three resident threads: the JS engine thread, the GUI rendering thread, and the browser event-firing thread. - Js engine is event-driven single thread execution - rendering thread is responsible for rendering browser interface, ** but GUI rendering thread and JS engine are mutually exclusive **, GUI thread is suspended when JS execution, GUI updates are also stored in a queue, until js engine idle to execute. ** This is js blocking page loading **. - Event trigger thread. When an event is triggered, the thread adds the event to the end of the task queue and waits for the JS engine to process it. - Browser - Interface, browser engine, rendering engine, Web, UI backend interface, JS interpreter, data store -! [image-20210904203455954]() - Browser kernel: Webkit, Gecko, Trident - The engine starts by retrieving the contents of the requested document from the network and follows the process -! [image-20210904203812133]() - ! [image-20210904204402927]() ### 2 < https://www.bilibili.com/video/BV1x54y1B7RE/?spm_id_from=333.788.recommend_more_video.0 > - each application must be started at least a process to perform its function. The process creates small threads to help it finish. [image-20210904230009334]() - ! [image-20210904230106442]() - ! [image-20210904230912166]() <! ----> - After the network thread in the browser process requests to obtain THE HTML data, it will pass the data to the main thread of the renderer process through IPC. The main thread will parse the HTML, generate DOM tree, generate layout tree according to the style calculation, traverse the layout tree to generate the drawing sequence table, Draw order table and layer tree together sent to the synthesizer thread, synthesizer thread according to the rules of layers, and the layer is divided into smaller blocks, to the raster thread for rasterization, rasterization is completed, synthesizer thread will get the raster thread from draw Quads map block information, according to these information, Synthesizer thread synthesizes a synthesizer frame, and then the synthesizer frame is transmitted to the browser process through IPC, and then the browser process is transmitted to GPU for rendering. <! ----> - React Render engine React Fiber is optimized with requestAnimationFrame()Copy the code

Refer to the link

Share links: mp.weixin.qq.com/s/XN9wUM-Fd…

The original address: developers.google.com/web/updates…

The full text translation: zhuanlan.zhihu.com/p/102149546

Refer to the link: www.cnblogs.com/ziyunfei/p/…