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

用户84 发布于2019-08-23 10:49 / 1302人阅读

摘要：一浏览器的进程和线程前端研发人员不要忘记了浏览器是安装在电脑手机上的应用。附录中的事件系统环境中的事件系统多了两个和案例四输出结果

一、浏览器的进程和线程

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

一个程序可以有多个进程；

一个进程和多个线程；

多个进程之间可以相互通信；

多个线程之间可以相互通信；

不同进程之间的线程不能相互通信。

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

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

GUI 渲染线程

JavaScript引擎线程

定时触发器线程

事件触发线程

异步http请求线程

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

1、用户界面

2、浏览器引擎

3、渲染引擎

4、网络

5、用户界面后端

6、Javascript解释器

7、数据持久化存储

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

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

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

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

四、案例（可能是你们最想看的）

//案例一：
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 {  }  //此时promise状态为pending
Hi!                    //打印hi
Promise {  }  
settimeout1            //主线程执行完毕，依次将三个settimeout放入macro队列中，打印第一个
Promise {  }
settimeout2            //打印第二个
resolved.success       //promise执行成功

//案例二：

如果promise中直接resolve("success")，运行结果是怎么样？
Promise
Promise {  }
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 (
      
    );
  }
  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 {  }
Hi!
nextTick
resolved.success
Promise { undefined }
settimeout1
Promise { undefined }
settimeout2
Immediate

云服务器 GPU云服务器进程线程进程线程数中的事件 linux进程与线程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96719.html

深入前端-彻底搞懂JS的运行机制

摘要：浏览器是多进程的详情看我上篇总结浏览器执行机制的文章深入前端彻底搞懂浏览器运行机制浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。执行异步操作事件完成，回调函数进入。主线程从读取回调函数并执行。最近看了很多关于JS运行机制的文章，每篇都获益匪浅，但各有不同，所以在这里对这几篇文章里说的很精辟的地方做一个总结，参考文章链接见最后。本文博客地址了解进程和线程进程是应用...

luckyw 2019-08-02 15:30 评论0 收藏0
深入前端-彻底搞懂JS的运行机制

摘要：浏览器是多进程的详情看我上篇总结浏览器执行机制的文章深入前端彻底搞懂浏览器运行机制浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。执行异步操作事件完成，回调函数进入。主线程从读取回调函数并执行。最近看了很多关于JS运行机制的文章，每篇都获益匪浅，但各有不同，所以在这里对这几篇文章里说的很精辟的地方做一个总结，参考文章链接见最后。本文博客地址了解进程和线程进程是应用...

jaysun 2019-08-23 18:41 评论0 收藏0
大话javascript 4期：事件循环（1）

摘要：脚本执行，事件处理等。引擎线程，也称为内核，负责处理脚本程序，例如引擎。事件触发线程，用来控制事件循环可以理解为，引擎线程自己都忙不过来，需要浏览器另开线程协助。异步请求线程，也就是发出请求后，接收响应检测状态变更等都是这个线程管理的。一、进程与线程现代操作系统比如Mac OS X，UNIX，Linux，Windows等，都是支持多任务的操作系统。什么叫多任务呢？简单地说，就是操...

codergarden 2019-08-23 16:27 评论0 收藏0
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

摘要：如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程浏览器内核多线程单线程运行机制的区别。因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料，从浏览器多进程到单线程，将引擎的运行机制系统的梳理一遍。前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 ----------超长文+多图预警，需要花费不少时间。---------- 如果看完本文后，还...

wanghui 2019-08-22 13:56 评论0 收藏0
浏览器进程线程1

摘要：浏览器的渲染进程是多线程的。因此为了防止渲染出现不可预期的结果，浏览器设置渲染线程与引擎为互斥的关系，当引擎执行时线程会被挂起，更新则会被保存在一个队列中等到引擎线程空闲时立即被执行。本篇文章参考自撒网要见鱼大佬的仅供自己学习提升。 https://segmentfault.com/a/11... 区分线程和进程 **- 什么是进程** 狭义定义：进程是正在运行的程序的实例（a...

Forest10 2019-08-23 15:38 评论0 收藏0