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

This article introduces the relevant knowledge of "what is the operation principle of the front-end JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Catalogue

1. What is the JavaScript engine

2. V8 engine

3. Runtime environment

4. Call stack at run time

5. Asynchronous tasks

6. Summary

1. What is the JavaScript engine

The JavaScript engine is a computer program whose main function is to compile the source code into machine code at JavaScript runtime.

Every major Web browser has its own JavaScript engine, which is usually developed by web browser vendors.

Google Chrome V8 .

Mozilla Firefox Spider Monkey .

Safari Javascript Core Webkit .

Edge (Internet Explorer)

The previous JavaScript engine was mainly used in web browsers, but this limitation has been broken with the advent of nodejs.

2. V8 engine

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

Parser (parser): used to generate abstract syntax trees.

Interpreter (Ignition): converts source code to bytecode.

Optimization compiler (TurboFan): perform some optimization compilation optimizations, such as inline caching.

The following is the general workflow of the V8 engine.

First, the parser becomes an abstract syntax tree.

Then the interpreter generates bytecode in V8 format according to the syntax tree.

The optimization compiler then compiles the bytecode into machine code.

3. Runtime environment

In the browser running environment, the browser provides Web API, such as: HTTP request, timer, event and so on.

In the server running environment, nodejs provides API.

The following is the architecture when JavaScript runs in the browser, which contains a memory heap, a memory stack, an event loop, and a callback queue.

Stackheapcall stackcallback queueevent loop4, runtime call stack

The following code shows the call stack change performed by JavaScript.

Function add (x, y) {return x tasks;} function print (x, y) {console.log ('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 (). After 3 seconds, the callback function is added to the callback queue. The event loop finds that the call stack is empty, so the callback function in the queue is moved to the call stack for execution.

Function add (x, y) {return (x, y) {setTimeout (function () {console.log ('x, y))} print (1,3) 6, summary

The operation of JavaScript mainly depends on the JavaScript engine and the running environment. The engine translates the js source code into the machine code understood by the computer. The running environment provides some API and running implementations for communicating with the underlying computer.

This is the end of the content of "how the front-end JavaScript works". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.