浏览器解析js的机制

浏览器解析JS机制
浏览器解析JS机制

一、浏览器的运行机制

 浏览器是多进程的，其中包含了：

 1）GPU进程

 2）第三方插件进程

 3）浏览器渲染进程

 4）Browser进程

 这里面的进程很好理解，浏览器本身，第三方插件扩容，浏览器渲染，GPU。其中，浏览器渲染JS就是通过浏览器渲染进程进行的。

 浏览器渲染引擎是多线程的，其中包括以下线程：

 1）GUI渲染线程   --->  界面渲染

 2）JS引擎线程     --->   JS处理

 3）事件触发线程  --->   事件处理

 4）定时器线程      --->   定时器处理

 5）http异步请求线程     ----> 异步请求处理

 一般我们前端所学的就是对以上线程的操作和处理，管理好以上线程对我们前端技术能够有很大的提升。

二、JS引擎线程处理

 在JS引擎线程中，可以分为同步和异步任务，其中:

1）同步任务全部通过主线程执行，形成 执行栈

2）异步任务通过事件触发线程或者定时器线程处理，形成 任务队列

3）当执行栈中的任务全部处理完成，主线程为空闲的时候，会从任务队列中提取任务到执行栈中执行。

以上就是浏览器中JS的执行机制。

三、浏览器中的任务类型及一些案例

JS引擎线程和GUI渲染是冲突的，因为JS引擎线程可能存在修改dom造成页面 重绘(repatian) / 回流(reflow) 的操作，所以当JS引擎线程busy的时候会将GUI渲染线程放在队列中，等待JS引擎线程空闲。

在进行前端性能优化的时候有时会遇到JS引擎线程需要计算大量数据造成GUI渲染线程长时间悬挂，导致页面长时间无法加载的情况。这时候我们可以在JS中定义webworker， 它相当于在JS引擎线程外挂了一个线程，用于单独处理大数据，长时间的任务。

有一道面试题是这样的：

    let a = 1;
    console.log(a);
  
    setTimeout( () => {
       console.log(a+1);
    }, 0);
     
    setTimeout( () => {
       console.log(a+2);
    }, 0);
     
    Promise.resolve().then( () => {
       console.log(a+3);
    })
     
    console.log(a+4);
　　

其结果为：

1
2
3
4
5
1
5
4
2
3

而为什么setTimeout(function(), 0) 会在大量同步操作后执行，是因为 setTimeout 和 setInterva 都是挂在定时器触发线程下面， 也是需要等待执行栈的完成之后才能执行。

在JS中又两种任务，同步任务和异步任务，又有两种任务类型 macrotask 和 microtask :

 1）macr0task： 宏任务，如主代码块任务，setTimeout，setInterval等，是从事件队列中取一个事件回调放到执行栈中执行。

 2）microtask：微任务，如Promise，Process.nextTick(),是执行栈执行完后立即执行的任务。

欢迎加微信一起学习：13671593005

此文转载，言简意赅，通俗好懂，与君共享~