浏览器架构

主要架构

• The User Interface
  主要提供用户与Browser Engine交互的方法。
• The Browser Engine
  协调（主控）UI和the Rendering Engine，在他们之间传输指令。
• The Rendering Engine（内核）
  为给定的URL提供可视化的展示。它解析JavaScript、Html、Xml，并且User Interface中展示的layout。
• The Networking
  基于互联网HTTP和FTP协议，处理网络请求。
• The JavaScript Interpreter
  解释和运行网站上的js代码，得到的结果传输到Rendering Engine来展示
• The UI Backend
  用于绘制基本的窗口小部件，比如组合框和窗口。
• The Data Storage
  管理用户数据，例如书签、cookie和偏好设置等。

The Rendering Engine（浏览器内核）

一个tab页面一个内核进程，主要包括以下线程：

1. GUI 渲染线程：
   • HTML Parser，解析 HTML 文档，生成 DOM 树
   • CSS Parser，解析 Style 数据
   • Layout，计算 DOM 节点的准确位置
   • Painting，绘制页面
   • 页面重绘
2. JavaScript 引擎线程：
   • 解析 JavaScript ，运行代码
   • 等待任务队列中的任务到来，然后加以处理
   • 一个 Tab 页只有一个 JavaScript 引擎线程运行 JavaScript 程序
   • 与 GUI 渲染线程互斥，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞
3. 浏览器定时触发器线程
   • 浏览器的定时计数器通过单独线程来实现，避免了 JavaScript 线程被 GUI 渲染线程等原因阻塞而导致计时不准确的问题
4. 浏览器事件触发线程
   • 当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JavaScript 引擎的处理，事件包括：定时任务、鼠标点击、AJAX 异步请求等
5. 浏览器 http 异步请求线程
   • 在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求， 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript 引擎的处理队列中等待处理。

参考链接