网络浏览器切换历史网页的方法及网络浏览器

摘要

本发明公开了一种网络浏览器切换历史网页的方法及对应的网络浏览器，所述网络浏览器缓存模块和网页切换模块。缓存模块用于在网络浏览器展示当前网页或者离开当前网页时，将当前网页的资源缓存在页面缓存中，所述缓存的资源至少包括DOM树、Render树、和网页执行资源；网页切换模块用于在网络浏览器收到切换目标历史网页的指令后，载入页面缓存中的该目标历史网页的Render树，根据该Render树绘制目标历史网页，并在浏览器的当前视窗内显示所绘制的目标历史网页；同时或之后，从所述页面缓存中载入该目标历史网页的DOM树和网页执行资源。利用本发明，可以提高网络浏览器切换历史网页的切换速度。

说明书

技术领域

本发明涉及网络浏览器技术领域，尤其涉及一种网络浏览器切换历史网 页的方法及网络浏览器。

背景技术

网络浏览器是指万维网（Web）服务的客户端浏览程序，网络浏览器可 向Web服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体 数据格式进行解释、显示和播放。

网络浏览器在浏览网页时，会形成一个所访问的历史网页的列表，其中 记录有用户曾经浏览过的历史网页地址。当用户点击网络浏览器上的后退按 钮时，网络浏览器在所述列表中记录当前浏览的网页，同时根据访问历史列 表的记录，后退到刚才浏览过的前一个历史网页；之后，如果用户点击网络 浏览器上的前进按钮，则网络浏览器可以根据访问历史列表的记录，前进到 当前视窗所示网页的后一个历史网页。当然，对于用户来讲，期望网络浏览 器能够快速地显示历史网页。为了满足这个需求，网络浏览器的页面缓存技 术应运而生。

网络浏览器的页面缓存技术的主要方案是：在网络浏览器对网页内的资 源发生了第一次请求之后，把资源中的一部分数据存储在数据处理设备的页 面缓存中，当网络浏览器退回到历史网页，再次对该历史网页发出请求的时 候，按照特定的策略加载所述页面缓存的资源，减少HTTP请求次数与传输 数据量，以此提高展示历史网页的速度。

目前，在与本发明最接近的现有技术中，所述利用网络浏览器页面缓存 技术进行历史网页切换的具体处理方式包括如下步骤A~D：

A、网络浏览器在展示当前网页或者离开当前网页时，将当前网页的资 源缓存在页面缓存（PageChache）中。所述当前网页的资源包括：文档对象 模型（DOM，Document Object Model）树、以及网页执行资源。例如具体可 以调用javascript（简称JS）的unload回调操作缓存所述内容。

所述DOM用于描述网页的信息,它将网页中的各个元素都看作一个个 对象，从而使网页中的元素也可以被计算机语言获取或者编辑。DOM树是 以层次结构组织的节点或信息片断的集合，这个层次结构允许开发人员在树 中导航寻找特定信息。所述网页执行资源例如是级联样式表（CSS，Cascading  Style Sheet）属性信息、javascript（简称JS）执行状态信息以及其他状态信 息等，网络浏览器通过解析DOM树和网页执行资源，可以获知网页的结构 和功能，从而对用户针对网页的操作指令做出对应的响应。

B、当网络浏览器将当前视窗重新切换到一个历史网页时，如用户点击 后退按钮切换到上一个历史网页，或者点击后退按钮后再点击前进按钮切换 到下一个历史网页，在这里将该切换后的历史网页称为目标历史网页。在切 换到一个目标历史网页时，首先从所述页面缓存中读取该目标网页对应的 DOM树和网页执行资源，并载入所述DOM树和网页执行资源；之后进行重 新排版，所述重新排版就是根据所述DOM树、CSS属性信息、JS资源的执 行状态信息等，重新建立具有有效数据的Render树，以备该目标网页显示到 当前网络浏览器视窗之用。所述Render树用于布局，具体负责DOM树如何 显示在网络浏览器的视窗内，同一个DOM树，可以对应不同的Render树， 从而可以在网络浏览器视窗内显示出灵活多变的网页。

