JS线程机制与事件机制

JS线程机制与事件机制

1.进程与线程

（1）.定义：

• 进程：程序的一次执行，它占有一片独有的内存空间

• CPU的基本调度单位，是程序执行的一个完整的流程

（2）.进程与线程的关联

• 一个进程一般至少有一个运行的线程：主线程

• 一个进程可以运行多个线程

• 一个进程内的数据可以供其中的多个线程共享

• 多个线程之间的数据是不能直接共享的

（3）.浏览器基本上是多进程的

2.浏览器内核

（1）.定义：支持浏览器运行的最核心的程序

（2）.不同的浏览器运行的内核不同

• Chrome,Safari：webkit

• firefox：Gecko

• IE：Trident

• 国内浏览器360等：Trident + webkit

（3）.内核组成的模块：

• html，css文档解析模块：负责页面文本的解析

• dom/css模块： 负责dom/css在内存中的相关处理

• 布局和渲染模块：负责页面的布局和效果的绘制

• 定时器模块：负责定时器的管理

• 网络请求模块：负责服务器请求（Ajax）

• 事件响应模块：负责事件的管理

3.定时器

（1）分类：

• 循环定时器：不关闭一直执行

• 延时定时器：一定时间后才执行，只执行一次

（2）循环定时器：setInterval

    var i = 0;
    //获得定时器句柄
    var intervalId = setInterval(function(){
      if (i >= 5) {
        //清除定时器
        clearInterval(intervalId);
      }
      console.log(Date.now());
      i++;
    },1000);

（3）延时定时器：

    setTimeout(function(){
      console.log("----");
    },2000);

4.JS是单进程的

（1）证明：

• 使用setTimeout()回调函数在主线程运行

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

（2）为什么js要使用单线程模式：

　　作为浏览器的脚本语言主要目的是和用户交互，以及操作DOM，单线程会避免复杂的同步问题

（3）代码分类：

• 初始化代码

• 回调代码

（4）JS引擎执行代码的基本流程

1. 先执行初始化代码：包括一些特别的代码：

   • 设定定时器

   • 绑定监听

   • 发送Ajax请求

2. 在某一时刻执行回调代码

5.事件循环模型

执行流程：

1.同步任务加载执行

初始化代码：绑定监听，设置定时器，发送ajax请求

2.异步任务交给时间管理模块

3.管理模块监听异步任务是否满足条件，如果满足条件就会将对应的任务放入callback queue中

4.主线程同步任务执行完成后通过event loop（事件轮询机制）询问callback queue

• 有可执行的回调函数，就将回调函数放入主线程中执行

• 如果没有待会再来询问

6.Web Workers：（需要开启服务器）

（1）提供了js分线程实现

（2）相关API：

• Worker：构造函数，加载分线程执行的js文件

• Worker.prototype.onmessage：用于接收另一个线程的回调函数

• Worker.prototype.postMessage：向另一个线程发送信息

（3）不足：

• 不能操作DOM（不能更新UI）

• 不能跨域加载JS

• 不是每一个浏览器都支持这个新特性

（4）代码：

在主线程html中编写

<input type="text" id="number" value="30">
<button id="btn">计算斐波那契数</button>
<script type="text/javascript">



document.getElementById("btn").onclick = function(){
  var value = document.getElementById("number").value;

  //获得分线程
  var worker = new Worker("./work.js");

  //发送给分线程数据
  worker.postMessage(value);
  //接收分线程数据
  worker.onmessage = function(event){
    console.log(event.data);
  }

}
</script>

在同一级目录下work.js

function fibonacci(num){
    return num > 2 ? fibonacci(num - 1) + fibonacci(num - 2) : 1;
}

var onmessage = function(event){
    console.log("分线程监视....");

    //获取主线程发送过来的数据
    var data = event.data;

    //分线程处理数据
    data = fibonacci(data);

    //返回数据给主线程
    postMessage(data);
};

执行结果：

　　不会卡住主进程界面，大批量计算在分线程中执行。