一种基于网页相似度的浏览器渲染优化方法
【专利摘要】一种基于网页相似度的浏览器渲染优化方法，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。利用本发明提供的技术方案，可以减少浏览器在加载网页时候的冗余计算，提高了网页的加载速度，增强了浏览器的性能。
【专利说明】—种基于网页相似度的浏览器渲染优化方法
【技术领域】
[0001]本发明提供一种浏览器渲染优化的方法，具体涉及一种基于网页之间相似度来进行缓存和重用浏览器中间计算结果的方法。
【背景技术】
[0002]随着移动平台和HTML5的发展，浏览器的功能越来越强大，但是浏览器的性能一直不够令人满意。影响浏览器的性能主要有两个因素，一个是网络带宽，一个是浏览器在本地的计算和处理速度。网络带宽影响着网络往返时间，较长的网络往返时间会导致较长的资源加载时间。浏览器在本地的计算和处理过程主要是对网页进行解析，计算CSS(层叠样式表)样式和布局，需要大量的计算密集型的操作。为了提高浏览器的性能，很多研究工作对浏览器的性能进行优化，包括对浏览器缓存机制进行优化，对计算密集型操作并行化，对网页内容预取，资源的推测式加载，以及基于云端对浏览器进行优化。
[0003]在浏览器的处理过程中，存在着很多的冗余计算。一方面，很多网页经常被访问，虽然现在的浏览器中有对网页资源的缓存，但是每次访问相同网页的时候，CSS样式和布局都会重新计算。另外一方面，很多网站下的不同网页都有着很强的相似性，包括使用了相同的样式表和类似的布局结构，导致浏览器在加载这些网页的时候存在着很多冗余计算。
[0004]这些冗余计算占据了浏览器渲染计算中的很大一部分比重，但是之前的研究工作没有考虑到浏览器处理过程中的冗余计算，也没有考虑到网页浏览的相似性。如果能减少浏览器加载网页过程中的冗余计算，那么对于浏览器的性能会有很大的提升。
【发明内容】
[0005]为了便于说明，本文约定:“D0M”表示HTML的文档对象模型；“CSS”表示层叠样式表，用来表示网页元素的样式；“ID”表示网页元素标签中的ID属性；“ClaSS”表示网页元素标签中的Class属性；“Tag”表示网页元素标签中的标签名称；三元组用来表示“ID”，“Class”和“Tag”这三个属性。
[0006]本发明的目的是提供一种基于网页相似度的浏览器渲染优化方法，用以解决浏览器在处理网页中存在的冗余计算。
[0007]本发明所述的技术方案如下:
[0008]一种基于网页相似度的浏览器渲染优化方法，其特征是，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。
[0009]所述的浏览器渲染优化方法，其特征是，在缓存CSS样式树时，执行如下操作:
[0010]Al.建立一棵与DOM树结构相似的CSS样式树，用来缓存每个DOM节点对应的CSS样式；每个CSS样式树中的节点用该节点的三元组ID，Class, Tag来唯一标记；CSS样式树的根节点不记录样式，用来记录该样式树缓存的网页域名；[0011]A2.将DOM树根节点的三元组ID，Class, Tag以及CSS样式缓存到CSS样式树根节点的孩子节点上；
[0012]A3.其余非根节点按照DOM树中节点的父子关系，在CSS样式树中建立节点并将其三元组ID，Class, Tag和CSS样式缓存到对应节点。
[0013]所述的浏览器渲染优化方法，其特征是，在浏览器需要计算网页DOM树节点样式时，执行如下操作:
[0014]B1.判断是否有缓存相同域名的CSS样式树，如果有则执行步骤B2 ;否则，浏览器正常渲染网页并且缓存CSS样式树，结束本流程；
[0015]B2.在计算DOM树根节点Rd样式的时候，判断根节点是否跟对应的CSS样式树根节点R。的第一级子节点有相同的ID，Class, Tag标记；如果有，则说明Rd在样式树中有已经计算好的相同的样式，则将对应的样式直接赋给Rd ;否则，说明从Rd的样式开始就没有相同的，则计算Rd的样式，并在CSS样式树的根节点下建立子节点Rd,;将Rd的ID，Class, Tag作为标记，以及将计算好的Rd的样式缓存到Rd，；
[0016]B3.在计算DOM树的非根节点Nd样式的时候，找到Nd的父节点Ndp对应的CSS样式树中的节点Cdp ;遍历Cdp的孩子节点，判断是否存在节点Cdpe与Nd的ID，Class, Tag相同；如果存在，则将Cdp。的样式赋给Nd ;否则，计算Nd的样式并且在Cdp下建立节点Nd.，将Nd的ID, Class, Tag作为标记，以及将计算好的Nd的样式缓存到Nd.。
[0017]所述的浏览器渲染优化方法，其特征是，所述网页域名是大小写无关的，如baidu.com和ffffff.BAIDU.COM对应于相同的域名。
[0018]本发明所述的方法可以实现为一种浏览器插件，所述浏览器插件接管浏览器对网页CSS样式的处理过程。
[0019]一种浏览器，其特征是，所述浏览器上面所述的方法对网页CSS样式进行处理。
[0020]本发明的有益效果:利用本发明提供的技术方案，可以减少浏览器在加载网页时候的冗余计算，提高了网页的加载速度，增强了浏览器的性能。
【专利附图】
【附图说明】
[0021]图1是本发明的缓存CSS样式的流程。
[0022]图2是本发明的重用CSS样式的流程。
[0023]图3是本发明实施例1提供的缓存CSS样式的流程图。
[0024]图4是本发明实施例2提供的重用CSS样式的流程图。
【具体实施方式】
[0025]本发明的【具体实施方式】如下:
[0026]A.在缓存CSS样式树时，执行如下操作(如图1所示):
[0027]Al.建立一棵与DOM树结构相似的CSS样式树，用来缓存每个DOM节点对应的CSS样式；每个CSS样式树中的节点用三元组ID，Class, Tag来唯一标记；CSS样式树的根节点不记录样式，用来记录该样式树缓存的网页域名；
[0028]A2.将DOM树根节点的三元组ID，Class, Tag以及CSS样式缓存到CSS样式树根节点的孩子节点上；[0029]A3.其余非根节点按照DOM树中节点的父子关系，在CSS样式树中建立节点并将三元组ID，Class, Tag和CSS样式缓存到对应节点。
[0030]B.在浏览器需要计算网页DOM树节点样式时，执行如下操作(如图2所示):
[0031]B1.判断是否有缓存相同域名的CSS样式树，如果有，则执行步骤B2 ;否则，浏览器正常渲染网页并且缓存CSS样式树，结束本流程；
[0032]B2.在计算DOM树根节点Rd样式的时候，判断根节点是否跟对应的CSS样式树根节点R。的孩子节点有相同的三元组ID，Class, Tag标记；如果有，则说明Rd在样式树中有已经计算好的相同的样式,则将对应的样式直接赋给Rd ;否则,说明从Rd的样式开始就没有相同的，则计算Rd的样式，并在CSS样式树的根节点下建立子节点Rd,;将Rd的ID，Class,Tag作为标记，以及将计算好的Rd的样式缓存到Rd，；
[0033]B3.在计算DOM树的非根节点Nd样式的时候，找到Nd的父节点Ndp对应的CSS样式树中的节点Cdp ;遍历Cdp的孩子节点，判断是否存在节点Cdpe与Nd的ID，Class, Tag相同；如果存在则将Cdp。的样式赋给Nd ;否则，计算Nd的样式并且在Cdp下建立节点Nd.，将Nd的ID, Class, Tag作为标记，以及将计算好的Nd的样式缓存到Nd.。
[0034]下面通过实例对本发明做进一步说明。
[0035]实施例1:缓存CSS样式树
[0036]假定在浏览器中打开一个新闻网页www.mywebsite.com/news001,而之前浏览器从来没有访问过这个域名下面的网页，那么浏览器中就找不到缓存的CSS样式树。浏览器会正常计算新打开网页DOM节点的CSS样式,并且创建CSS样式树。WWW.mywebsite.com/newsOOl网页根节点是<html>节点下面有两个节点〈head〉和〈body〉，〈body〉下面有节点〈P〉。
[0037]缓存CSS样式树的流程如图3所示，包括如下步骤:
[0038]I)建立CSS样式树的根节点，根节点不缓存任何样式，根节点的属性设置为www.mywebsite.com,即该域名下的网页都共享此样式树；
[0039]2)计算DOM树根节点的CSS样式，并在CSS样式树根节点下建立节点Chtml,将的样式以及其三元组ID，Class, Tag的值赋给Chtml ;网页元素的三元组ID，Class,Tag的值可以由DOM模型获取；
[0040]3)计算DOM树节点〈head〉的CSS样式，并在CSS样式树节点Chtml下建立节点Chead,将〈head〉的样式以及其ID, Class, Tag值赋给Chead ；
[0041]4)计算DOM树节点〈body〉的CSS样式，并在CSS样式树节点Chtml下建立节点Cbmiy,将〈body〉的样式以及其ID，Class, Tag值赋给Cbtjdy ；
[0042]5)计算DOM树节点
的CSS样式，并在CSS样式树节点Cbtjdy下建立节点Cp，将〈P〉的CSS样式以及其ID，Class, Tag值赋给Cp。
[0043]通过上述操作,建立了网站www.mywebsite.com的CSS样式树并将之缓存起来。
[0044]实施例2:重用CSS样式树
[0045]本实施例的目的在于重用实施例1所缓存的CSS样式树。
[0046]假定在浏览器中打开新闻网页www.mywebsite.com/newsOOl后又打开新闻网页www.mywebsite.com/news002,那么浏览器在计算网页元素的CSS样式的时候就会重用对应的样式树。www.mywebsite.com/news002网页根节点是<html>节点下面有两个节点〈head〉和〈body〉，〈body〉下面有节点
和节点<img>。
[0047]重用CSS样式树的流程如图4所示，包括如下步骤:
[0048](I)判断是否有相同域名的样式树,找到之前缓存的www.mywebsite.com的CSS样式树；
[0049](2)判断DOM树根节点是否跟C_的孩子节点有相同的三元组ID，Class，Tag,找到Chtml与节点的三元组ID，Class，Tag相同，则将Chtml的CSS样式直接赋给<html> 节点；
[0050](3)判断DOM树节点〈head〉是否跟Chtml的孩子节点有相同的三元组ID，Class,Tag,找到Chead与〈head〉节点的三元组ID，Class，Tag相同，则将Chead的CSS样式直接赋给〈head〉节点；
[0051](4)判断DOM树节点〈body〉是否跟Chtml的孩子节点有相同的三元组ID，Class,Tag,找到Ctody与〈body〉节点的三元组ID，Class，Tag相同，则将Ctody的CSS样式直接赋给〈body〉节点；
[0052](5)判断DOM树节点
是否跟Cbtjdy的孩子节点有相同的三元组ID，Class, Tag,找到Cp与
节点的三元组ID，Class, Tag相同，则将Cp的CSS样式直接赋给〈P〉节点；
[0053](6)判断DOM树节点<img>是否跟Ctody的孩子节点有相同的三元组ID，Class,Tag,没找到孩子节点与<img>节点有相同的三元组ID, Class, Tag。因此计算<img>节点的CSS样式，并在CSS样式树节点Cbtjdy下建立节点Cimg,将<img>的CSS样式以及其三元组ID, Class, Tag 值赋给 Cinig。
[0054]通过实施例2可以看到，在浏览器加载新网页的时候，重用了一大部分缓存过的CSS样式，减少了在加载网页时的冗余计算，提高了网页的加载速度，增强了浏览器的性能。
【权利要求】
1.一种基于网页相似度的浏览器渲染优化方法，其特征是，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。
2.如权利要求1所述的浏览器渲染优化方法，其特征是，在缓存CSS样式树时，执行如下操作: Al.建立一棵与DOM树结构相似的CSS样式树，用来缓存每个DOM节点对应的CSS样式；每个CSS样式树中的节点用该节点的三元组ID，Class, Tag来唯一标记；CSS样式树的根节点不记录样式，用来记录该样式树缓存的网页域名； A2.将DOM树根节点的三元组ID，Class, Tag以及CSS样式缓存到CSS样式树根节点的孩子节点上； A3.其余非根节点按照DOM树中节点的父子关系，在CSS样式树中建立节点并将其三元组ID，Class, Tag和CSS样式缓存到对应节点。
3.如权利要求1所述的浏览器渲染优化方法，其特征是，在浏览器需要计算网页DOM树节点样式时，执行如下操作: B1.判断是否有缓存相同域名的CSS样式树，如果有则执行步骤B2 ;否则，浏览器正常渲染网页并且缓存CSS样式树，结束本流程； B2.在计算DOM树根节点Rd样式的时候，判断根节点是否跟对应的CSS样式树根节点Rc的第一级子节点有相同的ID，Class，Tag标记；如果有，则说明Rd在样式树中有已经计算好的相同的样式，则将对应的样式直接赋给Rd;否则，说明从Rd的样式开始就没有相同的，则计算Rd的样式，并在CSS样式树的根节点下建立子节点Rd,;将Rd的ID，Class, Tag作为标记，以及将计算好的Rd的样式缓存到Rd，； B3.在计算DOM树的非根节点Nd样式的时候，找到Nd的父节点Ndp对应的CSS样式树中的节点Cdp ;遍历Cdp的孩子节点，判断是否存在节点Cdpe与Nd的ID，Class, Tag相同；如果存在，则将Cdp。的样式赋给Nd ;否则，计算Nd的样式并且在Cdp下建立节点Nd.，将Nd的ID，Class, Tag作为标记，以及将计算好的Nd的样式缓存到Nd.。
4.如权利要求1所述的浏览器渲染优化方法，其特征是，所述网页域名是大小写无关的。
5.一种浏览器插件，所述浏览器插件接管浏览器对网页CSS样式的处理过程，其特征是，所述浏览器插件采用权利要求1所述的方法对网页的CSS样式进行处理。
6.一种浏览器，其特征是，所述浏览器以权利要求1至4之一所述的方法对网页CSS样式进行处理。
【文档编号】G06F17/30GK103473347SQ201310439055
【公开日】2013年12月25日 申请日期:2013年9月24日 优先权日:2013年9月24日
【发明者】郭耀, 王浩宇, 刘梦馨, 吕骁博, 陈向群 申请人:北京大学