• Author: Chen Da Yu Tou
  • Making: KRISACHAN
  • Link: github.com/YvetteLau/S…
  • Background: Recently senior front end engineer Liu Xiaoxi opened a front end related topic on Github every weekday repO, with the mentality of learning I also participate in it, the following is my answer, if there is any wrong place, very welcome to point out.

Threads and processes

I believe that we often hear a word, that is, “JS is single thread”, but what is a thread, what is a single thread, there is multithreading?

define

When it comes to threads, you must also talk about processes. In essence, both terms are descriptions of CPU time slices.

Processes refer to the amount of time it takes the CPU to run instructions and load and save context. In applications, processes refer to programs that are already running in the computer.

A thread is the smallest unit of operation that an operating system can perform. It is included in a process and describes how long it takes to execute an instruction.

  • Single-threaded: Execute code line by line, from beginning to end, in the order the code is written. If one line of code fails, the rest of the code will not execute. Easy to block code.
  • Multithreading: different code running environment, each thread independent, do not affect each other, to avoid blocking.

Threads in the browser

Threads in browsers fall into the following categories:

  • JS thread
  • The UI thread
  • The event thread
  • Timer thread
  • HTTP threads

Execution stack

Execution stack can be understood as the stack used to store function calls, following the principle of first in, last out.

Event loop

The node end

The Node Event Loop is divided into six stages, which are repeated in sequence. Each time a phase is entered, the function is fetched from the corresponding callback queue and executed. The next phase occurs when the queue is empty or the number of callback functions executed reaches a threshold set by the system.

Event Loop has 6 stages:

  1. timers
  2. I/O callbacks
  3. idle, prepare
  4. poll
  5. check
  6. close callbacks

The browser

On the browser side, like on the Node side, when we execute JS code, we are actually adding functions to the execution stack. When asynchronous code is encountered, it is suspended and queued to Task (of various kinds) when it needs to be executed. Once the execution stack is empty, the Event Loop takes the code that needs to be executed from the Task queue and places it in the execution stack.

  • Micro tasks (microtask)
    • process.nextTick
    • promise
    • Object. Observe (it was a proposal, but it has now been repealed)
    • MutationOberver
  • Macro task (macrotask)
    • script
    • setTimeout
    • setInterval
    • setImmediate
    • I/O
    • The UI rendering

The execution sequence is as follows:

  1. Execute synchronized code, which is a macro task
  2. If the execution stack is empty, check whether there are microtasks to be executed
  3. Render the UI as necessary
  4. Proceed to the next EventLoop to execute the asynchronous code in the macro task

SetTimeout error

Timers belong to macrotasks. If the current stack execution time is longer than the timer time, then the timer callback is in the macroTask and there is no time to call, so this time will be error.

Let’s look at the following code:

setTimeout(function () {
	console.log('biubiu');
}, 1000); A function that takes a long time to execute ();Copy the code

If the function below the timer takes 5 seconds to execute, then the log in the timer will be executed 5 seconds later. The function occupies the current execution stack, and then reads the microtask after the execution stack is completed. This is when the setTimeout callback in the MacroTask is executed. SetInterval does the same thing, for example, putting macro tasks every 3 seconds until the execution stack completes.

Another case is as follows:

setTimeout(function() {
    setTimeout(function() {
        setTimeout(function() {
            setTimeout(function() {
                setTimeout(function() {
                    setTimeout(function() {
                        console.log('嘤嘤嘤');
                    }, 0);
                }, 0);
            }, 0);
        }, 0);
    }, 0);
}, 0);
Copy the code

The latest specification says this: If nesting level is greater than 5, and timeout is less than 4, then increase timeout to 4.

If timeout is nested at more than 5 levels and the interval is less than 4ms, the interval increases to 4ms.

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. You can also scan your wechat account to subscribe to more exciting content.