一种浏览器页面切换方法及浏览器与流程

文档序号:14451703阅读:271来源:国知局

本发明涉及网络浏览器技术领域,具体涉及一种浏览器页面切换方法及浏览器。



背景技术:

现在网络浏览器可能是应用最广泛的软件了,随着智能设备的普及,人们对新信息、新知识的获取,几乎都是来源于网络浏览器。随之而来的各式功能性浏览器和定制浏览器也是琳琅满目。由于目前主流的浏览器内核基本是开源的,这样也为浏览器开发人员提供了基础的土壤。他们可以在现有的状况下,对浏览器进行大量的技术创新。比如对浏览器进行性能优化,对某个技术点进行深入以及对自己的需求定制等等。这些技术策略的创新给用户带来了更好的上网体验,对于广大的用户群来说,这是一项新技术带来的福利,必将受到用户青睐。

当前,以机顶盒中内嵌的浏览器为例,在看电子书或者在选择点播的视频列表时,会重复地按遥控器的“下一页”按键进行浏览。传统的浏览器是按“下一页”按键就加载一个新页面,更新页面所有内容,并将页面中的需要渲染的元素都渲染一遍。但是很多情况下上述两种页面都是页面结构完全一样,只是内容不同,完全没有必要将所有内容都更新和渲染,并且切换此类页面有时候会带来闪烁感。因此,优化显示这类页面,提升用户体验,是很有必要的。



技术实现要素:

针对现有技术中存在的缺陷,本发明的目的在于提供一种浏览器页面切换方法及浏览器,增强用户体验,降低系统内存消耗。

为达到以上目的,本发明采取的技术方案是:一种浏览器页面切换方法:

浏览下一个页面前,将上一个页面的dom树结构及该结构中的元素、元素属性保存起来;

当浏览下一个页面时,解析该页面,生成当前页面的dom树,与保存的上一个页面的dom树结构进行比较;

遍历当前页面和上一个页面的dom树结构,比较相同顺序相同位置的节点元素和元素属性是否相同;

若相同顺序相同位置的节点元素存在不同时,生成整颗render树,将当前页面的渲染方式设置为默认渲染,根据整颗render树进行默认渲染;

若相同顺序相同位置的节点元素相同时,继续比较文本属性或图片地址属性是否相同;使用文本属性或图片地址属性不同的节点元素生成局部render树,将当前页面的渲染方式设置为追加渲染,根据局部render树的内容进行追加渲染。

在上述技术方案的基础上,在当前页面的dom树中增设差异渲染标识,所述差异渲染标识包括树差异标识和节点差异标识,所述树差异标识和节点差异标识默认值均为false:若dom树中相同位置的节点元素不同,所述树差异标识仍为false;若dom树中相同位置的节点元素相同,且文本属性和图片地址属性相同,所述节点差异标识仍为false;若dom树中相同位置的节点元素相同,但文本属性和/或图片地址属性不同,将所述节点差异标识设置为ture,并将所述树差异标识设置为ture;

若所述树差异标识为false,生成整颗render树;

若节点差异标识为ture,且所述树差异标识为ture,使用节点差异标识为ture的节点元素生成局部render树;

若所述树差异标识为ture,且dom树中全部节点元素的节点差异标识均为false,生成整棵render树。

在上述技术方案的基础上,第一次加载网页时,上一个页面的dom树为空,将当前页面的dom树的内容复制到dom树保存模块中上一个页面的dom树中,将当前页面的渲染方式设置为默认渲染,进行默认渲染。

在上述技术方案的基础上,第二次及后续加载网页时:

s1,浏览下一个页面前,将上一个页面的dom树结构及该结构中的节点元素、元素属性保存起来;

s2,当浏览下一个页面时,解析浏览器当前页面并生成当前页面的dom树;在当前页面的dom树中增设差异渲染标识;

s3,比较当前页面的dom树与保存的上一个页面的dom树,判断两者相同位置的节点元素是否相同:若相同,进入步骤s4,若不同,进入步骤s9,

