1-浏览器架构-原理篇
我们都知道浏览器的功能,就是向服务器发送请求,然后在浏览器窗口中展示对应请求回来的网络资源。
那一个经典的前端面试题来说:「在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么?」
我的记忆点中,更多的是如何查询对应的 IP,然后发送请求到服务器,然后在渲染就结束了,不知你是不是这样?
可往往我们好像忽视了,当代浏览器那些细微的交互点,如 tab 上的 spinner 的展现。为了能慢慢的理解上述的问题,我们首先一起理一下浏览器这款软件中到底有有什么吧。
当代现有的浏览器主要由用户界面(The user interface)、浏览器引擎(The browser engine)、呈现引擎(The rendering engine)、网络(Networking)、JavasScript 解释器(JavaScript interpreter)、用户界面后端(UI backend)、数据存储组成(Data storage)。
而这些组件的功能如下:
- 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
- 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
- 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
- 网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
- 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
- JavaScript 解释器。用于解析和执行 JavaScript 代码。
- 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。
根据前置知识可知:软件是由其中进程可以运行的。那么如果想写一款浏览器的话,我们有两种实现思路,要么实现为单进程多线程模式,要么实现为多进程模式。
那我们常用的浏览器是属于哪种模式呢?