C、对目标历史网页建立DOM树节点与视窗位置的对应关系表。

D、按照所建立的Render树在网络浏览器的当前视窗内绘制目标网页， 完成对目标网页的切换。

所述步骤C是现有网络浏览器技术的一种显示与交互机制。比如，在建 立好所述对应关系表后，当用户点击网络浏览器视窗内的某点时，该机制就 会从预先建立好的所述DOM树节点与视窗位置的对应关系表中获知用户所 点击的位置是哪个DOM节点，从而可以对该DOM节点做出较快速的反应 处理。

但是，现有的这种利用网络浏览器页面缓存技术进行历史网页切换的方 案中，历史网页的切换速度还是较慢，尤其是在计算资源和网络带宽资源都 很有限的移动互联网设备（如智能手机、掌上电脑、平板电脑等）上使用的 网络浏览器，网页切换的速度会更慢，严重影响了用户正常的网页浏览体验。

发明内容

有鉴于此，本发明的主要目的在于提供一种网络浏览器切换历史网页的方 法和对应的网络浏览器，以提高网络浏览器切换历史网页的切换速度。

本发明的技术方案是这样实现的：

一种网络浏览器切换历史网页的方法，包括：

网络浏览器在展示当前网页或者离开当前网页时，将当前网页的资源缓存 在页面缓存中，所述缓存的资源至少包括文档对象模型DOM树、渲染Render 树、和网页执行资源；

网络浏览器在收到切换目标历史网页的指令后，载入页面缓存中的该目标 历史网页的Render树，根据该Render树绘制目标历史网页，并在网络浏览器的 当前视窗内显示所绘制的目标历史网页；同时或之后，从所述页面缓存中载入 该目标历史网页的DOM树和网页执行资源。

一种网络浏览器，包括：

缓存模块，用于在网络浏览器展示当前网页或者离开当前网页时，将当前 网页的资源缓存在页面缓存中，所述缓存的资源至少包括DOM树、Render树、 和网页执行资源；

网页切换模块，用于在网络浏览器收到切换目标历史网页的指令后，载入 页面缓存中的该目标历史网页的Render树，根据该Render树绘制目标历史网页， 在浏览器的当前视窗内显示所绘制的目标历史网页；同时或之后，从所述页面 缓存中载入该目标历史网页的DOM树和网页执行资源。

与现有技术相比，本发明改进了对历史网页的缓存管理以及切换时的绘制 方式，在缓存时需要缓存DOM树、Render树和网页执行资源，在收到切换目 标历史网页的指令后，省去了现有技术中重新排版重建Render树的步骤，而是 根据页面缓存中的该目标历史网页的Render树绘制目标历史网页，并在网络浏 览器的当前视窗内显示所绘制的目标历史网页，从而使得目标历史网页在第一 时间出现在网络浏览器的当前视窗内，同时或之后从所述页面缓存中载入该目 标历史网页的DOM树和网页执行资源，用于使网络浏览器可以对用户针对网页 的操作指令做出对应的响应。由于整个切换过程省略了重新排版重建Render树 的步骤，因此本发明提高了网络浏览器切换历史网页的切换速度。

同时，由于用户在发出切换目标历史网页的指令后，希望尽快看到目标历 史网页，再对该目标历史网页进行操作（如点击其中的链接等操作），有时用户 甚至不会对目标历史网页进行操作，只希望看到目标历史网页的内容即可，从 用户看到目标历史网页到对该网页进行操作之间有一个时间差，本发明先利用 缓存的Render树绘制目标历史网页供用户在第一时间查看网页内容，同时或之 后利用所述时间差载入该目标历史网页的DOM树和网页执行资源以响应用户 迟后的操作，因此本发明不但提高了网络浏览器切换历史网页的实际处理速度， 而且从用户感知的角度也进一步提升了历史网页的切换速度，使得用户在发出 切换指令后快速地查看到目标历史网页。

