JavaScript线程机制与事件机制

线程与进程

• 进程
  • 程序的一次执行，它占有一片独有的内存空间
  • 可以通过 window 任务管理器查看进程
• 线程
  • 是进程内的一个独立执行单元
  • 是程序执行的一个完整流程
  • 是CPU的最小的调度单元
• 关系
  • 一个进程至少有一个线程（主）
  • 程序是在某个进程中的某个线程执行的

浏览器内核模块

• 主线程
  • js 引擎模块：负责js程序的编译与运行
  • html,css文档解析模块：负责页面文本的解析
  • DOM/CSS模块：负责dom/css在内存中的相关处理
  • 布局和渲染模块：负责页面的布局和效果的绘制（内存中的对象）
• 分线程
  • 定时器模块：负责定时器的管理
  • DOM事件响应模块：负责事件的管理
  • 网络请求模块：负责Ajax请求

js线程

• js是单线程执行的（回调函数在主线程）
• h5提出了实现多线程的方案：Web Workers
• 只能是主线程更新界面

定时器问题

• 定时器并不是完全定时
• 如果在主线程执行了一个长时间的操作，可能导致延时才处理

事件处理机制

• 代码分类
  • 初始化执行代码：包含绑定dom事件监听，设置定时器，发送 ajax 请求的代码
  • 回调执行代码：处理回调逻辑
• js引擎执行代码的基本流程
  • 初始话代码 ==> 回调代码
  • 先执行初始化代码：包含一些特别的代码回调函数（异步执行）
    • 设置定时器
    • 绑定事件监听
    • 发送 ajax 请求
  • 后面在某个时刻才会执行回调代码
• 模块的2个重要组成部分
  • 事件管理模块
  • 回调队列
• 模块的运转流程
  • 执行初始化代码，将事件回调函数交给对应的模块管理
  • 当事件发生时，管理模块会将回调函数及其数据添加到回调队列中
  • 只有当初始化代码执行完后（可能要一定时间），才会遍历读取回调队列中的回调函数执行

Web Workers

// 可以让js在分线程执行
// main.js
var worker = new Worker('worker.js')
worker.onMessage = function(event) {
  console.log(event.data) // 主线程接收分线程发送过来的数据
}
worker.postMessage(data) // 向分线程发送数据
// worker.js
var onmessage = function(event) {
  console.log(event.data) // 接口主线程发送数据
  // 向主线程发送数据
  postMessage(reslut)
}

缺点

• worker 内代码不能操作 DOM 更新视图
• 浏览器兼容问题
• 不能跨域加载 Js