关于对Fast and Parallel Webpage Layout 这篇论文的总结

Fast and Parallel Webpage Layout   快速并行的网页布局的算法设计

论文的原文网址:http://www.eecs.berkeley.edu/~lmeyerov/projects/pbrowser/pubfiles/playout.pdf


1)论文解决了什么问题

在手机上,浏览网页的速度很慢,这是因为手机的CPU的处理能力有限,在网页文档的渲染过程中需要花费很多的时间。本文的作者就是针对这一情况,提出一种快速布局引擎的关键组件的算法,该算法在CSS选择器匹配,解决布局和字体渲染方面有很大的改进。与普通的算法相比,访问网站的速度可以提高到80%

在一般的浏览器上,浏览器增加了CPU的负担。Internet的浏览器还safari来渲染可视化布局上平均需要花费40-70%的处理器的时间。在现在目前的手机的硬件架构地下,处理器的资源是有限的,所以需要用软件的方法对浏览器进行性能的优化。

而浏览器在下载网页时最耗费的时间有三个方面:

1、选择器的匹配问题 

2、布局的处理 

3、文本的渲染问题。

本文的作者针对这种情况设计了三个算法,解决了上述的问题。其算法的最大的特点就是并行性。即提出了用并行的方式来解决上述的三个问题,使得手机的浏览器在浏览网页的速度提高。

2)为什么这个问题重要?

随着手机设备越来越普及,移动互联网的发展,人们用手机上网越来越经常,但是人们在使用浏览器浏览手机网页的时候,却需要等待很长的时间,网页下载速度过慢。还有就是很多的门户网站,像facebook,为了适应手机设备,需要重新对网站进行优化处理,这当中需要耗费大量的人力和财力。

在本文的作者的研究中,发现了浏览器在渲染网页的时候,最耗费的时间的部分是网页布局的方面。作者通过估计下面的任务:1FLASH 渲染和FLASH 虚拟机插件,处理HTTP通信的网络库,解析CSS和构建JavaScript的字节码,还有JavaScript的执行表现。下面这张图是作者的经过一番的试验,测试统计出来的数据。

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第1张图片

作者发现网页的耗费的时间并不是JavaScript的执行时间,该时间至多仅占7%,而大部分的时间是耗费在解析JavaScript任务相关方面。所以研究如何优化在网页布局渲染的时候所耗费的时间显得格外的重要。

3)用何种方法解决的?

本文的作者提出一个并行处理的网页布局的方法,主要是CSS选择器,布局处理,字体处理上,进行算法的优化。作为输入是:一个包含html树的文本,一序列和html节点相关的CSS规则,一序列的字体文件,输出是:计算每个元素的绝对位置。

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第2张图片

算法共有三部分:

第一部分是:选择器的匹配。决定哪种风格与每个html节点向对应。

本人作者基于两个假设,进行简化算法描述。

1、选择器的语言仅限为一种

2、每个分取都可以分解成多个选择器。伪码描述如下:

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第3张图片

首先采用哈希表将选择器的属性相关联,然后在超过3个文档中,对选择器的节点进行匹配,最后将执行后的结果进行格式化。

在优化方面,作者采用如下的几个步骤:

1、 构建哈希表  

2、 选择器的匹配从右向左 

3、 消除多余的选择器  

4、 哈希表拼接  

5、 断词

6、 并行文档的遍历 

7、 随机的负载均衡   

8、 时集合插入 

9、 不是采用STL模板,而是采用容器。

第二部分是:框架和文本布局。解决布局规约问题。

本文的作者主要做出如下三点贡献:

1、解决如何将布局分解成多个并行的通道

2、为CSS提供了一个基本的规格描述。避免两种浏览器在解释CSS出现不一致的情况

3、证明了布局的处理所耗费的时间是线性的。

首先作者在BBS0规约中,为了更加直接的表示,作者用一个属性语法去规约布局问题。BBS0相当于如下图:

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第4张图片

在属性语法中,属性是在每个被遍历的节点中。属性分成为了综合属性和继承属性两种。在一般的属性语法中,每个属性需要重新被同一个节点所遍历,而且可能在遍历完之后,发现没有可用的语义。作者提出了如下并行算法:

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第5张图片

