一、浏览器种类
- IE （internet Explorer）浏览器
- Firefox 火狐浏览器
- Chrome 谷歌浏览器
- Safari 浏览器
- Opera 浏览器
谈谈几种浏览器的内核
- 内核只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”
- 它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机
- 所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。
-
内核种类
-
Trident
- 这是微软开发的一种排版引擎。
- 有时候，为了方便也有很多人直接简称其为IE内核
-
IE、Maxthon、TT、The World
-
Geckos
- Gecko是套开放源代码的、以C++编写的网页排版引擎。
-
FireFox
-
Presto
- Presto是一个由Opera Software开发的浏览器排版引擎
-
Opera
-
Webkit
- 苹果公司自己的内核，也是苹果的Safari浏览器使用的内核
- Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎
-
Safari、Chrome
-
Trident
二、浏览器功能
-
浏览器功能：
-
1、向服务器发出请求
-
-
2、在浏览器窗口中展示您选择的网络资源
-
这里所说的资源一般是指
HTML文档，PDF、图片、其他的类型
。 - 资源的位置：由用户使用 URI（统一资源标示符）指定。
浏览器解释显示规范：
- 浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。
- 这些规范由网络标准化组织 W3C（万维网联盟）进行维护。
-
万恶之源：
虽然制定了相应的规范，但是各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。
浏览器的界面用户元素
- 用来输入 URI 的地址栏
- 前进和后退按钮
- 书签设置选项
- 用于刷新和停止加载当前文档的刷新和停止按钮
- 用于返回主页的主页按钮
浏览器的用户界面并没有任何正式的规范，这是多年来的最佳实践自然发展以及彼此之间
相互模仿
的结果。
三、浏览器构成
-
浏览器主要组件
-
1、
用户界面
-包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。 -
2、
浏览器引擎
– 在用户界面和呈现引擎之间
传送指令
。 -
3、
呈现引擎
– 负责显示请求的内容。- 如果请求的内容是HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
- 默认情况下，呈现引擎可显示 HTML 和 XML 文档与图片。通过插件（或浏览器扩展程序），还可以显示其他类型的内容；例如，使用 PDF 查看器插件就能显示 PDF 文档。
-
两种常用的呈现引擎：
gecko webkit
- gecko 火狐Firefox 这是 Mozilla 公司“自制”的呈现引擎。
- WebKit 是一种开放源代码呈现引擎，起初用于 Linux 平台，随后由 Apple 公司进行修改，从而支持苹果机和 Windows。
-
呈现引擎的基本流程
-
这是一个
渐进的过程
。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来-
解析
HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点 -
呈现
– 解析外部 CSS 文件以及样式元素中的样式数据、HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树 。呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。 -
布局
-也就是为每个节点分配一个应出现在屏幕上的确切坐标。 -
绘制
-呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。在绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。
-
webkit 主流程
-
呈现树
它由“呈现对象”组成 -
布局
元素的放置 -
附加
连接 DOM 节点和可视化信息从而创建呈现树的过程
Gecko 主流程
-
框架树
Gecko将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架 -
重排
元素的放置 - Gecko 在 HTML 与 DOM 树之间还有一个称为“内容槽”的层，用于生成 DOM 元素。
-
1、
* 4、
网络
– 用于网络调用，比如HTTP请求。其接口与平台无关，并为所有平台提供底层实现。 * 5、
用户界面后端
-用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。 * 6、
JavaScript解释器
。用于解析和执行 JavaScript 代码。 * 7、
数据存储
-这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML规范(HTML5)定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
-
和大多数浏览器不同，
Chrome浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程
四、呈现引擎的主流程步骤
解析
- 解析文档是指将文档转化成为有意义的结构，也就是可让代码理解和使用的结构。
- 解析是一个迭代的过程。
- 解析得到的结果通常是代表了文档结构的节点树，它称作解析树或者语法树
- 可以解析的格式都必须对应确定的语法——这些语法由词汇和语法规则构成。人类语言并不属于这样的语言，因此无法用常规的解析技术进行解析。
-
解析过程分为：
词法分析
和
语法分析
-
词法分析
：将输入内容分割成
大量标记
的过程。- 标记是语言中的词汇，即构成内容的单位。
- 标记在人类语言中，它相当于语言字典中的单词。
-
语法分析
：是应用
语言的语法规则
的过程
-
-
解析器通常将解析工作分给以下两个组件来处理：
-
词法分析器
（有时也称为标记生成器），负责将输入内容分解成一个个有效标记；词法分析器知道如何将无关的字符（比如空格和换行符）分离出来 -
解析器
负责根据语言的语法规则分析文档的结构，从而构建解析树。 -
解析器类型：
-
自上而下解析器
：从语法的高层结构出发，尝试从中找到匹配的结构 -
自下而上解析器
：从低层规则出发，将输入内容逐步转化为语法规则，直至满足高层规则。
-
-
-
原文档=>词法分析=>语法分析=>解析树
编译
-
源代码=>（解析）=>解析树=>（翻译）=>机器代码
解析器生成器
-
WebKit 使用了两种非常有名的解析器生成器：
-
Flex
: 用于创建词法分析器。Flex 的输入是包含标记的正则表达式定义的文件 -
Bison
: 用于创建解析。Bison 的输入是采用 BNF 格式的语言语法规则。
-