JS运行机制（浏览器内核）

谈及浏览器，首先我们的第一映像就是页面信息显示或者是从网上百度、谷歌我们所需要的信息。归纳起来大概有两点：1.信息检索；2.信息展示
而回顾浏览器的发展历史，从1991年的世界上第一个有用户注册的浏览器WorldWideWeb开始，当时它还只是可以显示基本的样式表，人们可以通过它看见经过简易排版的页面信息。它的导航也只有“返回”，“上一步”和“下一步”这三个功能。
经过近30年的时代发展和一代又一代工程师们的努力，期间经历Erwise、ViolaWWW、MidasWWW、Lynx、Mpsaic、IBM WebExplorer、Netscape Navigator......等，众多的流浪器，到如今五大主流浏览器：IE、Chrome、Firefox、Safari、Opera。

现在的浏览器虽然百花齐放，但其内核主要还都是Trident、Webkit、Gecko

列举了现如今主要的浏览器内核，接下来继续为这个关键角色找找归宿：
1.Trident内核，俗称是IE内核，它是由微软在Spyglass Mosaic的基础上主导开发的，并一直沿用至IE11,从2016年1月开始微软已停止了对IE的更新，并开始在Windows 10中开始嵌入和推荐
Microsoft Edge浏览器，其新一代内核是EdgeHTML；
2.Webkit内核，其前身是KDE小组的KHTML引擎。开始是苹果的Safari浏览器中使用，而后再谷歌的Chrome浏览器也采用，并使Webkit更加深入人心，以致于很多人把Webkit称为chrome内核，（在此为Safari默哀一小会儿）。然而 2013 年 4 月 3 日，谷歌在 Chromium Blog 上发表 博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。所以现在的谷歌浏览器内核其实应该叫Blink,当其本质还是Webkit,我们可以如此理解：Blink是Webkit的分支，而Webkit又是KHTML的分支。在此需要补充说明一点Opera浏览器已放弃自己的Presto内核，加入谷歌的阵营，先用Webkit再用Blink。
3.Gecko内核，Gecko的身世就比较传奇了。它是在Mosaic内核的基础上开发的。在第一次浏览器世纪大战中，败下阵来的网景公司并没有彻底的烟消云散，其原有成员一起创办了Mozilla基金会，开发了Firefox(火狐)浏览器，吹响了第二次浏览器大战的号角。并Gecko内核的代码完全开源，邀请全世世界的开发者来助阵。这就是一场传说啊，有木有。

好了，前面背景铺垫了这么一大堆，下面开始来进入正题：
虽然浏览器的种类繁多，内核也多样，但其主要工作原理却是大致一致的，这或许就是所谓的“万法同源”。其工作的简易原理如下图：

1.Browser进程，接收资源，展示画面
2.Render进程绘制画面
3.GPU进程，辅助绘制画面

看完简易版的了，再来看点复杂点的浏览器内核工作原理：

一个浏览器Tab渲染进程中主要有5个线程，其作用功能如下：
A.GUI渲染线程：graphical user interface
1.负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
2.当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
3.注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

B.js引擎线程（javascript是单线程）：
1.是负责处理JS脚本的js内核，一个渲染进程有且只有一个js线程，且该线程一直处于等待任务对队列中任务的到来。

C.事件触发线程：
1.事件触发线程是用来存放事件任务的队列，有多个事件任务时触发时，该线程会按照事件触发的先后顺序将待处理的事件添加到队列的尾部，排队等待js引擎线程的处理。

D.定时器触发的线程：
一次性定时器（setTimeout）和间歇性(setInterval)定时器,为避免js单线程阻塞状态，影响计时的准确性，故在设计js程序时单独为计时器开了个线程。计时完成后事件也会被放入事件触发线程的队列中等待JS引擎的触发。
注：setTimeout定时低于4ms的时间会被当做4ms,这是W3C中规定的

E.异步http请求线程：
XMLHttpRequest在连接后是通过浏览器新开一个线程请求，当检测到状态变更时，如果设置有回掉函数，异步线程就产生状态变更事件，将这个回调函数放入事件队列中