目录
一,JS是单线程
1,Javascript 语言是基于对象和事件驱动的弱类型脚本语言,并且可以与 HTML 完成丰富的页面交互效果;
2,它的一大特点是单线程,意味着在同一时间只能做一件事;
3,在单线程中所有任务是按顺序执行的,前一个任务执行完毕后才进行下一个任务;
4,如果前一个任务耗时很长,后一个任务将会一直等待执行;
弊端:如果 JS 执行的时间过长,会造成页面的渲染不连贯,导致页面渲染加载阻塞。
二,同步任务和异步任务
HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,子线程完全受主线程的控制,
于是JS中出现 同步任务 和 异步任务。
同步任务:
在主线程上排队执行,形成一个执行栈,只有前一个任务执行完毕,才能执行后一个任务;
异步任务:
是进入 “任务队列” 的任务,当主线程中的任务运行完了,才会从 “任务队列” 取出异步任务放入主线程执行。
1,JS的异步是通过 回调函数 实现;
2,异步任务的类型:
普通事件 —— click、resize 等
资源加载 —— load、error 等
定时器 —— setInterval、setTimeout 等
/ / / 案例演示:
console.log(1);
document.onclick = function() {
console.log('click');
}
setTimeout(function() {
console.log(3)
}, 3000)
console.log(2);
// 执行顺序:1 -> 2 -> 3
三,宏任务 和 微任务
**宏任务**(由浏览器规定):
<script>整体代码、setTimeout、setInterval、setImmediate、Ajax、DOM事件
**微任务**(由ES6语法规定):
process.、MutationObserver、Promise.then catch finally
同步任务执行完毕后,再将异步任务放到执行队列中,在异步任务中 微任务 优于 宏任务 执行。
微任务 在DOM渲染前触发,宏任务 在DOM渲染后触发。
四,JS事件循环机制(Event Loop)
1,先执行执行栈中的同步任务,同步任务执行完毕后执行异步任务;
2,执行异步任务队列中的微任务,再执行宏任务;
3,执行完任务后进行DOM渲染页面;
4,再触发事件循环( Event Loop
)反复询问回调队列中是否有要执行的语句,有则放入调用栈中继续执行。