s4,继续比较节点元素的文本属性或图片地址属性是否相同;若不同,进入步骤s5;若相同,进入步骤s6;

s5,将该节点元素的节点差异标识设置为ture;

s6,继续比较下一个节点元素,返回步骤s3,直至遍历完全部节点元素;

s7,判断是否存在节点差异标识为ture;若存在,进入步骤s8;若不存在,即dom树中全部节点元素的节点差异标识均为false,进入步骤s9;

s8,使用节点差异标识为ture的全部节点元素及其元素属性生成render树;将当前页面的dom树的内容复制到上一个页面的dom树中;将当前页面的渲染方式设置为追加渲染,在上一个页面的内容上根据render树的内容进行追加渲染;

s9,退出比较,将当前页面的dom树的内容复制到dom树保存模块中的上一个页面的dom树中,渲染模块将当前页面的渲染方式设置为默认渲染,进行默认渲染。

在上述技术方案的基础上,比较当前页面的dom树与上一个页面的dom树时,从当前页面的dom树的根节点开始,依次遍历dom树的每一个节点元素。

本发明还公开了一种浏览器,包括dom树保存模块,dom树生成模块,dom树比较模块,render树生成模块和渲染模块,其中:

dom树保存模块用于保存浏览器中上一个页面的dom树;

dom树生成模块用于解析浏览器当前页面并生成当前页面的dom树;

dom树比较模块用于遍历dom树生成模块生成的当前页面的dom树与dom树保存模块中上一个页面的dom树,比较两者相同位置的节点元素是否相同:若相同,继续比较该节点元素的文本属性或图片地址属性是否相同;若两者相同位置的节点元素不同,退出比较;

render树生成模块用于在dom树中相同位置的节点元素相同、但文本属性和/或图片地址属性不同时,使用文本属性或图片地址属性不同的节点元素及其元素属性生成render树;

渲染模块用于在dom树中相同位置的节点元素相同、但文本属性和/图片地址属性不同时,将当前页面的渲染方式设置为追加渲染,在上一个页面的内容上根据render树的内容进行追加渲染;否则,将当前页面的渲染方式设置为默认渲染,进行默认渲染;

dom树保存模块还用于在dom树比较模块完成dom树比较后,将当前页面的dom树的内容复制到dom树保存模块中的上一个页面的dom树中。

在上述技术方案的基础上,所述优化浏览器上下页面切换的系统还包括差异渲染标识模块,所述差异渲染标识模块用于在当前页面的dom树中增设差异渲染标识,所述差异渲染标识包括树差异标识和节点差异标识,所述树差异标识和节点差异标识默认值均为false:若dom树中相同位置的节点元素不同,所述树差异标识仍为false;若dom树中相同位置的节点元素相同,且文本属性和图片地址属性相同,将所述节点差异标识仍为false;若dom树中相同位置的节点元素相同,但文本属性和/或图片地址属性不同,将所述节点差异标识设置为ture,并将所述树差异标识设置为ture。

在上述技术方案的基础上,若所述树差异标识为false,所述render树生成模块生成整颗render树;

若节点差异标识为ture,且所述树差异标识为ture,所述render树生成模块使用节点差异标识为ture的节点元素生成局部render树;

若所述树差异标识为ture,且dom树中全部节点元素的节点差异标识均为false,所述render树生成模块生成整棵render树。

在上述技术方案的基础上,所述dom树比较模块遍历dom树生成模块生成的当前页面的dom树与dom树保存模块中上一个页面的dom树,比较两者相同位置的节点元素是否相同时,从当前页面的dom树的根节点开始,依次遍历dom树的每一个节点元素。

在上述技术方案的基础上,第一次加载网页时,dom树保存模块中的上一个页面的dom树为空;所述dom树保存模块将当前页面的dom树的内容复制到dom树保存模块中上一个页面的dom树中,所述渲染模块将当前页面的渲染方式设置为默认渲染,进行默认渲染。

