"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,如下图:

Browser main components

      文章重点介绍了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的工作流程如下图所示:

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

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

你可能感兴趣的:(browser)