"How Browsers Work: Behind the Scenes of Modern Web Browsers"学习笔记

      最近这两天在看 How Browsers Work: Behind the Scenes of Modern Web Browsers 。文章中以Firefox, Safari, Google Chrome为例介绍了现代浏览器的工作原理。（IE6已死，这是我个人观点，原文中并为提及此）

      浏览器包含User Interface, Browse Engine, Rendering Engine, Networking, UI Backend, JavaScript Interpreter, Data Storage，如下图：

      文章重点介绍了Rendering Engine的工作原理。它的工作包括：解析HTML来构造DOM树，构造渲染树，布局渲染树，绘制渲染树。我自己的中文翻译不太准确，具体见下图

      在Parsing HTML阶段，Rendering Engine首先解析构造出一棵DOM tree，然后根据CSS生成相应的Style Rules。Rendering Engine利用Style Rules将DOM tree的节点转化成Render tree上的节点。Parsing的时候需要进行Lexical Analysis和Syntax Analysis，这样就可以构造出一棵Parse tree。但是Parse tree不能被机器直接理解，需要将其翻译成机器可以理解的编码。Parsing用到了很多计算理论的原理，如上下文无关文法，正则表达式，自动机。（大学时这门课没学好，惭愧啊！）解析HTML和CSS参照的是W3C发布的相关spec。

      构造好的Render tree是一棵包含一个个矩形的树，这些矩形含有诸如颜色和坐标维度等信息。这些矩形的排列顺序代表了以后显示时的绘制顺序。有了Render tree，解下来的工作就是布局，布局就是将Render tree的每个节点放在屏幕上的合适位置。布局的过程是一个递归过程，从Render树的根开始，递归的遍历每棵子树。布局完成后就是绘制工作了。绘制时调用了UI backend层的绘制方法将Render tree绘制在屏幕上。为了提高效率，浏览器采用了dirty bit system，意即指重新布局和绘制那些改动的部分。除非一些全局的改变，如字体大小的改变，屏幕的缩放，不得不将整个屏幕重新布局和绘制。值得一提的是Rendering Engine的工作是一个渐进的过程：浏览器不会等到通过网络获取所有的资源后才开始parsing，rendering，layout，painting。它会将已经获得的资源呈现给用户，同时继续通过网络获取剩余资源用于绘制剩下的网页内容。以Webkit为例，Rendering Engine的工作流程如下图所示：

      在iOS上我用过的浏览器包括Safari，Opera Mini，和UC浏览器。总体感觉Safari和Opera Mini的Rendering Engine的工作优于UC浏览器。Safari和Opera Mini可以绘制出布局很漂亮的网页，相同的网页到了UC浏览器上就变的布局难看，绘制粗糙。也许是UC浏览器为了节省流量不得已而为之，待求证。