正文
- 区分进程和线程
一、一个进程由一个或多个线程组成
二、浏览器(多进程)包含四个进程
1、Browser进程:(唯一)浏览器的主进程(负责协调、主控),负责浏览器界面显示,与用户交互,负责各个页面的管理,创建和销毁其他进程等等
2、第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建
3、GPU进程:最多一个,用于3D绘制等
4、浏览器内核(重点),浏览器的渲染进程是多线程的,下面简单列举一些常用的线程,这里不做详解
需要注意的一点是,GUI渲染线程与JS引擎线程是互斥的,只有JS引擎空闲时才会执行GUI!
(1)GUI渲染线程
负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。
(2)JS引擎线程
理所当然是解析Javascript脚本,运行顺序按照代码执行顺序来执行。
(3)事件触发线程 (重点)
到到这里很多朋友可能就比较熟悉了,先来简单看下几个概念(想要详细了解的可以自行百度):事件循环(EventLoop)
宏任务(macrotask):script、setTimeOut、setInterval、鼠标点击、ajax异步请求
微任务(microtask):process.nextTick (Node.js才有)、Promise
1、在一次事件循环中,JavaScript 引擎会把整个 script 代码当成一个宏任务执行,执行完成之后,再检测本次循环中是否存在微任务,存在的话就依次从微任务的任务队列中读取执行完所有的微任务,再读取宏任务的任务队列中的任务执行,再执行所有的微任务,如此循环。JS 的执行顺序就是每次事件循环中的宏任务-微任务。
2、所以事件触发线程控制的就是(EventLoop)事件循环,当遇到(macrotask)宏任务时便会将对应的任务加入到事件线程中,等待js引擎处理,而在每一次的(macrotask)宏任务里面如果遇到微任务(microtask)也会把它加入到微任务队列中,当本次(macrotask)宏任务中所有代码执行完后再去执行微任务队列中的任务
3、每次宏任务当中遇到promise时会立即执行
(4)定时触发器线程
1、setInterval与setTimeout所在线程,因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确,因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待JS引擎空闲后执行)
(5)异步http请求线程
1、在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
2、将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由JavaScript引擎执行。
JS引擎运行机制执行原理(个人理解):
看了上面的东西,简单来说我们打开一个浏览器页面就是打开浏览器的一个新进程(除非打开多个空白页面时会合并为同一个进程),然后每个页面的浏览器内核进程又有多条线程负责渲染整个页面,而其中的GUI线程、js引擎线程、事件触发线程、定时器触发线程和异步http请求线程综合起来构成的执行顺序便是我们平时所统称的js引擎机制执行顺序
最后再附张理解图