前端中的进程、线程、事件系统

1、浏览器的进程和线程

      前端研发人员不要忘记了浏览器是安装在PC电脑（手机）上的应用。既然是客户端应用，就免不了一个问题：线程和进程。

• 一个程序能够有多个进程；
• 一个进程和多个线程；
• 多个进程之间能够相互通讯；
• 多个线程之间能够相互通讯；
• 不一样进程之间的线程不能相互通讯。

      好，知道了这些基本的知识，咱们来看一下浏览器（以谷歌浏览器为例）这个最基本的应用程序有哪些进程，又有哪些线程。
Chrome的进程：你们能够打开任务管理器看看，有哪些进程

      从图中能够看到，在chrome中每打开一个标签页，每个扩展程序都是一个进程。
Chrome的线程：对于一个进程来讲，又有哪些线程呢？

• GUI 渲染线程
• JavaScript引擎线程
• 定时触发器线程
• 事件触发线程
• 异步http请求线程

      那么当你打开一个页面，就启动了一个进程，那么这个进程有上面几个线程。这几个线程之间相互合做，可是GUI和JavaScript之间是相互独立的，并且Javascript是单线程的。缘由很简单，涉及UI操做的不能同时处理，否则给用户呈现的页面会是什么样子。
      既然知道了，浏览器做为应用程序具有的基本要素。那么咱们想看看浏览器内部具体的工做方式。
了解一个程序，首先了解程序的模块划分和工做流程。
浏览器主要划分这几个模块浏览器部件：那么这几个部件相互耦合，为用户提供页面。

• 一、用户界面
• 二、浏览器引擎
• 三、渲染引擎
• 四、网络
• 五、用户界面后端
• 六、Javascript解释器
• 七、数据持久化存储

2、浏览器页面渲染的方式（页面初始化）

咱们重点来看一下浏览器的渲染是怎么操做的

3、浏览器的事件系统（页面操做）Macro和Micro

异步并非不执行，而是执行放入队列。

4、案例（多是大家最想看的）

//案例一：
setTimeout(() => {
    console.log(promise);
    console.log('settimeout1');
  }, 0);
let promise = new Promise(function(resolve, reject) {
    console.log('Promise');
    setTimeout(()=>{
        resolve('success');
    },0);
    //resolve('success');
  }).then((msg)=>{
    console.log('resolved.'+msg);
  });
  
  setTimeout(() => {
    console.log(promise);    
    console.log('settimeout2');
}, 0);
  console.log(promise);
  console.log('Hi!');
//输出结果
Promise                //Promise会当即执行
Promise { <pending> }  //此时promise状态为pending
Hi!                    //打印hi
Promise { <pending> }  
settimeout1            //主线程执行完毕，依次将三个settimeout放入macro队列中，打印第一个
Promise { <pending> }
settimeout2            //打印第二个
resolved.success       //promise执行成功

//案例二：

若是promise中直接resolve('success')，运行结果是怎么样？
Promise
Promise { <pending> }
Hi!
resolved.success
Promise { undefined }
settimeout1
Promise { undefined }
settimeout2

//案例三：

若是在React中的事件系统是什么样子的呢？
class Father extends Component {
  render() {
    let promise = new Promise(function(resolve, reject) {
      resolve('success1');
    }).then((msg)=>{
      console.log('resolved.'+msg);
    });
    return (
      <Son ref="son"/>
    );
  }
  componentDidMount(){
    console.log('Did Mount');
  }
  componentWillMount(){
    let promise = new Promise(function(resolve, reject) {
      resolve('success2');
    }).then((msg)=>{
      console.log('resolved.'+msg);
    });
    console.log('Will Mount');
  }
}

//输出结果
Will Mount
Did Mount
resolved.success2
resolved.success1
能够看到react并无将micro任务合并到渲染里面

为何会说起React，由于React 的处理方式和咱们和浏览器的实现流程比较相似。
React初始化《======》浏览器初始加载
React更新   《======》浏览器的事件系统
因此React从很大程度上作了一层抽象，让咱们面向组件的函数编程，而不是面向浏览器的编程。

附录：Node中的事件系统Node

node环境中的事件系统多了两个 process.nextTick和setImmediate

//案例四：
setTimeout(() => {
    console.log(promise);
    console.log('settimeout1');
  }, 0);
let promise = new Promise(function(resolve, reject) {
    console.log('Promise');
    /*setTimeout(()=>{
        resolve('success');
    },0);*/
    resolve('success');
  }).then((msg)=>{
    console.log('resolved.'+msg);
  });
  
  setTimeout(() => {
    console.log(promise);    
    console.log('settimeout2');
}, 0);
console.log(promise);
console.log('Hi!');
process.nextTick(()=>{console.log('nextTick')});
setImmediate(()=>{console.log('Immediate')}) ;
//输出结果
Promise
Promise { <pending> }
Hi!
nextTick
resolved.success
Promise { undefined }
settimeout1
Promise { undefined }
settimeout2
Immediate