浏览器解析JS机制

Posted guoxianjunweb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器解析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 
5 
4 
2 
3 

  

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

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

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

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

    

 

以上是关于浏览器解析JS机制的主要内容,如果未能解决你的问题,请参考以下文章

JS解析+预解析相关总结

浏览器解析JS机制

JavaScript 声明提前机制

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

Relay.js 没有正确解析组合片段

浏览器的渲染机制— (js基础复习第3期)