先来明白些概念性内容。
进程、线程
进程是系统分配的独立资源，是 cpu 资源分配的基本单位，进程是由一个或者多个线程组成的。
线程是进程的执行流，是cpu调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。
浏览器内核
浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核（浏览器渲染进程）属于浏览器多进程中的一种。
浏览器内核有多种线程在工作。
gui 渲染线程:
js 引擎线程:
事件触发线程:
当事件符合触发条件被触发时，该线程会把对应的事件回调函数添加到任务队列的队尾，等待 js 引擎处理。
定时器触发线程:
http 请求线程:
javascript 引擎是单线程
javascript 引擎是单线程，也就是说每次只能执行一项任务，其他任务都得按照顺序排队等待被执行，只有当前的任务执行完成之后才会往下执行下一个任务。
html5 中提出了 web-worker api，主要是为了解决页面阻塞问题，但是并没有改变 javascript 是单线程的本质。了解 web-worker。
javascript 事件循环机制
javascript 事件循环机制分为浏览器和 node 事件循环机制，两者的实现技术不一样，浏览器 event loop 是 html 中定义的规范，node event loop 是由 libuv 库实现。这里主要讲的是浏览器部分。
javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。
js 调用栈
js 调用栈是一种后进先出的数据结构。当函数被调用时，会被添加到栈中的顶部，执行完成之后就从栈顶部移出该函数，直到栈内被清空。
同步任务、异步任务
javascript 单线程中的任务分为同步任务和异步任务。同步任务会在调用栈中按照顺序排队等待主线程执行，异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候，也就是栈内被清空的时候，被读取到栈中等待主线程执行。任务队列是先进先出的数据结构。
event loop
调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环。
定时器
定时器会开启一条定时器触发线程来触发计时，定时器会在等待了指定的时间后将事件放入到任务队列中等待读取到主线程执行。
定时器指定的延时毫秒数其实并不准确，因为定时器只是在到了指定的时间时将事件放入到任务队列中，必须要等到同步的任务和现有的任务队列中的事件全部执行完成之后，才会去读取定时器的事件到主线程执行，中间可能会存在耗时比较久的任务，那么就不可能保证在指定的时间执行。
宏任务(macro-task)、微任务(micro-task)
除了广义的同步任务和异步任务，javascript 单线程中的任务可以细分为宏任务和微任务。
macro-task包括：script(整体代码), settimeout, setinterval, setimmediate, i/o, ui rendering。
micro-task包括：process.nexttick, promises, object.observe, mutationobserver。
我要评论
console.log(1);
settimeout(function() {
console.log(2);
})
var promise = new promise(function(resolve, reject) {
console.log(3);
resolve();
})
promise.then(function() {
console.log(4);
})
console.log(5);
示例中，settimeout 和 promise被称为任务源，来自不同的任务源注册的回调函数会被放入到不同的任务队列中。
有了宏任务和微任务的概念后，那 js 的执行顺序是怎样的？是宏任务先还是微任务先？
第一次事件循环中，javascript 引擎会把整个 script 代码当成一个宏任务执行，执行完成之后，再检测本次循环中是否寻在微任务，存在的话就依次从微任务的任务队列中读取执行完所有的微任务，再读取宏任务的任务队列中的任务执行，再执行所有的微任务，如此循环。js 的执行顺序就是每次事件循环中的宏任务-微任务。
以上所述是小编给大家介绍的js浏览器事件循环机制详解整合，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论