The following content is a review record of personal study, mainly excerpts from some network materials. As well as some of their own summary, there may be some mistakes, if found, welcome to correct!!

The learning content mainly comes to: github.com/stephentian…

The basic concept

Single threading of JavaScript

  • The main use of JS is as a browser scripting language, and its main function is to interact with users and operate DOM. Single thread can make this process easier, while multi-thread will bring many complex problems
  • The Web Worker standard is proposed in HTML5, which allows JS to create multiple threads. However, the child threads are controlled by the main thread and cannot operate DOM, so they are still single threads in nature

JavaScript message queues

1. Pre-knowledge

Visual representation of js runtime

  • From the above figure, we can see that there are three main memory Spaces when JS executes code: execution stack, message queue and heap
  • Different structures have different uses
    • Execution stack: Performs synchronization tasks
    • Message queue: Save message queues to be executed (asynchronous tasks)
    • Heap: Stores objects

2. Why are there message queues

  • Single threading causes code to execute where everyone is queued, and only after the task at the front of the queue is finished can subsequent tasks be executed. If the first task takes a long time, the next task will wait a long time to execute
  • When I/O events (user input, network request, etc.) are encountered, the CPU is idle while waiting for THE I/O time. If there is no message queuing mechanism, the CPU’s operating efficiency will be a great loss

3. Message queue introduction

  • To solve the above problems, different tasks are divided into synchronous tasks and asynchronous tasks
  • Synchronization task: A task that is queued to be executed on the main thread can be executed only after the previous task is executed
  • Asynchronous task: it does not enter the main thread but enters the task queue. A task in the task queue will enter the main thread only after the task queue notifies the main thread (the triggered event message will be queued to the message queue) that a task in the task queue can be executed.
  • When the main thread is empty, that is, when all the tasks to be executed on the execution stack have been removed from the stack, it checks if there are any messages in the message queue, and pushes the corresponding tasks to the execution stack for execution.

Event Loop

  • The main thread reads events from the message queue in a loop until the queue and stack are empty

Iv. Timer

  • Message queue can also put time, timer function mainly hassetTimeout()andsetInterval(), includingsetTimeout()Set the specified time to execute the corresponding action,setInterval()Perform corresponding actions at specified intervals
  • H5 standardsetTimeoutThe second parameter (delay time) must not be less than 4ms, if it is less than it is automatically increased. If it’s a DOM change, it’s usually not done immediately, but every 16ms
  • The time set by the timer is not always executed on time because of the event loop mechanism, the main thread must wait until the code in the execution stack completes before executing the task in the message queue.

Macro and micro tasks

1. Macrotask

  • Called a task, the code executed by each stack is a macro task (including each callback fetched from the message queue)
  • The execution of the macro task is completed from beginning to end and nothing else is done
  • Before one task ends and the next begins, the browser rerenders the page
  • The main contents are as follows
    • The main block of code
    • setTimeout
    • setInterval
    • setImmediate
    • A callback function for some event
    • .

2. Microtaks

  • A task is executed immediately after the task is executed
  • Since the task is executed immediately after the completion of the task, it is faster than setTimeout, because setTimeout is the next task to be placed in the message queue, while microtasks are executed directly after the completion of the current task
  • To sum up, after the completion of a task and before rendering, all the microtasks created by the previous task will be executed
  • The main contents are
    • Promise
    • process.nextTick
  • supplement
    • Process. nextTick adds a task to the end of the current execution stack
    • SetImmediate adds an event to the end of the current message queue
    • In Node.js, process.nextTick comes before Promise