您现在的位置是:首页 >学无止境 >浏览器架构和事件循环网站首页学无止境

浏览器架构和事件循环

lincong-pro 2023-06-02 12:00:03
简介浏览器架构和事件循环

浏览器架构

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

浏览器内核执行机制

  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的任务栈为空。


  1. 沙箱是一种技术,软件运行在操作系统受限制的环境中 ↩︎

  2. chromium是开源的,需要手动更新,隐私性更强,相比于chrome,其面向的是新功能的体验,类似于王者荣耀的体验服一样。 ↩︎

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。