# 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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

缺点

  • worker 内代码不能操作 DOM 更新视图
  • 浏览器兼容问题
  • 不能跨域加载 Js
更新于: 2/1/2020, 3:05:49 AM