厦门建站方案,网站运营名词解释,免费建设商城网站,如何做阿里巴巴免费网站何为同步、异步#xff1f;
同步任务#xff08;synchronous#xff09;
同步任务指的是#xff0c;在主线程上排队执行的任务#xff0c;只有前一个任务执行完毕#xff0c;才能执行后一个任务#xff1b;同步任务进栈顺序#xff1a;先进后出#xff0c;后进先出
同步任务synchronous
同步任务指的是在主线程上排队执行的任务只有前一个任务执行完毕才能执行后一个任务同步任务进栈顺序先进后出后进先出栈只有一端开口同步会阻塞程序的执行 同步任务页面的初始化、DOM 操作、计算任务
大白话同步就是我强依赖于你(对方)我必须等到你的回复才能去做下一步的事情。
异步任务asynchronous
不进入主线程而进入任务队列的任务只有等主线程任务执行完毕任务队列开始通知主线程请求执行任务该任务才会进入主线程执行。异步任务进任务队列顺序先进先出后进后出(队列有两端开口)异步不会阻塞程序的执行 异步任务 网络请求、定时器、事件处理、异步函数
大白话异步就是我并不强依赖于你我对你是否回不回复我的信息并不在意无论你回不回复我我都会继续去做我的事情。
一、JavaScript是一门单线程语言
总所周知JavaScript是一门单线程语言。单线程是指JavaScript引擎执行JavaScript时只分了一个线程给它执行所以说执行JavaScript时是单线程的。
二、何为进程何为线程
进程
进程是指在计算机系统中正在执行的一个程序实例。一个程序可以创建一个或多个进程例如打开一个浏览器在浏览器上打开多个网页每个进程都有自己的内存空间、执行状态和资源使用情况。进程是操作系统对程序的一次动态执行过程的抽象。 多进程示例
浏览器是多进程不同类型的标签页都会开启一个新的进程相同类型的标签页是会合并到一个进程
线程
线程是CPU调度的最小单位是建立在进程的基础上运行的单位共享进程的内存空间。CPU是电脑的大脑可以同时打开多个程序也可以抽象地理解为软件例如QQ、微信一个线程分配给QQ一个给微信
三、单线程意味着什么
JavaScript 同时只能执行一个任务其他任务都必须在后面排队等待。也就是说代码只能同步执行必须执行上一行才能执行下一行。然而并不是还有异步
四、微任务与宏任务 微任务microtask
微任务会在当前任务执行完成后立即执行在浏览器渲染之前执行。微任务具有较高的优先级在每个事件循环中会在宏任务执行之前执行。 微任务Promise async/await 、Object.observe MutationObserver、 process.nextTick(Node.js 环境)。
宏任务macrotask
宏任务会在事件循环中执行一般来自外部的事件如定时器事件、UI交互事件和网络请求事件等。 宏任务setTimeout、setInterval、Ajax、DOM事件 、script(整体代码) 、I/O、UI交互事件、setImmediate(Node.js 环境)。
总结
[ 宏任务、微任务 ]是指JavaScript中异步任务的两种不同任务的分类宏任务类似于整体的异步任务微任务则是宏任务中的一个子任务。
宏任务表示需要异步执行的任务微任务表示宏任务执行后需要立即执行的子任务 如下图所示微任务优先级 宏任务优先级 五、事件循环Event Loop又被称为事件轮询 JavaScript的异步编程通过执行栈和消息队列来实现。首先所有的同步任务都是在主线程上执行的它会形成一个执行栈异步任务不会在主线程上执行当异步任务得到响应如某个点击事件、服务加载完成、setTimeout等待时间截止就会被推入消息队列中。当执行栈里面的任务执行完的时候栈空JS引擎就会去消息队列中读取任务它会把这个任务中的回调函数压入执行栈中然后执行栈就又开始新的同步任务执行。 这种执行栈空就去消息队列读取任务的过程时不断循环的每次栈空都会去消息队列读取任务如果没有任务就一直等待知道有新的任务出现这叫做事件循环event Loop。
六、练习题
// 第一题
console.log(开始);setTimeout(function() {console.log(定时器回调函数);
}, 0);console.log(结束);// 第二题
console.log(开始);setTimeout(function() {console.log(定时器回调函数);
}, 0);Promise.resolve().then(function() {console.log(微任务);
});console.log(结束);// 第三题
console.log(开始);setTimeout(function() {console.log(定时器回调函数);
}, 0);Promise.resolve().then(function() {console.log(微任务1);
}).then(function() {console.log(微任务2);
});console.log(结束);// 第四题
console.log(开始);setTimeout(function() {console.log(定时器回调函数);
}, 0);Promise.resolve().then(function() {console.log(微任务1);Promise.resolve().then(function() {console.log(微任务2);});
});console.log(结束);// 第五题
console.log(开始);setTimeout(function() {console.log(定时器回调函数1);Promise.resolve().then(function() {console.log(嵌套微任务1);});
}, 0);setTimeout(function() {console.log(定时器回调函数2);
}, 0);Promise.resolve().then(function() {console.log(微任务);
});console.log(结束);// 第六题
console.log(script start);setTimeout(function() {console.log(setTimeout);
}, 0);Promise.resolve().then(function() {console.log(promise1);
}).then(function() {console.log(promise2);
});console.log(script end);// 第七题
console.log(script start);setTimeout(function() {console.log(setTimeout1);
}, 0);Promise.resolve().then(function() {console.log(promise1);
}).then(function() {console.log(promise2);
});setTimeout(function() {console.log(setTimeout2);
}, 0);console.log(script end);// 第八题
async function async1() {console.log(async1 start);await async2();console.log(async1 end);
}async function async2() {console.log(async2);
}console.log(script start);setTimeout(function() {console.log(setTimeout);
}, 0);async1();new Promise(function(resolve) {console.log(promise1);resolve();
}).then(function() {console.log(promise2);
});console.log(script end);