附图说明

图1为本发明所述网络浏览器切换历史网页的方法的一种流程图；

图2为本发明所述网络浏览器采用动画方式切换历史网页的一种具体实 施流程图；

图3为本发明所述网络浏览器的一种组成示意图；

图4为所述网页切换模块的一种组成示意图。

具体实施方式

下面结合附图及具体实施例对本发明再作进一步详细的说明。

图1为本发明所述网络浏览器切换历史网页的方法的一种流程图。参见 图1，该方法主要包括：

101、网络浏览器在展示当前网页或者离开当前网页时，将当前网页的资 源缓存在页面缓存中，所述缓存的资源至少包括DOM树、Render树、和网 页执行资源；

102、网络浏览器在收到切换目标历史网页的指令后，载入页面缓存中的 该目标历史网页的Render树，根据该Render树绘制目标历史网页，并在网 络浏览器的当前视窗内显示所绘制的目标历史网页；同时或之后，从所述页 面缓存中载入该目标历史网页的DOM树和网页执行资源。

本发明所述的网络浏览器并不仅仅是指仅具有浏览网页功能的常规的网 络浏览器，而且还可以是指具有浏览网页功能的任何客户端。所述页面缓存 是在网络浏览器所在设备的内存中所划分出的缓存区域。

本发明中，所述将当前网页的资源缓存在页面缓存中的操作可以在网络 浏览器展示当前网页时进行，也可以是在收到切换指令而离开当前网页时进 行。所述切换指令例如可以是用户点击后退按钮切换到上一个历史网页，或 者点击后退按钮后再点击前进按钮切换到下一个历史网页。本文中将该切换 后的历史网页称为目标历史网页，将切换前的网页称为当前网页。所述网页 执行资源例如是级联样式表（CSS，Cascading Style Sheet）属性信息、javascript （简称JS）执行状态信息以及其他状态信息等。所述CSS是用来进行网页风 格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变 成红色的且有下划线，这就是一种风格。通过CSS属性信息，可以统一地控 制HTML中各标志的显示属性，可以使网络浏览器更能有效地控制网页外 观。所述JS执行状态信息是JS对网页的操作执行信息，例如JS的定时操作 规定在指定的时间（如30秒）之后执行某个特定的网页效果等。网络浏览器 通过解析DOM树和网页执行资源，可以获知网页的结构和功能，从而对用 户针对网页的操作指令做出对应的响应。

本发明在缓存时需要缓存DOM树、Render树和网页执行资源，在收到 切换目标历史网页的指令后，省去了现有技术中重新排版重建Render树的步 骤，而是先载入页面缓存中的该目标历史网页的Render树，根据该Render 树绘制目标历史网页，并在网络浏览器的当前视窗内显示所绘制的目标历史 网页，从而使得目标历史网页在第一时间出现在网络浏览器的当前视窗内， 由于Render树是用于布局显示网页的，因此此时网络浏览器的视窗内所显示 的是该目标历史网页的一张图像，用户还无法对该图像进行操作，但是对于 用户来讲，能够在切换网页后的极短时间内看到目标历史网页的图像已经足 够，用户可以浏览目标历史网页中的内容。在用户浏览目标历史网页内容的 同时，网络浏览器再从所述页面缓存中载入该目标历史网页的DOM树和网 页执行资源，通过DOM树和网页执行资源，网络浏览器可以获知网页的结 构和功能，从而可以对用户针对网页的操作指令做出对应的响应。由于整个 切换过程省略了重新排版重建Render树的步骤，因此本发明提高了网络浏览 器切换历史网页的切换速度。

