线程机制与事件机制

浏览器内核#

• 浏览器内核是指支持浏览器运行的最核心程序 不同浏览器的内核可能不同 Chrome, Safari: webkit firefox: Gecko IE: Trident 360,搜狗等国内浏览器: Trident + webkit

• 内核由很多模块组成

  • html,css文档解析模块 : 负责页面文本的解析
  • dom/css模块 : 负责dom/css在内存中的相关处理
  • 布局和渲染模块 : 负责页面的布局和效果的绘制
  • 布局和渲染模块 : 负责页面的布局和效果的绘制
  • 定时器模块 : 负责定时器的管理
  • 网络请求模块 : 负责服务器请求(常规/Ajax)
  • 事件响应模块 : 负责事件的管理

js是单线程的#

• JS 是单线程的语言，所谓“单线程”就是一根筋，对于拿到的程序，一行一行的执行，直到上面的执行为完成，只能做这一件事

• H5提出了实现多线程的方案：Web workers（很少用）

• 只能在主线程中更新界面，分线程中不能

  1
      console.log("1")
  2
      setTimeout(function(){
  3
          console.log(2)
  4
      }, 1000)
  5
      console.log(3)

  输出：1 3 2

  这个任务是串行的，不能发生阻塞，使用异步解决这种问题

  过程：

  1. 执行第一行，打印1
  2. 执行setTimeout 后，传入setTimeout 的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）
  3. 执行最后一行，打印3
  4. 待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行
  5. 发现暂存起来的 setTimeout 中的函数无需等待时间，立即起来执行

  而多个异步代码将会进入回调队列，排队执行

  如果主线程中程序执行需要200ms，定时器设置定时100ms，最终在整个程序中定时器会在200ms后执行，而不是300ms。因为在100ms时定时器已经进入回调队列，而主线程程序执行完毕时，回调队列中第一个函数（例子中的定时器）会直接进入执行栈中执行。

事件循环模型#

• 事件循环模型由两个重要部分组成
  • 事件（定时器、DOM事件、Ajax）管理模块
  • 回调队列
• 模型运转流程
  1. 执行初始化代码, 将事件回调函数交给对应模块管理
  2. 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
  3. 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

上图中相关重要概念

1. 执行栈（execution stack）：所有代码都是在此空间执行的
2. 浏览器内核（browser core）：js引擎模块(在主线程处理)，其它模块(在主/分线程处理，如定时器、Ajax、DOM事件监听)
3. 回调队列（callback queue）<异步代码在此处等待排队>
4. 事件轮询（event loop）<从回调队列中循环取出回调函数放入执行栈中处理>(一个接一个)