Shulou(Shulou.com)06/02 Report--

Xiaobian to share with you JavaScript execution mechanism example analysis, I believe most people do not know how, so share this article for everyone's reference, I hope you read this article after a great harvest, let's go to understand it!

process and thread

We all know that the core of the computer is the CPU, which undertakes all computing tasks; the operating system is the manager of the computer, which is responsible for the scheduling of tasks, the allocation and management of resources, and the entire computer hardware; the application program is a program with a certain function, and the program is running on the operating system.

process

A process is a process of dynamic execution of a program with independent functions on a data set. It is an independent unit for resource allocation and scheduling by the operating system. It is the carrier of application program operation. A process is the smallest unit that can own resources and run independently. It is also the smallest unit for program execution.

Process characteristics:

Dynamic: Process is an execution process of the program, temporary, has a lifetime, is dynamic generation, dynamic extinction;

Concurrency: Any process can execute concurrently with other processes.

Independence: A process is an independent unit of the system for resource allocation and scheduling;

Structural: Process consists of program, data and process control block.

thread

Thread is a single sequence control flow in program execution, the smallest unit of program execution flow, and the basic unit of processor scheduling and dispatching. A process can have one or more threads that share the program's memory space (i.e., the memory space of the process). A standard thread consists of a thread ID, current instruction pointer (PC), registers, and stack. A process consists of memory space (code, data, process space, open files) and one or more threads.

Difference between process and thread

A thread is the smallest unit of program execution, while a process is the smallest unit of operating system resource allocation.

A process consists of one or more threads, threads are different execution paths of code in a process;

The processes are independent of each other, but the threads under the same process share the memory space of the program (including code segments, data sets, heaps, etc.) and some process-level resources (such as open files and signals), and the processes are invisible to each other.

Scheduling and switching: Thread context switching is much faster than process context switching.

Why is JS single-threaded?

JavaScript has been a scripting language for browsers since its inception, mainly for handling user interaction and manipulating the DOM, which determines that it can only be single-threaded, otherwise it will bring very complex synchronization problems.

For example, if JS is multithreaded, one thread wants to modify a DOM element, and another thread wants to delete it, then the browser doesn't know who to listen to. So to avoid complexity, JavaScript has been designed to be single-threaded since its inception.

To take advantage of the computing power of multicore CPUs, HTML5 introduced the Web Worker standard, which allows JavaScript scripts to create multiple threads, but child threads are completely controlled by the main thread and must not manipulate the DOM. So, this new standard doesn't change the single-threaded nature of JavaScript.

Browser Principle

As front-end engineers, browsers must be familiar, and browsers are multi-process.

Browser components

User interface: includes address bar, forward/backward/refresh/bookmark

Browser Engine: Transfers instructions between user interface and rendering engine

Rendering engine: used to render requested content

Network: Used to complete network calls, such as http requests, which have platform-independent interfaces and can work on different platforms

JavaScript interpreter: used to parse and execute JavaScript code

User interface backend: Used to draw basic widgets such as combo boxes and windows, the bottom layer uses the operating system's user interface

Data storage: belongs to the persistent layer, the browser stores various data like cookies in the hard disk, HTML5 defines the web database technology, which is a lightweight and complete client storage technology.

Note: Unlike most browsers, Google Chrome has a rendering engine instance for each tab. Each tab is a separate process

What processes does the browser contain?

browser process

The browser's main process (responsible for coordination, control), which has only one process

Responsible for browser interface display and user interaction. forward, backward, etc.

Responsible for managing pages, creating and destroying other processes

Draw the Bitmap in memory obtained by the Renderer process onto the user interface

Network resources management, download, etc.

Third-party plug-in processes

Responsible for managing third-party plugins

GPU process

Responsible for 3D rendering and hardware acceleration (max. one)

rendering process

Responsible for page document parsing, execution and rendering

Which threads are included in the rendering process

GUI rendering thread

Mainly responsible for parsing HTML, CSS, building DOM tree

The above is all the content of this article "Example Analysis of JavaScript Execution Mechanism", thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.