现代浏览器基础架构

[bojue]

Chrome 浏览器的基础架构

浏览器结构的组成

1. User Inferface
2. Browser engine
3. Rendering Engine
4. Networking
5. JavaScript Interpreter
6. UI Backend
7. Data Storage

1. User Inferface

提供用户和Browser Engine交互的方法。包括了输入框，向前，向后，书签等等

2. Browser Engine

• 协调UI和渲染引擎，处理他们之间的传输指令。
• 对渲染引擎提供接口，提供初始化url加载和刷新，向前，后退等方法；
• 为User Inferface提供保存，加载进度等相关信息

3. Rendering Engine

为给定的URL资源提供渲染展示。

解析HTML解析器处理HTML/XML资源生成DOM Tree，CSS解析器解析CSS资源生成样式规则树，DOM Tree和样式规则树合并生成渲染树进行渲染。JavaScript解析器可以通过修改DOM的内容或者CSS样式，触发重新渲染过程，生成新的渲染结果。

4. Networking

基于HTTP和FTP协议，处理HTTP等网络请求。并提供资源缓存，减少网络传输。

5. JavaScript Interpreter

解析和执行JavaScript代码，将输出结果传输到Rndering Engine 来展示。

6.UI Backend

绘制基本的窗口组件，比如组合框和窗口。

7. Data Storage

管理和持久化存储用户数据的功能，其中包括：

• 书签
• Web SQL
• Local Storage
• Session Storage
• IndexedDB
• Cookies

参考

• 浅析前端页面渲染机制
• 现代浏览器的一些主要功能