web前端 之运行机制

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

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

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

见上

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

见上