web浏览器以及跨端方案 | 青训营

114 阅读5分钟

浏览器架构

浏览器架构演进

  1. 单进程架构:所有模块运行在同一个进程里,包含网络、插件、JavaScript运行环境等

    • 在早期的浏览器中,所有的功能都在一个进程中完成,包括用户界面、JavaScript执行、CSS渲染和网络请求等。单进程架构的优势是简单、易于实现,但缺点也很明显,如:不稳定(一个标签页崩溃可能导致整个浏览器崩溃)、不安全(攻击者可以利用漏洞来控制整个浏览器)以及性能瓶颈(多个标签页争抢资源,导致性能下降)。
  2. 多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程

    • 为了解决单进程架构的问题,浏览器厂商开始将浏览器的功能拆分为多个进程。例如,谷歌推出的Chrome浏览器就采用了多进程架构。在这种架构下,浏览器将每个标签页(或每个渲染实例)分配给一个单独的进程,从而实现了进程间的隔离,防止单个网页崩溃影响到其他界面。多进程架构提高了浏览器的稳定性、安全性和性能,但同时也增加了内存消耗
    • 每一个Tab运行在独立的沙盒里面
  3. 面向服务架构:将原来的UI、数据库、文件、设备、网络等,作为一个独立的基础服务

    • 面向服务架构 => 多进程架构升级版本
    • 随着Web平台的发展,浏览器需要处理越来越多的任务,这使得多进程架构变得复杂且难以维护。面向服务架构的出现旨在将浏览器的各个功能模块化,将它们作为独立的服务来运行和维护。在这种架构下,每个服务都可以独立地使用一个或多个进程,根据需求自动扩展或缩减资源。这样可以进一步提高浏览器的稳定性、安全性和性能,同时优化资源利用率
    • 浏览器架构 - 多进程分工

进程名称进程描述
浏览器(主进程)主要负责页面展示逻辑,用户交互,子进程管理;包括地址栏、书签、前进、后退、收藏夹等
GPU进程负责UI绘制,包含整个浏览器全部UI
网络进程网络服务进程,负责网络资源加载
标签页(渲染进程)控制tab内的所有内容,将HTML、CSS和JavaScript转换为用户可交互的网页
插件进程控制网站运行的插件,比如flash、ModHeader等
其他进程如上图所示:适用程序Storage/Network/Audio Service等

渲染进程 - 多线程架构

在这里我们涉及到了(多)线程,前面涉及到了(多)进程。这里补充额外知识来说明两者:

  • 进程和线程都是操作系统进行任务管理的基本单位,它们之间有一定的关联性,但也有明显的区别

  1. 进程:

进程是一个独立的程序执行实例,它包括程序的代码、数据以及运行时所需的系统资源(如文件描述符、内存空间等)。每个进程都有自己的独立地址空间,操作系统会为每个进程分配和管理资源。

进程的特点:

  • 独立性:进程具有独立的地址空间,一个进程无法直接访问另一个进程的资源,除非通过进程间通信(IPC)机制。
  • 隔离性:操作系统会为每个进程分配和管理资源,确保它们之间的隔离。这有助于提高系统的稳定性和安全性。
  • 资源开销:创建和维护进程需要消耗一定的系统资源,如内存、CPU时间等。

应用场景:进程通常用于执行独立的、需要隔离的任务。例如,在多进程浏览器中,每个Tab标签页都运行在一个单独的进程中,以实现进程间的隔离和资源管理。

  1. 线程:

线程是进程内的一个执行单元,它共享进程的地址空间和资源,但拥有自己的执行堆栈和程序计数器。一个进程可以包含多个线程,它们可以并发地执行任务。

线程的特点:

  • 轻量级:线程比进程更轻量级,创建和切换线程的开销较小。
  • 共享资源:线程之间可以共享进程的地址空间和资源,这使得线程间的通信和数据共享变得更加简单高效。
  • 上下文切换:线程之间的上下文切换成本较低,因为它们共享相同的地址空间。

应用场景:线程通常用于实现并发执行和任务分解。例如,在一个图形编辑器中,可以使用多个线程分别处理用户输入、图形渲染和文件保存等任务,从而提高程序的响应速度和执行效率。

总结:进程是一个独立的程序执行实例,具有独立的地址空间和资源;线程是进程内的一个执行单元,共享进程的地址空间和资源。进程通常用于执行独立的、需要隔离的任务,而线程则用于实现并发执行和任务分解

  • 内部是多线程实现,主要负责页面渲染,脚本执行,事件处理,网络请求等