走进浏览器内部—剖析浏览器是如何工作的（上）

最近工作需要一直在和浏览器打交道。每天都为如何处理那些浏览器间的兼容性而困扰。时间长了自然而然对浏览器也产生了感情。准备学习学习，自己写个浏览器。为此开始学习了 Rust，一门用于写底层，但看上去又像高级语言的语言。希望 Rust 能有美好的明天，我也跟着受益。

想了想，要写浏览器，首先应该理解一下浏览器内部机制。今天先放下代码，带大家一起走进浏览器，看看浏览器是如何将网页呈现给您的。

绑定：使用系统级别的 API，将内存中位图绘制到指定窗口（标签对应的网页视图）上。

渲染：解析 html 和 css 生成渲染树，将合并后，将渲染树绘制到屏幕上呈现给客户。

平台：兼容（适配）到不同的操作系统

javascript VM ：以后单讲，准备写个demo

首先将 HTML 和 CSS 解析为肯定的数据结构（渲染对象），而后再将渲染对象按肯定规则（就是将 style 树 合并到 dom 树上）形成渲染树，接下来对生成渲染树各个节点进行布局（也就是按 dom 节点的位置信息进行排版），最后读取渲染树，绘制成图片放到屏幕上。

HTML 的解析

首先浏览器是以超强纠错形式来解析 html，即使 html 有错误，浏览器也相对智能地将 html 进行解析，所以说对 html 的解析不是一般简单解析工作，html 解析要相对复杂。在解析过程是可以被 js 或者其余起因所中断的。例如网络不畅通，link 和 style 标签加载，相对高级的浏览器为提高效率，提供肯定进程进行预解析，也可以加载图这样耗时的工作可以另一个进程中完成

Parser 和 Tokenizer 其实只是把无意义的字符流变得有某种意义而已。Parse 这个词其实可以用在很多的地方，比方说只需你能在一个字符流中标识出所有的字符 a，你就在做 Tokenize 和 Parse。你可以看得出，Parse 和 Tokenize 有多难实际是针对编程的人的目的来说的。

一般解析完了这种形式

html

|—–head

—–body

|— p. wat

|? ? ? ? #text

—- div

—- span

—- #text

HTMLHtmlElement

|—–HTMLHeadElement

—–HTMLBodyElement

|— HTMLParagraphElement

|? ? ? —-Text

? ? ? ? —- HTMLDivElement

? ? ? ? ? ? ? ? —- HTMLSpanElement

? ? ? ? ? ? ? ? ? ? ? —- Text

下面例子只为说明浏览器解析 html 时的纠错能力，html 中错误显而易见，我就不逐个指出了。

javascript 是可以介入 html 解析过程中，如下图。