This is the 16th day of my participation in Gwen Challenge

JavaScript basics include: JS variable, type, type conversion, operators, expressions, direct, statement, function, function, function parameters, the constructor, the object is created, the object literal, reference types, arrays, array sorting, stack, queue, string manipulation, type of packaging Math object, the global object, basically all above is the basic knowledge of JS, There is no self-study in this article, this re-study is mainly about the advanced content of JS.

1. Thread, process

(1) a process is a program, such as: use the browser to open a web page, is to open a process, open five pages, is five processes. Opening QQ is also a process

(2) In the operation of a process, there can be many threads cooperating with each other. For example, open the wechat process, which includes receiving message threads, file transmission threads, and so on

It also takes a lot of threads to open a web page that works interactively:

JS engine thread, GUI rendering thread event polling processing thread timer triggers thread asynchronous request thread browser event threadCopy the code

Note 1: The JS engine thread, called the main thread, is the thread that runs the JS code.

Note 2: When the main thread runs JS code, it generates an execution stack

Stack memory, heap memory

(1) Stack memory: storage of simple types of variable names, variable values, as well as the heap address of introduced types

(2) Heap memory: storage of introduced types, complex types, can be understood as storage: JS objects and arrays, functions

(3) Value types and reference types are copied and passed

Assignment of a reference type: copies the memory address on the heap of the reference type

Arguments: If the type is simple, an array copy of the value type is made and passed inside the function

If it is an imported type, the address value of the imported type is copied to the parameter of the passed function

(4) Parameters of the function

Arguments are matched from left to right. If the number of arguments is less than the number of parameters, the following arguments should be copied undefineds. If the number of arguments is more than the number of parameters, you can access arguments. Argument.length (); argument.length (); argument.length ()Copy the code

3. Event loop mechanism

Knowledge preheating:

1. JS is single-threaded and can only do one thing at a time

Consider a question: Why is JavaScript single threaded?

JavaScript is single-threaded, depending on what it's used for. JS is used to realize user interaction and mainly operates on DOM, which determines that it can only be a single thread, otherwise it will bring a lot of complicated synchronization problems. Assume that JavaScript has two threads at the same time, one thread adds content to a DOM node, and the other thread deletes the node, which thread should the browser take as the standard? Therefore, JS must be a single thread. In order to make use of the computing power of multi-core CPU, HTML5 proposes the Web Worker standard, which allows JavaScript scripts to create multiple threads, but the sub-threads are completely controlled by the main thread and cannot operate DOM. So, this new standard doesn't change the single-threaded nature of JavaScriptCopy the code

2. What is a task queue?

Data structure of queues: first in, first out

Array.prototype.push() inserts elements from the end of the Array array.prototype.shift () pops an element from the head of the Array. In addition to the main thread, there is also a task queue, which stores something, and when the asynchronous task has a result, an event is placed in the task queue.Copy the code

4. What is a synchronization task?

Tasks queued for execution on the main thread can be executed only after the previous task is completed. All synchronization tasks are executed on the main thread, forming a stack of execution. Once all synchronization tasks in the execution stack are completed, the system reads the task queue and puts the events in the task queue into the execution stack to start executionCopy the code

5. What are asynchronous tasks?

Tasks that do not enter the main thread but enter the task queue will be executed in the main thread only if the task queue informs the main thread that an asynchronous task is ready to execute.Copy the code

Note: Whenever the main thread is empty, events in the task queue are read. The process of reading events from the main cluster task queue is continuous, so it is also called: event loop

6. What is a macro task?

The code executed by each stack is a macro task. Each callback event fetched from the task queue is placed on the execution stack, which is also a macro taskCopy the code
  • Macro tasks include: Script overall code, setTimeout, setInterval, postMessage, setImmediate, AND UI rendering

I/O

7. What are microtasks?

Microtasks are tasks that need to be executed immediately after the current macro task is executedCopy the code
  • Microtasks include: promisse.then (), process.nexttick ()

Note: the microtask is a follower, following the current macro task,

8. The execution sequence of macro and micro tasks?

Execution order: first execute the main thread – > microtasks created on the main thread – > macro tasks created on the main thread – > microtasks followed by macro tasks created on the main thread

<script>
    setTimeout(function() {
        console.log('setTimeout');
    })
    new Promise(function(resolve) {
        console.log('promise');
    }).then(function() {
        console.log('then');
    })
    console.log('console');
</script>
Copy the code

Summary: Order of execution

1, the entire code in

When setTimeout is encountered, its callback function is registered in the Event Table and then distributed to the macro task Event Queue

3, next encounter new Promise, Promise, immediately execute;

4. Then after promise is a microtask, and then functions are distributed to the microtask Event Queue.

5. If console.log is encountered, execute it immediately. Output: the console

6, the whole code completes as the first macro task, goes to the microtask queue to see which microtasks exist, finds the then function, and pushes it to the main thread and executes it. Output: then

7. The first event loop ends

8. Start the second event loop.

9. Start from macro tasks, check the macro tasks in the macro task event queue, find the callback function corresponding to setTimeout in the macro task event queue, and execute it immediately

9, at this time, there is no event in the macro task event queue, and then check whether there is an event in the micro task event queue. At this point, the second event cycle ends; Output: setTimeout

4. Events and callback functions

A task queue is a first-in, first-out data structure. It is an event queue, also known as a message queue. The first event in the queue is read by the main thread first

The common callback functions are: DOM event callback, timer callback, Ajax request callback, and lifecycle callback

Callbacks are those events that are suspended by the main thread. Asynchronous tasks must specify a callback function, which is executed when the main thread starts executing the asynchronous task.

2, IIFE (execute function immediately)

Hide the implementation without contaminating the external namespace, which is used to encode JS modules

; (function() {console.log(11)})()Copy the code

5,

JS execution from above, the first to enter the task queue macro task start, usually the overall code, the overall macro code is the first task, macro task queue event after all has been completed, check whether there is micro task queue, have the execution, until no events, one end of the event loop, and then apply colours to a drawing update the DOM, start the second cycle of events.