线程机制与事件机制

线程机制与事件机制

浏览器内核模块组成

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

js线程

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

定时器问题：

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

事件处理机制

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

H5 Web Workers

• 可以让js在分线程执行
• Worker

  var worker = new Worker('worker.js')
  worker.onMessage = function(event){event.data}  // 用来接收另一个线程发送过来的数据的回调
  worker.postMessage(data1)   // 向另一个线程发送数据
  

• 问题：
  • worker内代码不能操作DOM更新UI
  • 不是每个浏览器都支持这个新特性
  • 不能跨域加载JS