线程与进程

  1. 1. 进程：程序的一次执行, 它占有一片独有的内存空间,可以通过windows任务管理器查看进程
  2. 2. 线程： CPU的基本调度单位,是程序执行的一个完整流程,是进程内的一个独立执行单元
  3. 3. 进程与线程
  4.   * 一个进程中一般至少有一个运行的线程: 主线程
  5.   * 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的
  6.   * 一个进程内的数据可以供其中的多个线程直接共享
  7.   * 多个进程之间的数据是不能直接共享的
  8.     * 程序是在某个进程中的某个线程执行的
  9. 4. 浏览器运行是单进程还是多进程?
  10.   * 有的是单进程
  11.     * firefox
  12.     * 老版IE
  13.   * 有的是多进程
  14.     * chrome
  15.     * 新版IE
  16. 5. 如何查看浏览器是否是多进程运行的呢?
  17.   * 任务管理器==>进程
  18. 6. 浏览器运行是单线程还是多线程?
  19.   * 都是多线程运行的

浏览器内核模块组成

  1. 1. 什么是浏览器内核?
  2.   * 支持浏览器运行的最核心的程序
  3. 2. 不同的浏览器可能不太一样
  4.   * Chrome, Safari: webkit
  5.   * firefox: Gecko
  6.   * IE: Trident
  7.   * 360,搜狗等国内浏览器: Trident + webkit
  8. 3. 内核由很多模块组成
  9.     * 主线程
  10.       * js引擎模块 : 负责js程序的编译与运行
  11.       * html,css文档解析模块 : 负责页面文本的解析
  12.       * DOM/CSS模块 : 负责dom/css在内存中的相关处理 
  13.       * 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象)
  14.     * 分线程
  15.       * 定时器模块 : 负责定时器的管理
  16.       * DOM事件模块 : 负责事件的管理
  17.       * 网络请求模块 : 负责Ajax请求

js线程

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

定时器问题:

  • 定时器并不真正完全定时
  • 如果在主线程执行了一个长时间的操作, 可能导致延时才处理
  1. 1. 定时器真是定时执行的吗?
  2.   * 定时器并不能保证真正定时执行
  3.   * 一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)
  4. 2. 定时器回调函数是在分线程执行的吗?
  5.   * 在主线程执行的, js是单线程的
  6. 3. 定时器是如何实现的?
  7.   * 事件循环模型(后面讲)
  9. <script type="text/javascript">
  10.     document.getElementById('btn').onclick = function () {
  11.         let start = Date.now()
  12.         // console.log('启动定时器前...')
  13.         setTimeout(function () {
  14.             console.log('定时器执行了', Date.now() - start)
  15.         }, 100)
  16.         // console.log('启动定时器后...')
  18.         // 做一个长时间的工作
  19.         for (let i = 0; i < 1000000000; i++) {
  21.         }
  22.     }
  23. </script>

事件处理机制(图)

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

04_线程机制与事件机制 - 图1

H5 Web Workers

  • 可以让js在分线程执行

  • Worker 

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

  • 问题:

    • worker内代码不能操作DOM更新UI
    • 不是每个浏览器都支持这个新特性
    • 不能跨域加载JS
  • svn版本控制
  • svn server