浏览器工作原理

- 日理万妓 2022-01-20 00:35 356阅读 0赞

### 一、浏览器种类 ###

*  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 格式的语言语法规则。