浏览器工作过程详解（译）（二）

fasss 发布于2019-08-01 16:45 / 2824人阅读

摘要：每种可解析的格式必须具有由词汇及语法规则组成的特定的文法，这被称为上下文无关文法。解析器将会从词法分析器获取一个新符号，并且尝试用某一种语法规则去匹配它。第二个匹配到规则的是，它匹配到第三条语法规则。

衔接

接着上文继续。

在构建好render树后，浏览器就开始进行布局了。这意味着浏览器会给每个节点正确的坐标，让它们出现在该出现的地方。下一步就是进行绘制了，浏览器将会遍历render树，每一个节点都会被UI后端层所绘制。

很重要的一点是，这整个过程是渐进性的。为了更好的用户体验，渲染引擎会尽快地解析内容到屏幕上。它并不会等到html完全被解析才开始创建和布局render树。一部分内容被解析了，那它就会立刻被绘制到页面上，这这个过程中，浏览器可能还在请求剩余部分的内容。

主要流程实例

图3 ：Webkit 主要流程

图4 ：Mozilla 的Gecko渲染引擎主要流程

从图3和图4你可以看到，虽然Webkit和Gecko在某些术语上稍有不同，但是主要流程是基本相同的。

Gecko把可见的格式化元素组成的树为“Frame”树。每一个元素都是一个frame。Webkit则把每一个渲染对象组成的树称为render树。对每一个元素的定位，Webkit称为布局，而Gecko称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。下面将讨论流程中的各个阶段。

解析

解析是渲染引擎执行过程中非常重要的部分，我们将会稍微深入地去探讨一下。让我们先来简单介绍一下什么是解析。

解析一个文档意味着需要将内容翻译成某种编码能够理解和使用的结构。而解析的结果通常是能够表达文档结构的节点树。它被称为解析树或语法树。

举例来说，解析表达式“2+3-1”，应该返回如下的树：

图5:数学表达式的树结构

语法

解析过程依赖于文档遵从的语法规则——文档的语言或格式。每种可解析的格式必须具有由词汇及语法规则组成的特定的文法，这被称为上下文无关文法。人类的语言不具有这一特点，所以不能被常规的解析技术所解析。

解析器－词法分析器

解析过程可以被分为两个过程－词法分析和语法分析。

词法分析是把输入解释成符号的过程，而符号，是组成语言的基本有效单元。它相当于字典中所有的单词，用以组成和表现人类语言。

语法分析是指应用语法规则。

通常情况下，解析器将工作分配给两个组件－词法分析器（有时也被称作标记解析器）主要负责把输入分解成合法的符号，语法分析器主要负责依靠语法规则来分析文档结构，并构建出解析树。词法分析器知道如何跳过类似空白符或者换行符之类的无关字符。

图6:从源文档到解析树

解析过程是重复迭代的。解析器将会从词法分析器获取一个新符号，并且尝试用某一种语法规则去匹配它。如果有规则匹配到了，那么该符号相应的节点将会被添加到解析树中，然后解析器会接着解析下一个符号。

如果没有规则可以匹配该符号，解析器将会在内部保存下这个符号，并继续获取下一个符号，直到有一条语法规则可以匹配所有内部存储的符号。如果到最后还是没有找到能够匹配的规则，那么解析器将会抛出一个异常。这意味着该文档不合法或者有语法错误。

转换过程

通常情况下，解析树并不是最终的结果。解析通常在转换过程中使用，而转换用于将输入文档转成另一种格式。编译过程就是一个例子。编译器将源代码编译成机器码时，首先做的就是把它解析成解析树，然后再将解析树转化成机器码文档。

图7:编译流程

解析实例

在图5中，我们基于一段数学表达式创建了一棵解析树。让我们来尝试定义一门简单的数学语言，然后看看解析过程。

词汇表：我们的语言包括了整数、加号和减号。

语法：

我们的语言的基本组成时表达式、术语和操作符

可以包含多个表达式

两个术语（term）通过操作符连接，这就形成一个表达式

操作符只能是加号或减号

一个术语（term）只能是一个整数或者一个表达式

让我们来分析一下输入“2+3-1”后发生了什么。

第一个匹配到规则的子串是“2”，根据规则5，它是一个术语（term）。第二个匹配到规则的是“2+3”，它匹配到第三条语法规则。下一次匹配将会在这个输入的最后。“2+3-1”是一段表达式，因为我们已经知道“2+3”是一个术语（term），接下去的“－”是一个操作符，再后面“1”是一个整数，也就是术语（term），这匹配了规则3。而“2++”不会匹配任何语法，所以它是一个非法输入。

私有云专线服务存储过程详解 linux启动过程详解服务器开机过程详解 web服务器的工作过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50724.html

浏览器工作过程详解（译）（一）

摘要：值得注意的是，谷歌浏览器和大多数浏览器不同，每一个选项卡都是渲染引擎的一个实例，都拥有独立的进程。组件之间的通信火狐和谷歌都发展了一个特殊的通信结构，后面我们将会单独来讲。渲染引擎我们所讨论的几款浏览器火狐谷歌都是基于两种渲染引擎建立的。写在前面这篇文章是一篇译文，年代有点久，部分内容有过时，请读者仔细阅读，翻译自How browser work，原文地址为点击这里查看原文简介 ...

陈江龙 2019-08-20 15:51 评论0 收藏0
AI学习路线

摘要：针对公司样本不足，采用小样本技术和深度学习技术结合，是项目落地的解决方案。深度学习作为当前机器学习领域最热门的技术之一，已经在图像处理领域获得了应用，并且展现出巨大的前景。旨在帮助同学们快速上手如何使用库来完整机器学习案例。阶段一、人工智能基础－　高等数学必知必会本阶段主要从数据分析、概率论和线性代数及矩阵和凸优化这四大块讲解基础，旨在训练大家逻辑能力，分析能力。拥有良好的数学基...

xuweijian 2019-07-25 12:27 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0