首先浏览器是一个软件,就和qq,wechat,没什么差别,只是功能不一样。qq,wechat是社交类,而浏览器就是专门用来访问和浏览万维网页面的客户端软件。
浏览器结构:
1. User Interface(用户界面):
包括工具栏、地址栏、前进/后退按钮、书签菜单、可视化页面加载进度、智能下载处理、首选项、打印等。除了浏览器主窗口显示请求的页面之外,其他显示的部分都属于用户界面。
2. Browser engine(浏览器引擎):
浏览器引擎是一个可嵌入的组件,其为渲染引擎提供高级接口。
浏览器引擎可以加载一个给定的URI,并支持诸如:前进/后退/重新加载等浏览操作。
浏览器引擎提供查看浏览会话的各个方面的挂钩,例如:当前页面加载进度、JavaScript alert。
浏览器引擎还允许查询/修改渲染引擎设置。
3. Rendering Engine(渲染引擎):
渲染引擎为指定的URI生成可视化的表示。
渲染引擎能够显示HTML和XML文档,可选择CSS样式,以及嵌入式内容(如图片)。
渲染引擎能够准确计算页面布局,可使用“回流”算法逐步调整页面元素的位置。
渲染引擎内部包含HTML解析器。
Chrome为每个Tab分配了各自的渲染引擎实例,每个Tab就是一个独立的进程。
4. Networking(网络)
网络系统实现HTTP和FTP等文件传输协议。 网络系统可以在不同的字符集之间进行转换,为文件解析MIME媒体类型。 网络系统可以实现最近检索资源的缓存功能(前端小伙伴了解下,方便面试)。
5. JavaScript Interpreter(JS解释器)
JavaScript解释器能够解释并执行嵌入在网页中的JavaScript(又称ECMAScript)代码。 为了安全起见,浏览器引擎或渲染引擎可能会禁用某些JavaScript功能,如弹出窗口的打开。
6. XML Parser(XML解析器)
XML解析器可以将XML文档解析成文档对象模型(Document Object Model,DOM)树。 XML解析器是浏览器架构中复用最多的子系统之一,几乎所有的浏览器实现都利用现有的XML解析器,而不是从头开始创建自己的XML解析器
功能相似的HTML解析器和XML解析器为什么前者划分在渲染引擎中,后者作为独立的系统?
XML解析器对于系统来说,其功能并不是关键性的,但是从复用角度来说,XML解析器是一个通用的,可重用的组件,具有标准的,定义明确的接口。相比之下,HTML解析器通常与渲染引擎紧耦合。
7. UI Backend(显示后端)
用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。
8. Data Persistence(数据持久层)
数据持久层将与浏览会话相关联的各种数据存储在硬盘上。 这些数据可能是诸如:书签、工具栏设置等这样的高级数据,也可能是诸如:Cookie,安全证书、缓存等这样的低级数据(前端小伙伴了解下,面试用来吹)。
浏览器内核:
浏览器内核负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。
浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
内核分为两个部分:渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎
1. 渲染引擎
负责请求网络页面资源加以解析排版并呈现给用户,渲染引擎可以显示html、xml文档及图片,它也可以借助插件显示其他类型数据,例如使用PDF阅读器插件,可以显示PDF格式。
2. js引擎
JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。
3. 当前主流内核
Trident ([‘traɪd(ə)nt]):普遍称作 “IE内核”
该内核程序在 1997 年的 IE4 中首次被采用,是微软在 Mosaic(”马赛克”,这是人类历史上第一个浏览器,从此网页可以在图形界面的窗口浏览) 代码的基础之上修改而来的,并沿用到 IE11,也被普遍称作 “IE内核”。
IE 从版本 11 开始,初步支持 WebGL 技术。IE8 的 JavaScript 引擎是 Jscript,IE9 开始用 Chakra,这两个版本区别很大,Chakra 无论是速度和标准化方面都很出色。
Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。
Gecko ([‘gekəʊ]):Firefox 内核
Gecko 内核的浏览器Firefox (火狐) 用户最多,所以有时也会被称为 Firefox 内核,此外 Gecko 也是一个跨平台内核,可以在Windows、 BSD、Linux 和 Mac OS X 中使用。
Webkit:
ebkit内核 可以说是以硬件盈利为主的苹果公司给软件行业的最大贡献之一。随后,2008 年谷歌公司发布 chrome 浏览器,采用的 chromium 内核便 fork 了 Webkit。
Chromium/Blink:
2008 年,谷歌公司发布了 chrome 浏览器,浏览器使用的内核被命名为 chromium。
chromium fork 自开源引擎 webkit,却把 WebKit 的代码梳理得可读性提高很多,所以以前可能需要一天进行编译的代码,现在只要两个小时就能搞定。因此 Chromium 引擎和其它基于 WebKit 的引擎所渲染页面的效果也是有出入的。所以有些地方会把 chromium 引擎和 webkit 区分开来单独介绍,而有的文章把 chromium 归入 webkit 引擎中,都是有一定道理的。
谷歌公司还研发了自己的 Javascript 引擎,V8,极大地提高了 Javascript 的运算速度。
Blink 引擎问世后,国产各种 chrome 系的浏览器也纷纷投入 Blink 的怀抱。
Presto ([‘prestəʊ]):opera 的 “前任” 内核
为何说是 “前任”,因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌大本营。
注释:Webkit 其实是 KHTML 的分支,这里的 KHTML 指渲染引擎,Webkit 其实就泛指了 Webkit 的渲染引擎 WebCore,而 Webkit 引擎的 Javascript 引擎 JSCore 则是 KJS 的分支。而 chrome 则搭载了自己的 Javascript 引擎 V8。引用 各主流浏览器内核介绍 里的一段话:我们上面提到 Chrome 是基于 WebKit 的分支,而 WebKit 又由渲染引擎 “WebCore” 和 JS 解释引擎 “JSCore” 组成,可能会让你搞不清 V8 和 JSCore 的关系。你可以这样理解—— WebKit 是一块主板,JSCore 是一块可拆卸的内存条,谷歌实际上认为 Webkit 中的 JSCore 不够好,才自己搞了一个 V8 JS 引擎,这就是 Chrome 比 Safari 在某些 JS 测试中效率更高的原因。
参考文献:
1. 主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)
2. 主流浏览器内核介绍
3. 深入理解浏览器工作原理
4. 万维网百科