浏览器架构和事件循环

浏览器架构

• 早期浏览器【单进程多线程】
  • Page Thread 页面渲染，负责执行js,plugin,draw
  • NetWork Thread 网络请求
  • 其余线程 file, storage
  • 缺点：只要其中一个线程崩溃，页面就会崩溃。
• 现代浏览器架构
  • 多进程的浏览器，浏览器的每一个页面都会开启一个渲染进程
  • 主进程
    • a. 浏览器界面
    • b. 用户交互
    • c. 负责管理其余子进程
  • 网络进程：负责网络资源的请求和接收
  • GPU进程
    • 驱动Chrome利用GPU的最初的动力是3D CSS，对页面渲染进行加速
  • 插件进程：第三方插件很容易导致页面崩溃或不安全问题，使用沙箱¹进行封装
  • 渲染进程（内核）
    • webkit内核：sarafi/chrome
    • gecko内核：firefox/mozillasuite/seamonkey
    • presto内核：opera
    • edge内核：win10系统以上，底层是chromium内核
    • blink内核：chromium²
    • trident内核：IE9/360/搜狗/腾讯
    • 多线程的进程，运行在沙箱环境中，确保整个页面的安全，由渲染引擎和JS引擎构成，其中渲染引擎和JS引擎都是在主线程中运行。
      

浏览器内核执行机制

1. 渲染引擎和JS引擎如何相互合作？
   

   渲染引擎和JS解析引擎工作在同一个线程中，两者之间互斥。浏览器的事件循环为一个whie循环，它是JS异步的实现，从Event Queue任务队列中获取任务并执行。

   • DOM树【渲染引擎】，解析HTML，生成用于构建页面的信息，如果遇到script标签，停止解析
   • CSS树【渲染引擎】
   • 页面布局
   • JavaScript任务【JS引擎】

2. JS特性
   • JS单线程执行
     

     • JS只能在宿主环境中通过解释器执行，运行在主线程中
     • 用途原因多个节点操作同一个节点会造成资源的浪费，引入锁\\信号量机制会很复杂
     • JS单线程与渲染引擎互斥

   • 异步编程
     

     1. JS执行和渲染都是在主线程中执行，为了解决因主线程中JS执行时间较长导致的页面渲染卡顿问题，引入异步的机制将JS任务执行放入特定任务队列中，待所有同步任务执行结束后，异步任务的回调函数放入主线程任务队列中执行。
     2. 异步任务
        • 定时器
        • 网络请求
        • 与用户的交互
     3. 任务队列的类型
        • 宏任务队列
          • 延时队列：存放计时器线程包装的回调任务，优先级中
          • 交互队列：存放用户操作事件产生后的事件处理任务，优先级高
        • 微任务队列：优先级最高

3. 主线程事件循环什么时候需要去任务队列查看？
   

   同步任务执行完毕，转而去任务队列获取任务，同步任务执行完毕的条件是JS的任务栈为空。

戏剧知识