浏览器工做原理

1、浏览器种类

• 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

2、浏览器功能

• 浏览器功能：
  • 一、向服务器发出请求
  • 二、在浏览器窗口中展现您选择的网络资源
  • 这里所说的资源通常是指HTML文档，PDF、图片、其余的类型。
  • 资源的位置：由用户使用 URI（统一资源标示符）指定。
• 浏览器解释显示规范：
  • 浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。
  • 这些规范由网络标准化组织 W3C（万维网联盟）进行维护。
  • 万恶之源：虽然制定了相应的规范，可是各浏览器都没有彻底听从这些规范，同时还在开发本身独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。
• 浏览器的界面用户元素
  • 用来输入 URI 的地址栏
  • 前进和后退按钮
  • 书签设置选项
  • 用于刷新和中止加载当前文档的刷新和中止按钮
  • 用于返回主页的主页按钮
• 浏览器的用户界面并无任何正式的规范，这是多年来的最佳实践天然发展以及彼此之间相互模仿的结果。

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 元素。

* 四、 网络 - 用于网络调用，好比HTTP请求。其接口与平台无关，并为全部平台提供底层实现。 * 五、 用户界面后端-用于绘制基本的窗口小部件，好比组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操做系统的用户界面方法。 * 六、 JavaScript解释器。用于解析和执行 JavaScript 代码。 * 七、 数据存储-这是持久层。浏览器须要在硬盘上保存各类数据，例如 Cookie。新的 HTML规范(HTML5)定义了“网络数据库”，这是一个完整（可是轻便）的浏览器内数据库。

• 和大多数浏览器不一样，Chrome浏览器的每一个标签页都分别对应一个呈现引擎实例。每一个标签页都是一个独立的进程

4、呈现引擎的主流程步骤

解析

• 解析文档是指将文档转化成为有意义的结构，也就是可以让代码理解和使用的结构。
• 解析是一个迭代的过程。
• 解析获得的结果一般是表明了文档结构的节点树，它称做解析树或者语法树

• 能够解析的格式都必须对应肯定的语法——这些语法由词汇和语法规则构成。人类语言并不属于这样的语言，所以没法用常规的解析技术进行解析。
• 解析过程分为：词法分析和语法分析
  • 词法分析：将输入内容分割成大量标记的过程。
    • 标记是语言中的词汇，即构成内容的单位。
    • 标记在人类语言中，它至关于语言字典中的单词。
  • 语法分析：是应用 语言的语法规则 的过程
• 解析器一般将解析工做分给如下两个组件来处理：
  • 词法分析器（有时也称为标记生成器），负责将输入内容分解成一个个有效标记；词法分析器知道如何将无关的字符（好比空格和换行符）分离出来
  • 解析器负责根据语言的语法规则分析文档的结构，从而构建解析树。
  • 解析器类型：
    • 自上而下解析器 ：从语法的高层结构出发，尝试从中找到匹配的结构
    • 自下而上解析器 ：从低层规则出发，将输入内容逐步转化为语法规则，直至知足高层规则。
• 原文档=>词法分析=>语法分析=>解析树

  

编译

• 源代码=>（解析）=>解析树=>（翻译）=>机器代码

解析器生成器

• WebKit 使用了两种很是有名的解析器生成器：
  • Flex: 用于建立词法分析器。Flex 的输入是包含标记的正则表达式定义的文件
  • Bison: 用于建立解析。Bison 的输入是采用 BNF 格式的语言语法规则。