一、浏览器的运行机制
浏览器是多进程的,其中包含了:
1)GPU进程
2)第三方插件进程
3)浏览器渲染进程
4)Browser进程
这里面的进程很好理解,浏览器本身,第三方插件扩容,浏览器渲染,GPU。其中,浏览器渲染JS就是通过浏览器渲染进程进行的。
浏览器渲染引擎是多线程的,其中包括以下线程:
1)GUI渲染线程 ---> 界面渲染
2)JS引擎线程 ---> JS处理
3)事件触发线程 ---> 事件处理
4)定时器线程 ---> 定时器处理
5)http异步请求线程 ----> 异步请求处
二、JS引擎线程处理
在JS引擎线程中,可以分为同步和异步任务,其中:
1)同步任务全部通过主线程执行,形成 执行栈
2)异步任务通过事件触发线程或者定时器线程处理,形成 任务队列
3)当执行栈中的任务全部处理完成,主线程为空闲的时候,会从任务队列中提取任务到执行栈中执行。
三、浏览器中的任务类型
JS引擎线程和GUI渲染是冲突的,因为JS引擎线程可能存在修改dom造成页面 重绘(repatian) / 回流(reflow) 的操作,所以当JS引擎线程busy的时候会将GUI渲染线程放在队列中,等待JS引擎线程空闲。
在进行前端性能优化的时候有时会遇到JS引擎线程需要计算大量数据造成GUI渲染线程长时间悬挂,导致页面长时间无法加载的情况。这时候我们可以在JS中定义webworker, 它相当于在JS引擎线程外挂了一个线程,用于单独处理大数据,长时间的任务
在JS中又两种任务,同步任务和异步任务,又有两种任务类型 macrotask 和 microtask :
1)macr0task: 宏任务,如主代码块任务,setTimeout,setInterval等,是从事件队列中取一个事件回调放到执行栈中执行。
2)microtask:微任务,如Promise,Process.nextTick(),是执行栈执行完后立即执行的任务。