由于对于那些当初未加载完就存入历史缓存的网页，在载入该页面缓存 的资源时，网络浏览器的资源加载器会启动继续完成未加载的资源（如图片 或者JS资源等），这些新加载进来的资源可能会影响所缓存的Render树的 某些屏幕区域的有效性，导致这些屏幕区域的数据无效，这个无效的屏幕区 域需要被重新绘制，这个需要被重新绘制的区域称为脏区域。

现有技术中，为了使切换后的目标历史网页的Render树的数据都为有效 数据，采用了完全重新排版重建Render树的操作，导致了切换速度的缓慢。 然而，在本发明的一种实施例中，为了在加快切换速度的同时保持目标历史 网页Render树的有效性，可以在网络浏览器的当前视窗内绘制网页后，进一 步包括脏区域的判断重构操作，即：判断页面缓存中的所述目标历史网页的 Render树中对应当前视窗的区域（即当前终端屏幕上显示的网页区域）是否 存在脏区域，如果存在则重新构建该Render树中的该脏区域，并依照重新构 建后的Render树在当前视窗内绘制网页。

一个网页的Render树中的某个区域的数据变化通常是通过JS代码从服 务器获取的，本实施例中，在所述脏区域的判断重构操作中，所述网络浏览 器通常通过执行当前视窗区域所示网页的JS代码从服务器获取最新的数据， 并判断Render树中对应当前视窗的区域中的数据是否与最新获取的数据相 同，如果不同，则确定该不同数据所在的区域为脏区域，并依照从服务器获 取的最新数据重新构建该Render树中的该脏区域，并依照重新构建后的 Render树在当前视窗内绘制网页。在此之后，用户每调整（例如通过滚动、 拖拽操作当前视窗内的目标历史网页来调整）一次目标历史网页在当前视窗 的显示区域，则都会执行一次所述脏区域的判断重构操作，从而使得当前视 窗的显示区域中所显示的目标历史网页的数据为最新数据。

由于上述脏区域的判断重构操作只涉及到整个Render树中的一部分区 域，因此所耗费的时间比起重构整个Render树来说要少的多，这样既加快了 历史网页的切换速度，又保证了切换后的目标历史网页的数据有效性。

另外，本发明还省略了现有技术中在切换目标历史网页过程中的建立 DOM树节点与视窗位置的对应关系表的步骤，改为待切换好目标历史网页 后，即在从所述页面缓存中载入目标历史网页的DOM树和网页执行资源后， 进一步包括：在收到用户的点击指令后，实时响应计算所点击位置对应的 DOM树节点，并对该DOM树节点做出对应的处理。从而在不影响现有技术 切换目标历史网页所具有的功能的前提下，进一步提升了历史网页的切换速 度。

在一种实施例中，所述计算所点击位置对应的DOM树节点的具体方法 包括一下步骤（a）~步骤（c）：

（a）确定所点击位置在当前视窗内的坐标。

（b）根据Render树中框架（frame）的区域位置信息，确定所述坐标所 属的frame。所述frame是网页中一个特定的子窗口，在网页的Render树中 会包括该网页所有的frame的区域位置信息（例如每个frame的四角的坐标 位置），在本步骤中，本发明可以遍历所述Render树中的frame区域位置信 息，从而查找到所述坐标所属的frame。

（c）在所确定的frame内，确定所述坐标对应的Render节点，并依照 所述Render树与DOM树的关系确定最终对应的DOM节点。所述Render 树中的Render节点都具有坐标信息，在本步骤中，具体可以是遍历所确定的 frame内的所有Render节点，从而确定所述坐标对应的Render节点。所述依 照所述Render树与DOM树的关系确定最终对应的DOM节点，具体可以根 据现有的换算方法，根据所述Render节点换算出对应的DOM节点。

