CN103473347B

CN103473347B - 一种基于网页相似度的浏览器渲染优化方法

Info

Publication number: CN103473347B
Application number: CN201310439055.8A
Authority: CN
Inventors: 郭耀; 王浩宇; 刘梦馨; 吕骁博; 陈向群
Original assignee: Peking University
Current assignee: Peking University
Priority date: 2013-09-24
Filing date: 2013-09-24
Publication date: 2017-01-11
Anticipated expiration: 2033-09-24
Also published as: CN103473347A

Abstract

一种基于网页相似度的浏览器渲染优化方法，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。利用本发明提供的技术方案，可以减少浏览器在加载网页时候的冗余计算，提高了网页的加载速度，增强了浏览器的性能。

Description

一种基于网页相似度的浏览器渲染优化方法

技术领域

本发明提供一种浏览器渲染优化的方法，具体涉及一种基于网页之间相似度来进行缓存和重用浏览器中间计算结果的方法。

背景技术

随着移动平台和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树根节点R_d样式的时候，判断根节点是否跟对应的CSS样式树根节点R_c的第一级子节点有相同的ID，Class，Tag标记；如果有，则说明R_d在样式树中有已经计算好的相同的样式，则将对应的样式直接赋给R_d；否则，说明从R_d的样式开始就没有相同的，则计算R_d的样式，并在CSS样式树的根节点下建立子节点R_d’；将R_d的ID，Class，Tag作为标记，以及将计算好的R_d的样式缓存到R_d’；

B3.在计算DOM树的非根节点N_d样式的时候，找到N_d的父节点N_dp对应的CSS样式树中的节点C_dp；遍历C_dp的孩子节点，判断是否存在节点C_dpc与N_d的ID，Class，Tag相同；如果存在，则将C_dpc的样式赋给N_d；否则，计算N_d的样式并且在C_dp下建立节点N_d‘，将N_d的ID，Class，Tag作为标记，以及将计算好的N_d的样式缓存到N_d‘。

所述的浏览器渲染优化方法，其特征是，所述网页域名是大小写无关的，如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样式树的根节点不记录样式，用来记录该样式树缓存的网页域名；

A3.其余非根节点按照DOM树中节点的父子关系，在CSS样式树中建立节点并将三元组ID，Class，Tag和CSS样式缓存到对应节点。

B.在浏览器需要计算网页DOM树节点样式时，执行如下操作（如图2所示）：

B1.判断是否有缓存相同域名的CSS样式树，如果有，则执行步骤B2；否则，浏览器正常渲染网页并且缓存CSS样式树，结束本流程；

B2.在计算DOM树根节点R_d样式的时候，判断根节点是否跟对应的CSS样式树根节点R_c的孩子节点有相同的三元组ID，Class，Tag标记；如果有，则说明R_d在样式树中有已经计算好的相同的样式，则将对应的样式直接赋给R_d；否则，说明从R_d的样式开始就没有相同的，则计算R_d的样式，并在CSS样式树的根节点下建立子节点R_d’；将R_d的ID，Class，Tag作为标记，以及将计算好的R_d的样式缓存到R_d’；

B3.在计算DOM树的非根节点N_d样式的时候，找到N_d的父节点N_dp对应的CSS样式树中的节点C_dp；遍历C_dp的孩子节点，判断是否存在节点C_dpc与N_d的ID，Class，Tag相同；如果存在则将C_dpc的样式赋给N_d；否则，计算N_d的样式并且在C_dp下建立节点N_d‘，将N_d的ID，Class，Tag作为标记，以及将计算好的N_d的样式缓存到N_d‘。

下面通过实例对本发明做进一步说明。

实施例1：缓存CSS样式树

假定在浏览器中打开一个新闻网页www.mywebsite.com/news001，而之前浏览器从来没有访问过这个域名下面的网页，那么浏览器中就找不到缓存的CSS样式树。浏览器会正常计算新打开网页DOM节点的CSS样式，并且创建CSS样式树。www.mywebsite.com/news001网页根节点是<html>，<html>节点下面有两个节点<head>和<body>，<body>下面有节点。