与现有技术相比,本发明的优点在于:

本发明通过dom树比较后,只更新差异部分,避免了整体页面刷新带来的闪烁感,增强用户体验。同时避免重复渲染,提高显示速度,降低系统内存消耗。

附图说明

图1为本发明实施例中浏览器页面切换方法的流程示意图;

图2为本发明实施例中浏览器的结构框图。

具体实施方式

以下结合附图及实施例对本发明作进一步详细说明。

参见图1所示,本发明实施例提供一种浏览器页面切换方法:

浏览下一个页面前,将上一个页面的dom树结构及该结构中的元素、元素属性保存起来;

当浏览下一个页面时,解析该页面,生成当前页面的dom树,与保存的上一个页面的dom树结构进行比较;

遍历当前页面和上一个页面的dom树结构,比较相同顺序相同位置的节点元素和元素属性是否相同;

若相同顺序相同位置的节点元素存在不同时,生成整颗render树,将当前页面的渲染方式设置为默认渲染,根据整颗render树进行默认渲染;

若相同顺序相同位置的节点元素相同时,继续比较文本属性或图片地址属性是否相同;使用文本属性或图片地址属性不同的节点元素生成局部render树,将当前页面的渲染方式设置为追加渲染,根据局部render树的内容进行追加渲染。

在当前页面的dom树中增设差异渲染标识,差异渲染标识包括树差异标识和节点差异标识,树差异标识和节点差异标识默认值均为false:若dom树中相同位置的节点元素不同,树差异标识仍为false;若dom树中相同位置的节点元素相同,且文本属性和图片地址属性相同,节点差异标识仍为false;若dom树中相同位置的节点元素相同,但文本属性和/或图片地址属性不同,将节点差异标识设置为ture,并将树差异标识设置为ture;

若树差异标识为false,生成整颗render树;

若节点差异标识为ture,且树差异标识为ture,使用节点差异标识为ture的节点元素生成局部render树;

若树差异标识为ture,且dom树中全部节点元素的节点差异标识均为false,生成整棵render树。

第一次加载网页时,上一个页面的dom树为空,将当前页面的dom树的内容复制到dom树保存模块中上一个页面的dom树中,将当前页面的渲染方式设置为默认渲染,进行默认渲染。

第二次及后续加载网页时:

s1,浏览下一个页面前,将上一个页面的dom树结构及该结构中的节点元素、元素属性保存起来;

s2,当浏览下一个页面时,解析浏览器当前页面并生成当前页面的dom树;在当前页面的dom树中增设差异渲染标识;

s3,比较当前页面的dom树与保存的上一个页面的dom树,从当前页面的dom树的根节点开始,依次遍历dom树的每一个节点元素。判断两者相同位置的节点元素是否相同:若相同,进入步骤s4,若不同,进入步骤s9,

s4,继续比较节点元素的文本属性或图片地址属性是否相同;若不同,进入步骤s5;若相同,进入步骤s6;

s5,将该节点元素的节点差异标识设置为ture;

s6,继续比较下一个节点元素,返回步骤s3,直至遍历完全部节点元素;

s7,判断是否存在节点差异标识为ture;若存在,进入步骤s8;若不存在,即dom树中全部节点元素的节点差异标识均为false,进入步骤s9;

s8,使用节点差异标识为ture的全部节点元素及其元素属性生成render树;将当前页面的dom树的内容复制到上一个页面的dom树中;将当前页面的渲染方式设置为追加渲染,在上一个页面的内容上根据render树的内容进行追加渲染;

s9,退出比较,将当前页面的dom树的内容复制到dom树保存模块中的上一个页面的dom树中,渲染模块将当前页面的渲染方式设置为默认渲染,进行默认渲染。

参见图2所示,本发明实施例还公开了一种浏览器,包括dom树保存模块,dom树生成模块,dom树比较模块,render树生成模块和渲染模块,其中:

