Front-end JavaScript operation principle

1. What is a JavaScript engine?

JavaScript engine is a computer program whose main function is to compile source code into machine code when JavaScript is running.

Each major web browser has its own JavaScript engine, which is usually developed by the web browser vendor.

• Google Chrome V8。

• Mozilla Firefox Spider Monkey。

• Safari Javascript Core Webkit。

• Edge (Internet Explorer)

Previous JavaScript engines were mainly used in web browsers, but with the emergence of nodejs , this limitation was broken.

2. V8 engine

V8 includes parser , an interpreter ( Ignition ), and an optimizing compiler ( TurboFan ).

Parser: used to generate an abstract syntax tree.

Interpreter (Ignition): Converts source code into bytecode.

Optimizing compiler ( TurboFan ): performs some optimizing compilation optimizations, such as inline caching.

The following is the general workflow of the V8 engine.

• First, the parser generates an abstract syntax tree.
• The interpreter then generates V8 format bytecode based on the syntax tree.
• The optimizing compiler then compiles the bytecode into machine code.

3. Runtime Environment

In the browser running environment, the browser provides Web API , such as HTTP requests, timers, events, etc.

In the server running environment, nodejs provides an API.

Below is the architecture of JavaScript when it is running in a browser. It includes a memory heap, a memory stack, an event loop, and a callback queue.

stack
heap
call stack
callback queue
event loop

4. Runtime call stack

The following code shows the call stack changes of JavaScript execution.

function add(x, y) {
    return x + y;
}

function print(x, y) {
    console.log('x+y=',add(x, y))
}

print(1, 3)

5. Asynchronous tasks

JavaScript first executes the print function and then calls Web API setTimeout() . Web API stores the callback function of setTimeout() and adds the callback function to the callback queue after 3 seconds. The event loop finds that the call stack is empty, so it moves the callback function in the queue to the call stack for execution.

function add(x, y) {
    return x + y;
}

function print(x, y) {
    setTimeout(function (){
        console.log('x+y=',add(x, y))
    }, 3000)
}

print(1, 3)

6. Summary

JavaScript runs mainly on the JavaScript engine and runtime environment. The engine translates the js source code into machine code understood by the computer, and the runtime environment provides some APIs and runtime implementations for communicating with the underlying computer.

This is the end of this article about the operating principles of front-end JavaScript. For more relevant content on the operating principles of JavaScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!