异步相关知识与浏览器原理

异步相关

1.基础异步

• 基础定时器
  • setTimeout()
  • setInterval()

通用内容

1. 进程与线程
   • 进程：cpu资源分配的最小单位，独立资源，互不共享
   • 线程：cpu调度的最小单位
2. 每一个页面分为进程或线程
   • 单独的一个页面为进程，资源独立
   • 如果需要通信则需要用到storage或者cookie

浏览器原理

浏览器作为一个进程中包含多个线程

1. GUI渲染引擎
   • 功能概述
     • 解析css
     • 解析HTML
     • 构建dom元素
     • 布局
     • 绘制
   • 此引擎与js引擎互斥，当执行js引擎时GUI会进入panding模式，当任务队列空闲时才会继续执行GUI
   • 这种理由是受制于单线程的逻辑
2. js渲染引擎
   • 处理js 解析执行脚本
   • 分配、处理、执行待执行的事件
   • event队列
   • 阻塞GUI渲染
3. 定时器触发引擎
   • 异步定时器处理
   • 接收js引擎分配的定时器任务，并计数
   • 处理完成后交予事件触发线程触发
4. 异步HTTP请求线程
   • 异步执行请求处理：promise\ajax
   • 接收JS引擎分配异步HTTP请求
   • 监听回调，交给事件触发线程触发
5. 触发引擎
   • 接受来源: 定时器、异步、用户操作
   • 将回调过来的事件依次放入任务队列列的队尾，还给js引擎

js执行原理

• js是单线程语言，单步执行
• Memory Heap 储存堆
  • 用于分配内存（存储代码）
• Call stack 执行堆栈
  • 执行回调（存储方式）
  • 先入后出

任务（task）

• 横向
• 宏任务（macro）
  • script、setTimeout、setInterval、I/O等
    • 微任务（micro）
      • new Promise{}.then()等
    • 宏任务优先级大于微任务
    • 宏任务执行后询问是否有微任务，如果有则执行，没有则执行下一个宏任务（有微则微，无微则宏）
  • 纵向
    • 同步
      • 直接进入主线程
    • 异步
      • 进入event table
      • 进入event queue
      • 进入主线程
    • 主线程先运行同步任务，运行结束后根据event queue排序来进行运行