一起了解浏览器（知己知彼）

一、浏览器的进程

在浏览器中打开一个网页，相当于新起一个进程，进程内有自己的多线程。

如果是单线程，那么某个tab页奔溃了，就影响整个浏览器，体验差。所以浏览器是多线程的。

二、浏览器的内核（渲染进程）

页面渲染、js的执行、事件的循环都在这个进程进行。

浏览器的渲染进程是多线程的。

包含哪些线程呢？

1、GUI渲染线程

    . =>负责渲染浏览器界面，解析HTML、css、构建dom树和renderObject树、布局、绘制等；

    . =>当界面需要重绘（repaint）或由于某种操作引发回流（reflow）时，该线程就会执行；

    . =>GUI渲染线程与js引擎线程是互斥的：当js引擎执行时，GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个列队中，等到js引擎空闲时立即被执行

2、js引擎线程

  . => js内核负责处理JavaScript脚本程序

    .=>js引擎线程负责解析JavaScript脚本，运行代码

    .=>js引擎一直等待着任务列队中任务的到来，然后加以处理。一个tab页（render进程）中无论什么时候都只有一个js线程运行js程序

     .=>同样注意，CUI渲染线程与js引擎线程是互斥的。所以如果js执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

3、事件触发线程

    . =>事件触发线程归属于浏览器而不是js引擎。用来控制事件的循环。可以理解为：js引擎忙不过来，需要浏览器另开线程来协助。

    . =>当js引擎执行代码如setTimeout时（也可来自浏览器内核的其他线程，如鼠标点击、ajax异步请求等），将会对应任务添加到事件线程中。

    . =>对对应的事件符合条件被触发时，该线程会把事件添加到待处理队列尾部，当代js引擎处理

    . =>JS单线程关系，待处理队列中的事件都是排队。等待js引擎处理js引起空闲才会去执行

4、定时器触发线程

  . =>传说中的setInerval 与 setTimeout 所在的线程

   . => 浏览器定时器计数器并不是由js引擎计数的（因为js引擎是单线程的，如果处于阻塞状态就会影响计时的准确性）

  . =>因此，通过单线程来计时并触发定时（计时完毕后添加到事件列队中，等待js引擎空闲后执行）

  . =>W3C在HTML标准中规定，需要setTimeout中低于4ms的时间间隔算为4ms