缓存CSS样式树的流程如图3所示，包括如下步骤：

1)建立CSS样式树的根节点，根节点不缓存任何样式，根节点的属性设置为www.mywebsite.com，即该域名下的网页都共享此样式树；

2)计算DOM树根节点<html>的CSS样式，并在CSS样式树根节点下建立节点C_html，将<html>的样式以及其三元组ID，Class，Tag的值赋给C_html；网页元素的三元组ID，Class，Tag的值可以由DOM模型获取；

3)计算DOM树节点<head>的CSS样式，并在CSS样式树节点C_html下建立节点C_head，将<head>的样式以及其ID，Class，Tag值赋给C_head；

4)计算DOM树节点<body>的CSS样式，并在CSS样式树节点C_html下建立节点C_body，将<body>的样式以及其ID，Class，Tag值赋给C_body；

5)计算DOM树节点的CSS样式，并在CSS样式树节点C_body下建立节点C_p，将的CSS样式以及其ID，Class，Tag值赋给C_p。

通过上述操作，建立了网站www.mywebsite.com的CSS样式树并将之缓存起来。

实施例2：重用CSS样式树

本实施例的目的在于重用实施例1所缓存的CSS样式树。

假定在浏览器中打开新闻网页www.mywebsite.com/news001后又打开新闻网页www.mywebsite.com/news002，那么浏览器在计算网页元素的CSS样式的时候就会重用对应的样式树。www.mywebsite.com/news002网页根节点是<html>，<html>节点下面有两个节点<head>和<body>，<body>下面有节点和节点<img>。

重用CSS样式树的流程如图4所示，包括如下步骤：

(1)判断是否有相同域名的样式树，找到之前缓存的www.mywebsite.com的CSS样式树；

(2)判断DOM树根节点<html>是否跟C_root的孩子节点有相同的三元组ID，Class，Tag，找到C_html与<html>节点的三元组ID，Class，Tag相同，则将C_html的CSS样式直接赋给<html>节点；

(3)判断DOM树节点<head>是否跟C_html的孩子节点有相同的三元组ID，Class，Tag，找到C_head与<head>节点的三元组ID，Class，Tag相同，则将C_head的CSS样式直接赋给<head>节点；

(4)判断DOM树节点<body>是否跟C_html的孩子节点有相同的三元组ID，Class，Tag，找到C_body与<body>节点的三元组ID，Class，Tag相同，则将C_body的CSS样式直接赋给<body>节点；

(5)判断DOM树节点是否跟C_body的孩子节点有相同的三元组ID，Class，Tag，找到C_p与节点的三元组ID，Class，Tag相同，则将C_p的CSS样式直接赋给节点；

(6)判断DOM树节点<img>是否跟C_body的孩子节点有相同的三元组ID，Class，Tag，没找到孩子节点与<img>节点有相同的三元组ID，Class，Tag。因此计算<img>节点的CSS样式，并在CSS样式树节点C_body下建立节点C_img，将<img>的CSS样式以及其三元组ID，Class，Tag值赋给C_img。

通过实施例2可以看到，在浏览器加载新网页的时候，重用了一大部分缓存过的CSS样式，减少了在加载网页时的冗余计算，提高了网页的加载速度，增强了浏览器的性能。

Claims

1.一种基于网页相似度的浏览器渲染优化方法，其特征是，在浏览器处理网页的过程中，缓存对网页处理过的CSS样式，所有相同域名下面的网页共享并且共同维护着一棵CSS样式树；在下次访问相同域名下网页的时候，重用缓存的结果中相同的CSS样式部分，把新出现的CSS样式添加到该CSS样式树中作为缓存。

2.如权利要求1所述的浏览器渲染优化方法，其特征是，在缓存CSS样式树时，执行如下操作：

3.如权利要求1所述的浏览器渲染优化方法，其特征是，在浏览器需要计算网页DOM树节点样式时，执行如下操作：