web前端之运行机制

桃扇骨 2023-07-21 08:54 12阅读 0赞

### 运行机制类 ###

*  如何理解JS的单线程
 *  什么是任务队列
 *  Event Loop
 *  理解哪些语句会放入到异步队列中
 *  理解语句放入到异步队列的时机\*\*\*\*

我们先来几道题了解一下体验一下运行机制

console.log(1);
    setTimeout(function(){ 
    	console.log(3);
    },0);
    console.log(2)

最后打印顺序：  
1,2,3

我们来看看这是为什么  
js是单线程的，同一时间只能做一件事，从上到下执行  
任务队列：setTimeout是个异步任务，异步任务要挂起，继续执行同步任务，同步任务完成后才去执行异步任务，所以碰到setTimeout就挂起，先输出2，才返回去执行挂起任务，输出3

console.log('A');
    while(true){ 
    
    }
    console.log('B')

输出：  
A

这是个同步任务，遇到while后一直循环空，轮不到输出B

console.log('A');
    setTimeout(function(){ 
    	console.log('B')
    },0);
    while(1){ 
    
    }

输出A

输出A以后，碰到setTimeout异步，挂起，去执行while同步任务，死循环

运行机制类

for(var i=0;i<4;i++){ 
    	setTimeout(function(){ 
    		console.log(i);
    	},1000);
    }

输出4,4，4，4

考察异步任务的放入时间和执行时间  
for循环是同步任务，几毫秒之后循环执行结束，此时i是4,1s后把setTimeout放入异步任务中，然后输出的就是4

# 如何理解JS的单线程 #

一个时间之内js只能看一件事

# 什么是任务队列 #

分为同步任务和异步任务  
（1）同步任务  
按照顺利往下执行  
（2）异步任务  
异步任务挂起，同步执行完之后再去执行异步

# Event Loop #

事件循环：浏览器的搜索引擎遇到了setTimeout，识别了这是一个异步任务，不会把它放到运行栈里面，而是把它拿走，拿走之后，也不是立马把它放到异步任务队列中，同步任务执行完后，执行异步任务队列中，读出来有需要执行的任务后就把它放到运行栈中去执行，第一个异步任务就这样执行完后，再去异步任务栈中读取下一个任务放到运行栈中，如此循环

接下来我们来看什么时候会开启异步任务：  
setTimeout和setInterval  
DOM事件：一般都是用户在界面上操作的时候遇到卡顿基本上都是因为异步  
ES6中的Promise  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]

# 理解哪些语句会放入到异步队列中 #

见上

# 理解语句放入到异步队列的时机\*\*\*\* #

见上

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]: /images/20230528/aa3e6809cdcd4d0cb39be414f96852c9.png