一种基于网页相似度的浏览器渲染优化方法，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。利用本发明专利技术提供的技术方案，可以减少浏览器在加载网页时候的冗余计算，提高了网页的加载速度，增强了浏览器的性能。
【技术实现步骤摘要】
一种基于网页相似度的浏览器渲染优化方法
本专利技术提供一种浏览器渲染优化的方法，具体涉及一种基于网页之间相似度来进行缓存和重用浏览器中间计算结果的方法。
技术介绍
随着移动平台和HTML5的发展，浏览器的功能越来越强大，但是浏览器的性能一直不够令人满意。影响浏览器的性能主要有两个因素，一个是网络带宽，一个是浏览器在本地的计算和处理速度。网络带宽影响着网络往返时间，较长的网络往返时间会导致较长的资源加载时间。浏览器在本地的计算和处理过程主要是对网页进行解析，计算CSS（层叠样式表）样式和布局，需要大量的计算密集型的操作。为了提高浏览器的性能，很多研究工作对浏览器的性能进行优化，包括对浏览器缓存机制进行优化，对计算密集型操作并行化，对网页内容预取，资源的推测式加载，以及基于云端对浏览器进行优化。在浏览器的处理过程中，存在着很多的冗余计算。一方面，很多网页经常被访问，虽然现在的浏览器中有对网页资源的缓存，但是每次访问相同网页的时候，CSS样式和布局都会重新计算。另外一方面，很多网站下的不同网页都有着很强的相似性，包括使用了相同的样式表和类似的布局结构，导致浏览器在加载这些网页的时候存在着很多冗余计算。这些冗余计算占据了浏览器渲染计算中的很大一部分比重，但是之前的研究工作没有考虑到浏览器处理过程中的冗余计算，也没有考虑到网页浏览的相似性。如果能减少浏览器加载网页过程中的冗余计算，那么对于浏览器的性能会有很大的提升。
技术实现思路
为了便于说明，本文约定：“DOM”表示HTML的文档对象模型；“CSS”表示层叠样式表，用来表示网页元素的样式；“ID”表示网页元素标签中的ID属性；“Class”表示网页元素标签中的Class属性；“Tag”表示网页元素标签中的标签名称；三元组用来表示“ID”，“Class”和“Tag”这三个属性。本专利技术的目的是提供一种基于网页相似度的浏览器渲染优化方法，用以解决浏览器在处理网页中存在的冗余计算。本专利技术所述的技术方案如下：一种基于网页相似度的浏览器渲染优化方法，其特征是，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。所述的浏览器渲染优化方法，其特征是，在缓存CSS样式树时，执行如下操作：A1.建立一棵与DOM树结构相似的CSS样式树，用来缓存每个DOM节点对应的CSS样式；每个CSS样式树中的节点用该节点的三元组ID，Class，Tag来唯一标记；CSS样式树的根节点不记录样式，用来记录该样式树缓存的网页域名；A2.将DOM树根节点的三元组ID，Class，Tag以及CSS样式缓存到CSS样式树根节点的孩子节点上；A3.其余非根节点按照DOM树中节点的父子关系，在CSS样式树中建立节点并将其三元组ID，Class，Tag和CSS样式缓存到对应节点。所述的浏览器渲染优化方法，其特征是，在浏览器需要计算网页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的孩子节点，判断是否存在节点Cdpc与Nd的ID，Class，Tag相同；如果存在，则将Cdpc的样式赋给Nd；否则，计算Nd的样式并且在Cdp下建立节点Nd‘，将Nd的ID，Class，Tag作为标记，以及将计算好的Nd的样式缓存到Nd‘。所述的浏览器渲染优化方法，其特征是，所述网页域名是大小写无关的，如www.baidu.com和WWW.BAIDU.COM对应于相同的域名。本专利技术所述的方法可以实现为一种浏览器插件，所述浏览器插件接管浏览器对网页CSS样式的处理过程。一种浏览器，其特征是，所述浏览器上面所述的方法对网页CSS样式进行处理。本专利技术的有益效果：利用本专利技术提供的技术方案，可以减少浏览器在加载网页时候的冗余计算，提高了网页的加载速度，增强了浏览器的性能。附图说明图1是本专利技术的缓存CSS样式的流程。图2是本专利技术的重用CSS样式的流程。图3是本专利技术实施例1提供的缓存CSS样式的流程图。图4是本专利技术实施例2提供的重用CSS样式的流程图。具体实施方式本专利技术的具体实施方式如下：A.在缓存CSS样式树时，执行如下操作（如图1所示）：A1.建立一棵与DOM树结构相似的CSS样式树，用来缓存每个DOM节点对应的CSS样式；每个CSS样式树中的节点用三元组ID，Class，Tag来唯一标记；CSS样式树的根节点不记录样式，用来记录该样式树缓存的网页域名；A2.将DOM树根节点的三元组ID，Class，Tag以及CSS样式缓存到CSS样式树根节点的孩子节点上；A3.其余非根节点按照DOM树中节点的父子关系，在CSS样式树中建立节点并将三元组ID，Class，Tag和CSS样式缓存到对应节点。B.在浏览器需要计算网页DOM树节点样式时，执行如下操作（如图2所示）：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的孩子节点，判断是否存在节点Cdpc与Nd的ID，Class，Tag相同；如果存在则将Cdpc的样式赋给Nd；否则，计算Nd的样式并且在Cdp下建立节点Nd‘，将Nd的ID，Class，Tag作为标记，以及将计算好的Nd的样式缓存到Nd‘。下面通过实例对本专利技术做进一步说明。实施例1：缓存CSS样式树假定在浏览器中打开一个新闻网页www.mywebsite.com/news001，而之前浏览器从来没有访问过这个域名下面的网页，那么浏览器中就找不到缓存的CSS样式树。浏览器会正常计算新打开网页DOM节点的CSS样式，并且创建CSS样式树。www.mywebsite.com/news001网页根节点是<html>，<html>节点本文档来自技高网...
【技术保护点】
一种基于网页相似度的浏览器渲染优化方法，其特征是，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。
【技术特征摘要】
1.一种基于网页相似度的浏览器渲染优化方法，其特征是，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。2.如权利要求1所述的浏览器渲染优化方法，其特征是，在缓存CSS样式树时，执行如下操作：A1.建立一棵与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所述的浏览器渲染优化方法，其特征是，在浏览器需要计算...
【专利技术属性】
技术研发人员：郭耀，王浩宇，刘梦馨，吕骁博，陈向群，
申请(专利权)人：北京大学，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。