上述实施例中，在收到切换指令后，所述在网络浏览器的当前视窗内显 示所绘制的目标历史网页的具体方式为：在网络浏览器的当前视窗内直接显 示所绘制的目标历史网页。在另外的实施例中，为了能够提高目标历史网页 切换过程中的流畅度，本发明还进一步采用了切换动画的方案，即：在网络 浏览器收到切换目标历史网页的指令后，进一步包括：根据切换前网页的 Render树绘制切换前网页；所述在网络浏览器的当前视窗内显示所绘制的目 标历史网页的具体方式为：在网络浏览器的当前视窗内以动画方式渐进地退 出所绘制的切换前网页直至该切换前网页从当前视窗内消失，同时以动画方 式渐进地显示所绘制的目标历史网页直至当前视窗只显示该目标历史网页。 所述渐进地退出和显示的具体方式可以有多种形式，例如可以是目标历史网 页渐入，切换前网页被挤出屏幕的效果形式。

目前现有技术中的网络浏览器（比如开源的安卓系统网络浏览器）在切 换历史网页时是没有采用动画切换方式的。当用户浏览网页，执行前进或者 后退的操作时，屏幕显示内容直接由原网页转换为前进或者后退的目标历史 网页，这种方式使的用户浏览网页时不流畅，因此，本发明上述实施例在进 行历史网页切换如前进或者后退时增加动画切换效果，不但能够提高目标历 史网页切换过程中的流畅度，还可以提高用户的舒畅感，增进用户体验。

图2为本发明所述网络浏览器采用动画方式切换历史网页的一种具体实 施流程图。假设该实施例中，每当网络浏览器离开当前网页时，则将当前网 页的DOM树、Render树、和网页执行资源缓存在页面缓存中，当切换历史 网页时，参见图2，网络浏览器执行的具体步骤包括：

步骤201、监测到切换目标历史网页的指令。如用户发出的指示浏览器 前进或后退的指令。

步骤202、载入页面缓存中的该目标历史网页的Render树，并根据该 Render树绘制目标历史网页P1；同时根据切换前网页（即当前网页）的Render 树绘制切换前网页P2，本领域技术人员知道，在切换网页时，切换前网页的 Render树对于网络浏览器是已知的，因此可以直接根据该Render树绘制切 换前网页。

之后，本实施例中同时执行切换动画过程、和缓存及目标历史网页载入 过程。参见图2，所述切换动画过程参见步骤203a~步骤203b，所述缓存及 目标历史网页载入过程参见步骤203A~步骤203B。

步骤203a、创建动画对象，设置动画持续时长。所述动画持续时长可以 为预先指定的值。

步骤203b、网络浏览器调用绘制函数（例如手机操作系统中的WebView 的onDraw回调函数）绘制动画。在绘制每帧动画时，需要判断动画持续时 长是否结束，如果没有结束，则判断到目前为止动画执行的时长占动画总时 长的比例，然后计算出所述网页P1与P2要显示的相对偏移，然后根据所述 相对偏移分别以渐渐式的动画方式将所述两个页面P1和P2绘制显示到网络 浏览器的当前视窗上，所述两个网页P1和P2可以是局部地显示，目标历史 网页P1逐渐进入当前视窗，切换前网页P2逐渐退出当前视窗，直到动画结 束，则只绘制显示目标历史网页P1。

上述动画的绘制过程是由手机操作系统中自带的WebView的onDraw回 调函数实现的，所述动画方式还可以通过自绘控件来实现，达到比系统自有 的动画有更好的效率，以及流畅度，至于采用何种自绘控件，本领域的技术 人员可以任意选择公知的自绘控件，本文不再赘述。另外，所述动画还可以 通过手机操作系统（如Andriod操作系统）的公共类（public class）如 surface-view类来实施，通过单独线程来完成对屏幕动画的绘制，优势在于 surface-view在绘制时可以规定绘制的层级关系、遮盖关系，使得动画可以在 最上面执行，而下面依然可以执行网络浏览器原来的绘制动作，这样就不需 要改变、屏蔽原来的代码逻辑，对网络浏览器的改造成本较低。

