JS thread mechanism and event mechanism

JS thread mechanism and event mechanism

1. processes and threads

. (1) Definition:

• Process: first execution of the program, it occupies a unique memory space

• The basic unit of scheduling the CPU, is a complete process of program execution

Related processes and threads (2).

• A process generally have at least one thread running: the main thread

• A process can run multiple threads

• Data within a process can be shared by multiple threads for which the

• Data between multiple threads is not directly shared

(3) The browser is basically a multi-process

2. The browser kernel

. (1) Definition: Support the core browser running program

(2) Different different browsers running kernel

• Chrome,Safari：webkit

• firefox：Gecko

• IE：Trident

• 360 and other domestic browser: Trident + webkit

(3) the core module consisting of:

• Responsible for parsing the page text: html, css document parsing module

• dom / css module: responsible for dom / css in memory-related processing

• Drawing layout and an effect responsible for the page: layout and rendering module

• Timer module: timer management is responsible for

• Network request module: responsible for server requests (Ajax)

• Incident Response Module: Management is responsible for the event

3. Timer

(1) Category:

• Cycle Timer: no execution has been closed

• Delay timer: after a certain period of time are performed only once

(2) Cycle Timer: setInterval

. 1      var I = 0 ;
 2      // get a handle to the timer 
. 3      var the intervalId = the setInterval ( function () {
 . 4        IF (I> =. 5 ) {
 . 5          // clear the timer 
. 6          the clearInterval (the intervalId);
 . 7        }
 . 8        the console.log (Date.now ());
 . 9        I ++ ;
 10      }, 1000);

(3) delay timer:

1     setTimeout(function(){
2       console.log("----");
3     },2000);

4.JS is a single process

(1) Proof:

• Use setTimeout () callback function to run in the main thread

• Timer callback function only after the code at runtime stack executed completely possible execution

(2) Why js To use single-threaded mode:

　　As a scripting language is the main purpose of the browser and user interaction, as well as operating DOM, a single thread can avoid complex synchronization problems

(3) Category Code:

• Initialization code

• Callback code

The basic flow (4) JS code execution engine

1. First execute initialization code: include some special code:

   • Setting the timer

   • Binding monitor

   • Ajax requests

2. Execute callback code at a time

The event loop model

Implementation process:

1. Load synchronization task execution

Initialization code: Bind monitor, set the timer, send ajax request

2. asynchronous tasks to time management module

3. asynchronous task management module monitor meets the conditions, if the condition of the corresponding task will be placed in the callback queue

4. The main thread synchronization tasks performed after the completion of inquiry callback queue through the event loop (event polling mechanism)

• Executable callback function, the callback function will be placed in the main thread of execution

• If you will not be asked again