html显示二进制图片_浏览器中的页面是怎么显示出来的？（上）

玩转二进制

玩转二进制编译

编辑：lwii

本文的目的是用非常通俗的方式来说明浏览器将HTML，CSS和JavaScript转换为可以与之交互的工作网站所采取的步骤。了解这个过程后，你就清楚如何优化你的Web应用，以提高页面的速度和性能。

不过在分析该过程之前，我们要先了解一些很重要基本知识。首先，浏览器是一个软件，从远程服务器(或者本地磁盘)将文件加载、显示并与用户交互。

其中、浏览器执最为核心的是渲染引擎和JavaScript引擎。由于JS引擎越来越独立，浏览器内核就倾向于单指 渲染引擎。不同的浏览器制造商以不同的名称称呼其引擎。

例如：Firefox渲染引擎是Gecko，js引擎是SpiderMonkey，safari渲染引擎是webkit，js引擎是Javascriptcore，Chrome渲染引擎是Blink(是Webkit的分支)，js引擎是大名鼎鼎的 V8。Opera渲染引擎是Blink(以前是Presto)，js引擎是Carakan，这里只是名字，我们只需要了解。

我们知道，数据是通过Internet以大小为字节的“数据包”形式发送的。这里说明的是，当我们编写一些HTML，CSS和JS并尝试在浏览器中打开HTML文件时，浏览器将从硬盘(或网络)中读取HTML的原始字节。而不是我们编写的代码的实际字符。

浏览器接收到数据字节，但实际上无法执行任何操作。数据的原始字节必须转换为它可以理解的格式。浏览器可以理解的格式是什么样子的？它就是文档对象模型(DOM)，DOM 就是对 HTML 文档结构化的表述，是生成页面的基础数据结构。那数据的原始字节怎么转换为DOM？这里面就离不开解析了，解析文档是指将文档转化成为有意义的结构，也就是可让代码理解和使用的结构。

1.解析HTML文件

当浏览器获得了资源以后要进行的第一步工作就是 HTML 解析(解释)器，它由几个步骤组成:编码、令牌化、节点和构建DOM树。

首先，将数据的原始HTML字节(二进制)转换为字符。这时我们可能会看到我们编写代码的字符，该转换是基于html文件的字符编码完成的。此时，浏览器已从原始数据字节变为文件中的实际字符。但是浏览器还是不能识别，

下一步这些字符被分词器进一步解析为Token(令牌或标记)，那么，Token是什么？我们知道，HTML 使用“标记”来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。html文本在解析过程中，尤其是在标记化期间，将在“”中包裹的元素名提取为标签，文件中的每个开始和结束的标签都会被考虑在内。

分词器理解 < 和 >，遇到字符 接收一个 a-z 字符会创建“起始标记”，状态更改为“标记名称状态”。这个状态会一直保持到接收 > 字符。在此期间接收的每个字符都会附加到新的标记名称上。在本例中，我们创建的标记是 html 标记。

遇到 > 标记时，会发送当前的标记，状态改回“数据状态”。 标记也会进行同样的处理。目前 html 和 body 标记均已发出。现在我们回到“数据状态”。接收到 Hello world 中的 H 字符时，将创建并发送字符标记，直到接收  中的 我们将为 Hello world 中的每个字符都发送一个字符标记。

现在我们回到“标记打开状态”。接收下一个输入字符 / 时，会创建 end tag token 并改为“标记名称状态”。我们会再次保持这个状态，直到接收 >。然后将发送新的标记，并回到“数据状态”。