一个浏览器通常由以下几个常驻的线程：

渲染引擎线程，负责页面的渲染
js引擎线程，负责js的解析和执行
定时触发器线程，处理setInterval和setTimeout
事件触发线程,处理DOM事件
异步http请求线程，处理http请求

要注意的是渲染引擎和js引擎线程是不能同时进行的。渲染线程在执行任务的时候，js引擎线程会被挂起。因为若是在渲染页面的时候，js处理了DOM，浏览器就不知道该听谁的了。

消息队列与事件循环

由上面浏览器一篇的介绍可以知道，浏览器中多个线程的合作完成了异步的操作，那么异步的回调函数又是怎样完成执行的呢？

图片.png

这就需要了解消息队列和事件循环了。

如上图所示，左边的栈stack存储的是同步任务，就是那些能立即执行、不耗时的任务，如变量和函数的初始化、事件的绑定等等那些不需要回调函数的操作都可归为这一类。
右边的堆heap用来存储声明的变量、对象。下面的队列queue就是消息队列，一旦某个异步任务有了响应就会被推入队列中。如用户的点击事件、浏览器收到服务的响应和setTimeout中待执行的事件，每个异步任务都和回调函数相关联。

JS引擎线程用来执行栈中的同步任务，当所有同步任务执行完毕后，栈被清空，然后读取消息队列中的一个待处理任务，并把相关回调函数压入栈中，单线程开始执行新的同步任务。

JS引擎线程从消息队列中读取任务是不断循环的，每次栈被清空后，都会在消息队列中读取新的任务，如果没有新的任务，就会等待，直到有新的任务，这就叫事件循环（Event Loop）。

图片.png

上图以AJAX异步请求为例，发起异步任务后，由AJAX线程执行耗时的异步操作，而JS引擎线程继续执行堆中的其他同步任务，直到堆中的所有异步任务执行完毕。然后，从消息队列中依次按照顺序取出消息作为一个同步任务在JS引擎线程中执行，那么AJAX的回调函数就会在某一时刻被调用执行。