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

In this article, the editor introduces in detail "how to understand the single thread of JavaScript", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to understand the single thread of JavaScript" can help you solve your doubts.

1. Processes and threads

1.1 process (Process)

It is a running activity of a program in a computer about a certain data set, the basic unit of resource allocation and scheduling of the system, and the basis of the structure of the operating system. In the contemporary thread-oriented computer architecture, the process is the container of threads. A program is a description of instructions, data and its organizational form, and a process is the entity of a program. It is a running activity of a program in a computer about a certain data set, the basic unit of resource allocation and scheduling of the system, and the basis of the structure of the operating system. A program is a description of instructions, data and its organizational form, and a process is the entity of a program.

We compare the process here to the workshop of the factory, which represents a single task that CPU can handle. At any given time, CPU is always running one process and other processes are not running.

1.2 Thread (thread)

It is the smallest unit that the operating system can schedule operations. It is included in the process and is the actual operating unit of the process. A thread refers to a single order of control flow in a process, where multiple threads can be concurrent in a process, and each thread performs different tasks in parallel.

Here threads are compared to workers in a workshop, that is, a workshop can allow multiple workers to work together to complete a task.

two。 Multithreaded browser

The browser kernel is multithreaded, and threads cooperate with each other under the control of the kernel to keep synchronized. A browser usually consists of the following resident threads:

GUI rendering thread

JavaScript engine thread

Event trigger thread

Timing trigger thread

Asynchronous http request thread

We saw the JS engine thread, very familiar, no mistake, this is where we execute the javascript script.

The JS engine is multithreaded, single-threaded means that when the JS engine executes JS, only one thread is assigned to him for execution, which means that the JS engine assigns a thread to JavaScript execution, that is, what we call single-thread.

2.1 Let's talk about the implementation mechanism of JS again.

Because JavaScript is single-threaded (there is only one JS thread running the JavaScript program at any time in a Tab page).

So we need to rely on the task queue for JavaScript code execution.

The JS engine waits for the arrival of the task in the task queue and then executes the task.

Of course, it's okay for synchronous tasks to be executed in this way. we put all the tasks in the task queue and execute them one by one, and the logic is very clear. However, if we send a request to the background, it may take a second to send and receive. We can't wait for it for a second. If we request it five times, then wait five seconds? The display does not meet our needs, so we need asynchronous tasks to deal with this problem.

2.2 synchronous and asynchronous tasks

A synchronization task refers to a task that is queued on the main thread. Only when the previous task is completed can we proceed to the next task. When we open the website, the rendering process of the site, such as the rendering of elements, is actually a synchronization task.

An asynchronous task refers to a task that does not enter the main thread but enters the task queue. Only when the task queue notifies the main thread that an asynchronous task can be executed, the task will enter the main thread. When we open a website, such as the loading of pictures and music, it is actually an asynchronous task.

You must have a more concrete understanding of Event Loop. I won't go into details here. If you don't understand, you can tell me. I'll just talk about it again.

3. This article focuses on the key point-- you can look at it directly.

But do you have any questions about the task queue? Is this a date? Is it an array? According to my logic, our JavaScript main thread executes the synchronous function, the asynchronous function can be placed in the task queue, and the task queue can be an object, and when we finish executing the synchronous task, we can just press the object (task queue) into the main thread, but it's not what I thought.

The task queue of Evnet Loop is placed in the event trigger thread of the browser. When the JS engine executes the asynchronous function, the asynchronous task is placed in the event trigger thread. When the corresponding asynchronous task is triggered in accordance with the trigger conditions, the event trigger thread will add the asynchronous task to the end of the main thread in the JS engine and wait for execution.

Is it not quite the same as the JavaScript single thread we imagined? Well, it's really different, so the final conclusion is that the task queue we're talking about turns out to be a thread.

Then, going back to the timer we talked about at the beginning, you can basically guess that it is controlled by the timer thread.

Because JavaScript is single-threaded, if it is in a blocking thread state, it will affect the accuracy of timing, so it is necessary to open a separate thread for timing.

When using setTimeout or setInterval, it requires timer thread timing, and when the timing is complete, specific events are pushed into the event queue.

4. Conclusion

So, we say that JavaScript is single-threaded, even if King Laozi comes, it is also single-threaded, but our Event Loop and timer are placed in other threads.

5. V8 engine-extension

The V8 engine is an implementation of the JavaScript engine, originally designed by some language experts, then acquired by Google, and then opened up by Google.

V8 is developed using C++. Before running JavaScript, V8 compiles it into native machine code (IA-32, x86-64, ARM, or MIPS CPUs) compared to other JavaScript engines for bytecode or interpretive execution, and uses methods such as inline caching (inline caching) to improve performance.

With these features, JavaScript programs run as fast as binary programs under the V8 engine. V8 supports many operating systems, such as windows, linux, android, etc., as well as other hardware architectures, such as IA32,X64,ARM, with good portability and cross-platform features.

5.1 Workflow

The V8 engine has two main stages in the process of executing JavaScript: compilation and running. Different from the complete compilation of C++ before execution, JavaScript needs to be compiled and executed when users use it. In V8, JavaScript-related code is not compiled at once, but only when some code needs to be executed, which improves response time and reduces time overhead. In the V8 engine, the source code is first transformed into an abstract grammar tree (AST) by the parser, and then the local executable code is generated directly from the AST using the full code generator of the JIT compiler. This process is different from Mr. JAVA's bytecode or intermediate representation, which reduces the conversion time from AST to bytecode and improves the execution speed of the code. However, the lack of the intermediate process of conversion to bytecode reduces the opportunity to optimize the code.

The main classes used by the V8 engine to compile native code are as follows:

Script: represents the JavaScript code, which contains both the source code and the local code generated after compilation, which is both the compilation entry and the run entry

Compiler: compiler class, auxiliary set of Script classes to compile and generate code, call interpreter (Parser) to generate AST and full code generator, and turn AST into native code

AstNode: abstract syntax tree node class, which is the base class of all other nodes and contains a large number of subclasses. Different native code will be generated for different subclasses later.

AstVisitor: the visitor class of the abstract syntax tree, mainly used to traverse heterogeneous abstract syntax trees

A subclass of the FullCodeGenerator:AstVisitor class that generates native executable code for JavaScript by traversing the AST.

The process of compiling JavaScript code is roughly as follows: the Script class calls the Compile function of the Compiler class to generate native code for it. The Compile function first uses the Parser class to generate AST, and then uses the FullCodeGenerator class to generate native code. Native code is closely related to the specific hardware platform, and FullCodeGenerator uses multiple backends to generate native assembly code that matches the platform. Because FullCodeGenerator traverses the AST to generate the corresponding assembly code for each node, the global view is missing, so the optimization between nodes is impossible.

After reading this, the article "how to understand the single thread of JavaScript" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow 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.