JS-线程和进程机制

JSAdvance-线程机制与事件机制

1. 进程与线程

   —进程（process）：程序的一次执行，它占有的一片独有的内存空间；可以通过windows任务管理器查看进程；

   —线程（thread）：进程内的一个独立执行单元，是程序执行的一个完整流程，是CPU的最小调度单位；

   —相关知识

   进程和线程相关参考网址：https://www.cnblogs.com/yu-hailong/p/9596431.html

   1. 应用程序必须运行在某个进程的某个线程上；
   2. 一个进程中至少有一个运行的线程，主线程，进程启动后自动创建的；
   3. 一个进程中可以同时运行多个线程，即程序是多线程运行；
   4. 一个进程内的数据可以供其中的多个线程直接共享；
   5. 多个进程之间的数据是不能直接共享的；
   6. 线程池(thread poo)：保存多个线程对象的容器，实现线程对象的反复利用；

   —多进程：应用程序可以同时启动多个实例运行；多线程：在一个进程中，同时有多个线程运行；

   —多线程的优缺点：

   1. 优点：有效提升CPU的利用率；
   2. 缺点：创建多线程开销；线程间切换开销；死锁与状态同步问题；

   —单线程优缺点：

   1. 优点：顺序编程简单易懂；
   2. 缺点：效率低；

   —开始设计JS是单线程运行的，但使用HTML5中的Web Workers可以多线程运行；

   —浏览器都是多线程运行的；

   —浏览器有的是单进程的：firefox，老版IE；多进程的有chrome和新版IE；

2. 浏览器内核

   —浏览器内核：支撑浏览器运行的最核心的程序；

   —不同浏览器的内核是不同的：

   1. Chrome，Safari：webkit；
   2. firefox：Gecko
   3. IE：Trident
   4. 360，搜狗等国内浏览器：Trident+webkit

   —内核由多个模块组成：

   1. 主线程

      —js引擎模块：负责js程序的编译与运行；

      —html,css文档解析模块：负责页面文本的解析；

      —DOM/CSS模块：负责dom/css在内存中的相关处理；（将页面文本内容转换为内存中的对象）

      —布局和渲染模块：负责页面的布局和效果的绘制（参考内存中的对象）；

   2. 分线程

      —定时器模块：负责定时器的管理；

      —DOM事件响应模块：负责事件的管理；

      —网络请求模块：负责服务器请求（常规/Ajax请求）

3. 定时器

   —定时器并不能保证定时准确时间定时执行，一般延迟较短可以接收，但也有可能延迟很长时间，此时无法接收；

   —定时器回调函数是在主线程执行的；

   —定时器是通过事件循环模型实现的；

4. js单线程执行相关知识

   —alert()可以暂停当前主线程的执行，同时暂停定时器计时，点击确定后，才会恢复程序的执行和计时；

   —定时器和延时器中的回调函数都是在主线程执行的；

   —定时器的回调函数只有在运行栈中的代码全部执行完后才有可能执行；

   —代码分类：初始化代码和回调代码；

   1. 初始化代码（同步代码）：包含绑定dom事件监听、设置定时器，发送ajax请求的代码；
   2. 回调代码（异步代码）：处理回调逻辑；

   —JS引擎执行的代码的基本流程：

   1. 先执行初始化代码：可能会包含一些特别的代码：

      —设置定时器

      —绑定DOM事件监听

      —发送ajax请求

   2. 后面某个时刻才会执行回调代码；（回调函数异步执行）

   —为什么JS要用单线程模式？

   作为浏览器脚本语言，js的主要用途是与用户互动，以及操作DOM，多个线程可能会带来冲突，这就决定它只能为单线程，只能有一个线程可以更新操作界面，否则会带来很复杂的同步问题；

5. 事件循环模型

   —模型的组成部分：

   事件（定时器/DOM事件/Ajax请求）管理模块；

   回调队列（回调函数缓存机制，待处理回调函数，先进先出）；

   —模型的运转流程：

   1. 执行初始化代码，将事件回调函数交给对应模块管理；
   2. 当事件发生时，管理模块会将回调函数及其数据添加到回调队列中；
   3. 只有当初始化代码执行完毕（可能要一定时间），才会遍历读取回调队列中的回调函数执行；

   —相关概念

   1. 执行栈（execution stack）：所有代码都在此空间中执行的；
   2. 浏览器内核（browser core）：js引擎模块在主线程处理，其他模块在主/分线程处理；
   3. 回调队列（callback queue）：也可以指任务队列(task queue)、消息队列(message queue)和事件队列(event queue)；
   4. 事件轮询（event loop）：从任务队列中循环取出回调函数放入执行栈中处理；
   5. 事件驱动模型（event-driven interaction model）
   6. 请求响应模型（request-response model）：浏览器发送请求—>服务器接收请求—>服务器处理请求—>服务器返回响应数据—>浏览器接收响应数据—>浏览器响应接收数据；

6. H5 Web Workers多线程

   —递归调用：函数内部调用自己，函数嵌套使用，效率较低；

   —Web Worker是HTML5提供的一个javascript多线程解决方案；可以将一些大计算量的的代码交由web Worker运行而不会冻结用户界面；但是子线程完全受主线程控制，且不得操作DOM，所以这个新标准并没有改变javascript单线程的本质；

   —如何操纵：首先创建在分线程执行的js文件，然后在主线程中的js中发消息并设置回调；

   —相关API：

   1. Worker：构造函数，加载分线程执行的js文件；
   2. Worker.prototype.postMessage：用于向分线程/主线程传递消息；
   3. Worker.prototype.onmessage：绑定接收主线程/分线程消息的监听；

   主线程代码

   <script>
   	var input = document.getElementById('number');
       document.getElementById('btn').onclick = function(){
           var number = input.value
           //创建一个worker对象，传递参数为分线程文件
           var worker = new Worker('worker.js')
           //绑定接收消息的监听
           worker.onmessage = function(event){
               console.log('主线程接收分线程返回来的数据:'+event.data)
               alert(event.data)
           }
           //向分线程发送消息
           worker.postMessage(number)
           console.log('主线程向分线程发送的数据:'+number)
       }
       cosnole.log(this)//返回window
   script>
   

   分线程代码

   function fibonacci(n){
       return n<=2?1:fibonacci(n-1)+fibonacci(n-2)//递归调用
   }
   var onmessage = function(event){
       cosnole.log('分线程接收到的主线程发送的数据：'+number)
       //计算方法
       var result = fibonacci(number)
       postMessage(result)
       console.log('分线程向主线程返回的数据：'+result)
   }
   console.log(this)//返回全局对象，但不是window
   //alert是window的方法，在分线程中不能用，console.log是浏览器方法；
   //分线程中全局对象不在是window，所以在分线程中不可能更新界面；
   

   —不足：

   1. 不能跨域加载JS；
   2. worker内代码不能操作DOM，更新界面；
   3. 不是每个浏览器都支持这个特性；