进程与线程

1. 进程：

• 程序的一次执行, 它占有一片独有的内存空间
• 可以通过windows任务管理器查看进程

1. 线程：

• 是进程内的一个独立执行单元
• 是程序执行的一个完整流程
• 是CPU的最小的调度单元

1. 进程与线程关系

• 一个进程中一般至少有一个运行的线程: 主线程
• 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的
• 一个进程内的数据可以供其中的多个线程直接共享
• 多个进程之间的数据是不能直接共享的

1. 浏览器运行是单进程还是多进程?

• 有的是单进程
  • firefox
  • 老版IE
• 有的是多进程
  • chrome
  • 新版IE

1. 如何查看浏览器是否是多进程运行的呢?

• 任务管理器==>进程

1. 浏览器运行是单线程还是多线程?

• 都是多线程运行的

  浏览器内核

1. 什么是浏览器内核?

• 支持浏览器运行的最核心的程序

1. 不同的浏览器可能不太一样

• Chrome, Safari: webkit
• firefox: Gecko
• IE: Trident
• 360,搜狗等国内浏览器: Trident + webkit

1. 内核由很多模块组成

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

  JS是单线程的

1. 如何证明js执行是单线程的?

• setTimeout()的回调函数是在主线程执行的
• 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行

1. 为什么js要用单线程模式, 而不用多线程模式?

• JavaScript的单线程，与它的用途有关。
• 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
• 这决定了它只能是单线程，否则会带来很复杂的同步问题

1. 代码的分类:

• 初始化代码
• 回调代码

1. js引擎执行代码的基本流程

• 先执行初始化代码: 包含一些特别的代码
  • 设置定时器
  • 绑定监听
  • 发送ajax请求

• 后面在某个时刻才会执行回调代码

  setTimeout(function () {
    console.log('timeout 3')
  }, 3000)
  setTimeout(function () {
    console.log('timeout 2')
    alert('2222')
  }, 2000)
  alert('提示...') //等待3s 点击后输出'alert之后' 再立马定时器内容
  console.log('alert之后')

  事件循环模型

1. 所有代码分类

• 初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
• 回调执行代码(异步代码): 处理回调逻辑

1. js引擎执行代码的基本流程:

• 先执行初始化代码===>再执行回调代码

1. 模型的2个重要组成部分:

• 事件管理模块
• 回调队列

1. 模型的运转流程

• 执行初始化代码, 将事件回调函数交给对应模块管理
• 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
• 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

图解过程

• WebAPIs ：各种解析模块（浏览器各种模块 而不是js引擎）
• JS：JS引擎 heap（堆） stack（栈）
• callback queue：回调函数队列(待处理)
• event loop：事件循环 执行完初始化代码，再执行回调代码

1. 执行初始化代码, 将事件回调函数交给对应模块管理(WebApis)
2. 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队(callback queue)中
3. 只有当初始化代码执行完后(要一定时间), 才会遍历读取回调队列中的回调函数执行(event loop 事件循环)

  function fn1() {
    console.log('fn1()') //1
  }
  fn1()

  document.getElementById('btn').onclick = function () {
    console.log('处理点击事件')//3|4
  }

  setTimeout(function () {
    console.log('到点了')//3|4
  }, 2000)

  function fn2() {
    console.log('fn2()')//2
  }
  fn2()