dom树保存模块用于保存浏览器中上一个页面的dom树;

dom树生成模块用于解析浏览器当前页面并生成当前页面的dom树;

dom树比较模块用于遍历dom树生成模块生成的当前页面的dom树与dom树保存模块中上一个页面的dom树,从当前页面的dom树的根节点开始,依次遍历dom树的每一个节点元素。比较两者相同位置的节点元素是否相同:若相同,继续比较该节点元素的文本属性或图片地址属性是否相同;若两者相同位置的节点元素不同,退出比较;

render树生成模块用于在dom树中相同位置的节点元素相同、但文本属性和/或图片地址属性不同时,使用文本属性或图片地址属性不同的节点元素及其元素属性生成render树;

渲染模块用于在dom树中相同位置的节点元素相同、但文本属性和/图片地址属性不同时,将当前页面的渲染方式设置为追加渲染,在上一个页面的内容上根据render树的内容进行追加渲染;否则,将当前页面的渲染方式设置为默认渲染,进行默认渲染;

dom树保存模块还用于在dom树比较模块完成dom树比较后,将当前页面的dom树的内容复制到dom树保存模块中的上一个页面的dom树中。

优化浏览器上下页面切换的系统还包括差异渲染标识模块,差异渲染标识模块用于在当前页面的dom树中增设差异渲染标识,差异渲染标识包括树差异标识和节点差异标识,树差异标识和节点差异标识默认值均为false:若dom树中相同位置的节点元素不同,树差异标识仍为false;若dom树中相同位置的节点元素相同,且文本属性和图片地址属性相同,将节点差异标识仍为false;若dom树中相同位置的节点元素相同,但文本属性和/或图片地址属性不同,将节点差异标识设置为ture,并将树差异标识设置为ture。

若树差异标识为false,render树生成模块生成整颗render树;

若节点差异标识为ture,且树差异标识为ture,render树生成模块使用节点差异标识为ture的节点元素生成局部render树;

若树差异标识为ture,且dom树中全部节点元素的节点差异标识均为false,render树生成模块生成整棵render树。

第一次加载网页时,dom树保存模块中的上一个页面的dom树为空。所述dom树保存模块将当前页面的dom树的内容复制到dom树保存模块中上一个页面的dom树中,所述渲染模块将当前页面的渲染方式设置为默认渲染,进行默认渲染。

第二次及后续加载网页时:

dom树保存模块中保存浏览器中上一个页面的dom树;dom树生成模块解析浏览器当前页面并生成当前页面的dom树;差异渲染标识模块在当前页面的dom树中增设差异渲染标识;

dom树比较模块比较dom树生成模块生成的当前页面的dom树与dom树保存模块中上一个页面的dom树,判断两者相同位置的节点元素是否相同:

若两者相同位置的节点元素不同,dom树比较模块退出比较,dom树保存模块将当前页面的dom树的内容复制到dom树保存模块中的上一个页面的dom树中,渲染模块将当前页面的渲染方式设置为默认渲染,进行默认渲染。

若两者相同位置的节点元素相同,继续比较节点元素的文本属性或图片地址属性是否相同,差异渲染标识模块将存在不同的节点元素的节点差异标识设置为ture;

若存在节点差异标识为ture,render树生成模块使用节点差异标识为ture的全部节点元素及其元素属性生成render树;dom树保存模块将当前页面的dom树的内容复制到dom树保存模块中的上一个页面的dom树中;渲染模块将当前页面的渲染方式设置为追加渲染,在上一个页面的内容上根据render树的内容进行追加渲染;

若不存在节点差异标识为ture,即dom树中全部节点元素的节点差异标识均为false,dom树比较模块退出比较,dom树保存模块将当前页面的dom树的内容复制到dom树保存模块中的上一个页面的dom树中,渲染模块将当前页面的渲染方式设置为默认渲染,进行默认渲染。

本发明不局限于上述实施方式,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1