浏览器组成

 首先浏览器是一个软件,就和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. 万维网百科

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容

  • 内核 首先得搞懂浏览器内核究竟指的是什么。 浏览器内核又可以分成两部分:渲染引擎(layout engineer ...
    一直以来都很好阅读 790评论 0 1
  • 内核 首先得搞懂浏览器内核究竟指的是什么。浏览器内核又可以分成两部分:渲染引擎(layout engineer 或...
    李仁平阅读 653评论 0 2
  • 浏览器内核(browser kernel)是浏览器最为核心的部分,国内的浏览器(诸如360,QQ,搜狗)大多数用了...
    沉落的星星阅读 3,727评论 1 8
  • 内核 首先得搞懂浏览器内核指的是什么 浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Re...
    闻金听凤阅读 934评论 0 0
  • 第一次参加水上的训练项目,进水的时候觉着自己就要漂浮起来,出水的时候又觉得又千斤重,奇妙的感觉。像是五行缺水啊,水...
    星星de海子阅读 103评论 0 0