浏览器工作原理

1,479 阅读7分钟

一、浏览器种类

  • 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

二、浏览器功能

  • 浏览器功能:
    • 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 元素。

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

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

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

解析

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

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

编译

  • 源代码=>(解析)=>解析树=>(翻译)=>机器代码

解析器生成器

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