定义了并行遍历函数,该函数调用了布局计算函数。每个语法是在下一个到来之前,都是被充分处理的。为了处理一个语法,递归地遍历一棵重复的树:在节点中计算一个继承属性,当处理孩子节点上的综合属性处理完成的时候,一个任务才被开启。

第三步:字体的处理。决定网页中节点需要的字体特征。

在本文作者的算法中,对于同样的字符出现,并不需要重新去读取,而是直接从缓存中去读取,从减少了读取的时间。在网页的字体的渲染中,采用并行的方式去调用。算法分3步进行实现:

1、 创建了一序列需要的字体集合

2、 将字体信息组合在一起

3、 并行地处理这些信息

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第6张图片

本文作者提出了上述的这三种算法,解决了手机浏览器的三大瓶颈,可以说是手机浏览器设计的一个里程碑。


4)这种方法为什么是有效的?

首先本文的作者提出了当前手机的浏览器的发展中遇到的三大技术瓶颈:

1、选择器的匹配效率低的问题 

2、布局约束问题。  

3、文本渲染的处理效率低问题。

针对主流的浏览器对这三瓶颈进行了分析。然后提出了并行处理的方式来解决这三大瓶颈问题。

1、 选择器的匹配问题,按照作者的算法,其效率可以比原先的算法的效率,为此,作者进行了算法效率的统计,统计结果如下:

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第7张图片

这说明作者的方法确实有效,有效的原因如下:

1)、哈希表的结构进行存储选择器的属性,使得选择器的属性查询的速度大大的提高。

2)、采用了从右向左匹配的方法,因为大部分的选择器只需要检查后缀即可进行匹配,这样可以大大提高了解析的效率。 

3)、淘汰冗余的选择器。由于在选择器的语言弱抽象的机制,很多规则经常使用同一选择器,需要同样节点,通过淘汰这些相同了,可以提高性能。

5)、并行的文档遍历。使用了work-stealing 库来分配一个大的内核数组,来支持并行遍历。这样可以减少遍历所耗费的时间。

   2、 布局约束问题。

       在布局约束中,作者采用并行处理的方式。对每个环节进行加速处理。具体如何加速加速处理看上述的伪代码。对算法的性能进行评估时, 发现用作者的算法在布局处理的时候仅耗费了1-2ms,而其他算法在文本布局则耗费了5ms。作者的算法可以提高了2-3%的加速。通过更加复杂的模型测试,发现在3核可以达到4%的加速。这种方法之所以有效,是因为核的增多,并行处理就越强。从下面这张图可以看出:

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第8张图片

3解决文本渲染的处理效率低问题的方法有效的原因。

   为了解决这个问题,作者的提出了如下算法:对于同样的字符出现,并不需要重新去读取,而是直接从缓存中去读取。并行的方式去进行加速处理,该算法的效率如下图所示:

关于对Fast and Parallel Webpage Layout 这篇论文的总结_第9张图片

该方法有效的原因和上述的问题一致,这里就不需要赘述,其根源都是并行可以提高效率。

5)你对这篇文章有什么看法?

本篇论文,采用并行的方法,一口气解决了手机浏览器的三大瓶颈问题,即1、选择器的匹配  2、布局处理  3、字体处理。为每个问题都设计了解决的算法,而且都提高了效率。而且值得注意的是,作者对每个算法的性能都进行详细地分析,用大量的实验数据说明自己的算法是有效的。

在“文本渲染”这一方面,作者给出的算法显得有些单薄,只是一笔带过,并没有很明确地说明这些算法是实现的。可能是限于篇幅的原因,作者没有具体地写。

作者的工作态度非常严禁,在评估自己的算法的效率的时候,对每个因素都加以考量,而不是笼统地说自己的算法好,而是用数据作为支撑来论述自己的算法是一种突破,并且敢于说出自己的研究工作是一个里程碑的进步。对于作者这种内在的自信,也很让人佩服啊!

这是一篇非常好的学术论文,本人看这篇论文很多遍,必须承认在读别人的算法是非常费劲,要推敲前后文之间的关系,学习到不少东西啊!

通过学习了这一篇论文,对自己以后写算法型的论文有很大的帮助,可以学习前辈们是如何去写论文的,学习人家思考问题的方法。

你可能感兴趣的:(JavaScript,算法,浏览器,layout,手机,parallel)