步骤203A、将当前网页即切换前网页的资源缓存在页面缓存中，所述缓 存的资源至少包括DOM树、Render树、和网页执行资源，例如CSS属性信 息、JS执行状态信息以及其他状态信息等。

步骤203B、从所述页面缓存中载入所述目标历史网页的DOM树和网页 执行资源。通过DOM树和网页执行资源，网络浏览器可以获知网页的结构 和功能，从而可以对用户针对网页的操作指令做出对应的响应。

步骤204、所述切换动画结束，所述目标历史网页载入也完成，此时网 页切换过程完成。

在上述实施例中，省略了现有技术中在切换目标历史网页过程中的建立 DOM树节点与视窗位置的对应关系表的步骤，改为待切换好目标历史网页 后，在收到用户的点击指令后，实时响应计算所点击位置对应的DOM树节 点，并对该DOM树节点做出对应的处理。从而在不影响现有技术切换目标 历史网页所具有的功能的前提下，进一步提升了历史网页的切换速度。之后，

图3为本发明所述网络浏览器的一种组成示意图。该网络浏览器用于执 行本发明所述的方法，该网络浏览器是对现有网络浏览器的改进，除了包括 现有网络浏览器的结构功能外，还具体包括：

缓存模块301，用于在网络浏览器展示当前网页或者离开当前网页时， 将当前网页的资源缓存在页面缓存中，所述缓存的资源至少包括DOM树、 Render树、和网页执行资源。

网页切换模块302，用于在网络浏览器收到切换目标历史网页的指令后， 载入页面缓存中的该目标历史网页的Render树，根据该Render树绘制目标 历史网页，并在浏览器的当前视窗内显示所绘制的目标历史网页；同时或之 后，从所述页面缓存中载入该目标历史网页的DOM树和网页执行资源。

图4为所述网页切换模块的一种组成示意图。参见图4，该网页切换模 块302具体包括：第一载入子模块401、网页绘制子模块402、显示子模块 403和第二载入子模块404；

所述第一载入子模块401用于在网络浏览器收到切换目标历史网页的指 令后，首先载入页面缓存中的该目标历史网页的Render树；

所述网页绘制子模块402用于根据所载入的Render树绘制目标历史网 页；

所述显示子模块403用于在网络浏览器的当前视窗内显示所绘制的目标 历史网页；

所述第二载入子模块404用于从所述页面缓存中载入该目标历史网页的 DOM树和网页执行资源。

如图4中的虚线所示，在一种实施例中，所述网页切换模块302中进一 步包括脏区域重构子模块405，用于在所述第一载入子模块401载入页面缓 存中的目标历史网页的Render树后，判断该Render树中对应当前网络浏览 器视窗的区域是否存在脏区域，如果存在则重新构建该Render树中的该脏区 域，并触发所述网页绘制子模块402依照重新构建后的Render树绘制目标历 史网页，之后触发显示子模块403在网络浏览器的当前视窗内显示所绘制的 目标历史网页。

如图4中的虚线所示，在另一种实施例中，所述网页切换模块302中还 可进一步包括DOM节点实时计算子模块406，用于在所述第二载入子模块 404从所述页面缓存中载入目标历史网页的DOM树和网页执行资源后，判 断是否收到用户的点击指令，一旦收到，则实时计算所点击位置对应的DOM 树节点，并触发浏览器对该DOM树节点做出对应的处理。

在另一种实施例中，为了实现切换历史网页时的动画切换效果，所述网 页绘制子模块402进一步用于根据切换前网页的Render树绘制切换前网页； 所述显示子模块403中进一步用于：在网络浏览器的当前视窗内以动画方式 渐进地退出所绘制的切换前网页直至该切换前网页从当前视窗内消失，同时 以动画方式渐进地显示所绘制的目标历史网页直至当前视窗只显示该目标历 史网页。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本 发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在 本发明保护的范围之内。