This is the third day of my participation in Gwen Challenge

I spent nearly a month to learn the Working Principle and Practice of Browser by Teacher Li Bing. In this process, there are also some knowledge points to expand, again lamenting, I need to learn things are really a lot of. Here, also carry on a simple summary, hope to you also have a little help ~

Principles of browsers

Browser processes

There are five major browsers: Internet Explorer, Firefox, Safari, Chrome and Opera.

The high-level structure of the browser

1. User interface

The fixed parts of the browser that we see visually, such as the browser’s address bar, bookmarks, refresh buttons, and so on.

2. Browser engines

Instructions passed between the user interface and the rendering engine.

3. Rendering engines

It is responsible for displaying the content requested by the browser, such as an HTML page, parses the HTML and CSS content and displays the parsed content on the screen.

4, network

This layer is mainly responsible for network calls, such as HTTP requests. However, this network request is not about individual server side requests, its interface is platform-independent, but provides the underlying implementation for all platforms.

5. JavaScript interpreter

Used to parse and execute JavaScript code.

6. User interface back end

Used to draw basic widgets, such as combo boxes and Windows. It exposes a common interface that is platform-independent, while underneath it uses the operating system’s user interface approach.

7. Data storage.

This layer is where the browser stores all kinds of data, such as cookies, on the hard disk.

Threads and processes

Threads: Threads are attached to processes and cannot exist alone. Using multi-thread parallel processing in process can improve computing efficiency.

2, 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 to hold the code, the running data, and a main thread to perform the task. We call such a running environment a process.

Chrome now has the following processes :(multi-process architecture)

Browser architecture

One browser main process: mainly responsible for interface display, user interaction, child process management, and storage.

A GPU process: mainly used to draw web UI and achieve 3DCSS effect.

A network process that is responsible for loading network resources for a page.

Multiple rendering processes: mainly responsible for page rendering. The core task is to turn HTML, CSS, and JavaScript into web pages that users can interact with. Both the typography engine Blink and the JavaScript engine V8 run in this process.

Multiple plug-in processes: mainly responsible for the running of plug-ins.

Second, page performance

First Paint (FP), a measure of web page performance, refers to the time from page loading to First drawing.

Computer network architecture

OSI layer 7 protocol

TCP/IP Layer 4 protocol

OIS seven-tier model and TCP/IP four-tier model

Iv. HTTP request process

Differences between TCP and UDP

1. Build the request

2. Find cache

3. Prepare IP addresses and ports

4. Wait for the TCP queue

5. Establish the TCP connection

6. Send HTTP requests

7. The server side processes the HTTP request

5. The process by which the browser enters the URI to the page display

The process by which a browser enters a URI into a page display

Page rendering process

Build a DOM tree

2. Style calculation

(1) Convert CSS into a structure that browsers can understand

(2) Transform the attribute system in the stylesheet to make it standardized. Such as 2EM, Blue, etc

(3) Calculate the specific style of each node in the DOM tree

3. Layout stage

After the style calculation, enter the layout phase. Layout is a recursive process. It starts with the root renderer (the element corresponding to the HTML document) and recursively traverses some or all of the framework hierarchies, computing geometric information for each renderer that needs to be computed.

(1) Create a layout tree

(2) Layout calculation

4, layering,

(1) Layer tree construction

When building the layer tree, elements with the cascading context attribute are promoted to separate layers.

Elements with cascading context attributes are generally classified into four categories: position, opacity, filter, and z-index

(2) Layer rendering

5. Rasterization

Rasterization refers to the transformation of a map block into a bitmap. GPU is usually used to speed up generation.

6, synthetic

The contents of their pages are drawn into memory, which is finally displayed on the screen

Seven, V8 working principle

Stack space and heap space

First, we need to look at JavaScript data types.

Object is a reference type value, and all other values are primitive types.

Stack space and heap space are used to store these two different types of values.

The stack space holds data values of primitive types, and the heap space holds values of reference types.

The garbage collection

We look at garbage collection in stack space and heap space.

1. Stack garbage collection

Within the stack, use ESP, a pointer to the current execution state, to point to the execution context of the current function. When a function finishes executing, the JavaScript engine destroys its execution context on the stack by moving ESP down.

2. Garbage collection in the heap

Garbage collector is used to collect garbage from the heap. There are primary garbage collectors and secondary garbage collectors.

(1) Main garbage collector

The main garbage collector collects garbage from the old generation, which holds long-lived objects.

Using the mark-sweep algorithm, you start with a set of root elements and iterate through the entire rent. The elements that arrive are live objects, and the elements that don’t arrive are junk data.

In addition, the mark-defragment algorithm is also required after the cleanup, because a large number of discrete memory fragments are generated after the cleanup. So you need to sort out the algorithm.

(2) Secondary garbage collector

The subgarbage collector is responsible for the garbage collection of the new generation, which stores objects with a short life span.

The application of the Scavenge algorithm to split Cenozoic space in half into two areas, typically the object area and the half the free area. At collection time, the tag to be collected copies the remaining surviving objects to another region.

In addition, the JavaScript engine uses an object promotion strategy, where objects that have survived two garbage collections are moved to the old area.

Page circulation system

Promise

Summary of Promises: Use Promises, say goodbye to callbacks!

Fulfill PromiseA+ compliance promises

Nine, HTTP

Difference between HTTP and HTTPS

1, HTTP / 1

Although HTTP/1 uses long connection and CDN to realize domain name sharding mechanism and improve transportation efficiency, it still has queue blocking problem.

Header blocking is the blocking caused by the loss of a single packet during TCP transmission.

2, HTTP / 2

The highlight of HTTP/2 is multiplexing, adding a binary framing layer for efficiency. In addition, the ability to set request priority, server push, and header compression all contribute to efficiency.

However, there is still the problem of queue head blocking. The TCP queue header is blocked. During TCP transmission, a piece of data is divided into multiple packets. When one of the packets does not return in order, the receiver holds the connection waiting for the packets to return, blocking subsequent requests. I think as long as the transport layer is TCP, this problem will always exist.

3, HTTP / 3

HTTP/3 uses the QUIC protocol, which implements tcp-like functionality based on UDP.

Ten, browser security

The same-origin policy

Same-origin means that the protocol, domain name, and port number of two urls are the same.

The same origin policy is represented at three levels: DOM level, data level and network level.

XSS- Cross-site scripting attacks

XSS is where pages are injected with malicious JavaScript scripts. Malicious scripts can steal cookie information, listen to user behavior, modify the DOM, and generate floating window ads within a page.

How do I prevent XSS attacks?

1. The server filters or transcodes the input script

2. Make full use of CSP

3. Use the HttpOnly attribute

CSRG attack

CSRG takes advantage of a user’s login status to do bad things on a third-party site. It automatically initiates Get requests, Post requests, and entices users to click on links.

How do you prevent CSRF attacks?

1. Take full advantage of the SameSite property of cookies

2. Verify the source of the request

3. Use the CSRF Token