CN104915461A - 页面展示方法和装置 - Google Patents

Abstract

本发明公开了一种页面展示方法和装置。该方法包括：判断在沿页面展示历史从当前页面回退到先前页面时是否能够从默认缓存中获得所述先前页面的页面内容；在判断无法从所述默认缓存中获得所述先前页面的页面内容的情况下，使用本地第二缓存来缓存页面展示历史中的页面的页面内容；以及响应于沿页面展示历史回退或前进到目标页面的指令，使用所述本地第二缓存中缓存的相应页面内容来展示所述目标页面。由此，能够在浏览器内核自身缓存失效的情况下保证对历史页面的流畅展示，从而为用户提供良好的浏览体验。

Description

页面展示方法和装置

技术领域

本发明涉及Web前端技术，尤其涉及一种页面展示的方法和装置。

背景技术

随着互联网进入Web2.0时代，网页变得不再只是承载单一的文字和图片，而是通过各种富媒体让内容更加生动，并通过软件化的交互为用户提供了更好的使用体验。这些发展基于Web前端技术实现。在这其中，浏览器内核(渲染引擎)相关技术得到了长足的发展。

现今的浏览器内核(例如，webkit)为了优化用户的浏览体验，会在自己的缓存中存储经过其加载并渲染的历史页面。这样在用户为了查看历史页面而点击后退或前进按钮时(其后称为“回退”)，就能够直接从自己的缓存中读取历史页面。

然而，部分版本浏览器内核(例如ios 8，uc 10.0)的缓存(例如，webview缓存)会由于系统的兼容性问题而失效，这会导致在回退时刷新页面，严重影响用户浏览页面的流畅性。

针对上述问题，已经提出了hash以及中间页浮层等的解决方案。但是这些解决方案仍然存在由于需要提取onhashchange(哈希更改)事件而导致不必要的请求增多(hash方案)、由于在页面渲染完毕后才渲染浮层内容而导致延时较大(中间页浮层方案)、无法判断浏览器是否有回退刷新现象等的诸多问题。

因此，需要一种能够克服现有技术中的上述和其他缺陷并且在浏览器内核的缓存失效的情况下仍能保证页面浏览的流畅性的页面展示的方法和装置。

发明内容

本发明所要解决的一个技术问题是提供一种页面展示的方法和装置，其能够在浏览器内核自身缓存失效时保证对历史页面的流畅展示，从而给用户提供良好的浏览体验。

根据本发明的一个方面，公开了一种页面展示方法，包括：判断在沿页面展示历史从当前页面回退到先前页面时是否能够从默认缓存中获得所述先前页面的页面内容；在判断无法从所述默认缓存中获得所述先前页面的页面内容的情况下，使用本地第二缓存来缓存页面展示历史中的页面的页面内容；以及响应于沿页面展示历史回退或前进到目标页面的指令，使用所述本地第二缓存中缓存的相应页面内容来展示所述目标页面。

由此，在判断出无法从默认缓存中获取历史页面的情况下，可以使用默认缓存之外的其他本地缓存来缓存历史页面内容。这样就保证了在执行回退处理时对缓存内容的直接本地读取，避免了影响浏览连贯性的刷新，从而改善用户的浏览体验。

优选地，默认缓存可以是浏览器内核的网络视图(WebView)缓存，本地第二缓存可以是HTML5的会话存储(sessionStorage)缓存或浏览器的历史状态(history.state)缓存。

通过具体化上述默认缓存，并提供可选的两种第二缓存的实现，能够为不同的应用环境选择更为合适的实现，从而进一步提高本发明的页面展示方法的针对性和页面展示速度。

优选地，可以根据标识信息的不同取值来判断是否能够从默认缓存中获得所述先前页面的页面内容。

通过使用标识信息对上述判断进行标识，能够简化计算，提高页面展示的速度，从而进一步改善用户的浏览体验。

优选地，标识信息的取值的初始化可以通过如下之一实现的：使用HTML5的sessionStorage缓存，在每个标签页打开时初始化所述标记信息的取值；使用浏览器的history.state缓存，在每次浏览器启动后访问第一个网页时初始化所述标记信息的取值。

通过提供可选的两种初始化途径，能够进一步提高本发明的页面展示方法的灵活性以及应用于具体场景中的实现速度，由此进一步改善用户的浏览体验。

优选地，标识信息在能够从默认缓存中获得所述先前页面的页面内容时取值为真，否则取值为假。

通过将标识信息的取值具体化为真和假的二元判断，能够进一步提高本发明的页面展示方法的灵活性以及应用于具体场景中的实现速度，由此进一步改善用户的浏览体验。

优选地，使用第二缓存来缓存和展示目标页面可以通过结合使用浏览器的弹出状态处理(onpopstate)来实现，弹出状态处理包括回退分支和刷新分支，在能够从默认缓存中获得所述先前页面的页面内容时执行回退分支，否则执行刷新分支。

通过结合使用浏览器自带的API(应用程序接口)函数来实现回退，能够进一步优化本发明的页面展示方法的计算与速度，从而进一步改善用户的浏览体验。

根据本发明的另一个方面，公开了一种页面展示装置，包括：回退判断单元，用于判断在沿页面展示历史从当前页面回退到先前页面时是否能够从默认缓存中获得所述先前页面的页面内容；第二缓存页面缓存单元，用于在判定无法从所述默认缓存中获得所述先前页面的页面内容的情况下，使用本地第二缓存来缓存页面展示历史中的页面的页面内容；以及第二缓存页面展示单元，用于响应于沿页面展示历史回退或前进到目标页面的指令，使用本地第二缓存中缓存的相应页面内容来展示所述目标页面。

优选地，默认缓存可以是浏览器内核的webview缓存，本地第二缓存可以是HTML5的sessionStorage缓存或浏览器的history.state缓存。

优选地，标识信息的取值的初始化可以通过如下单元之一实现的：第一取值单元，用于使用HTML5的sessionStorage缓存在每个标签页打开时初始化所述标记信息的取值；第二取值单元，用于使用浏览器的history.state缓存在每次浏览器启动后访问第一个网页时初始化所述标记信息的取值。

优选地，第二缓存页面缓存单元和第二缓存页面展示单元可以通过结合使用浏览器的onpopstate实现目标页面的缓存和展示。

由此，就为实现依据本发明的页面展示提供了装置支持。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1是根据本发明的一个实施例的一种页面展示的方法的示意性流程图。

图2是根据本发明的一个实施例的一种页面展示装置的示意性方框图。

图3是根据本发明的一个实施例的一种页面展示装置可以包括的可选单元的示意性方框图。

具体实施方式

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

图1是根据本发明的一个实施例的一种页面展示的方法的示意性流程图。

在步骤S100，判断在沿页面展示历史从当前页面回退到先前页面时是否能够从默认缓存中获得所述先前页面的页面内容。

若能，则该方法结束。

在步骤S200，在判断无法从所述默认缓存中获取所述先前页面的页面内容的情况下，使用本地第二缓存来缓存页面展示历史中的页面的页面内容。

在步骤S300，响应于沿页面展示历史回退或前进到目标页面的指令，使用所述本地第二缓存中缓存的相应页面内容来展示所述目标页面。

由于上述方法会首先对是否有回退刷新现象加以判断，因此能够在需要优化回退体验时(即，回退失效时)提供额外的历史页面内容缓存；而在不存在回退刷新现象时不加以操作，由此避免了不必要的处理，实现浏览器自带的最优体验。

另外，由于将要还原的数据(即，页面展示历史中的页面的页面内容)被存在本地缓存中，因此减少了不必要的请求，提高了页面展示的效率。

在一个优选实施例中，用于缓存页面展示历史中页面的页面内容的默认缓存可以是浏览器内核的缓存，例如可以是浏览器内核(诸如Webkit)的WebView缓存。

由此，使得本公开的方法适用于广为流行的浏览器内核，例如Webkit。

在一个优选实施例中，用于在默认缓存失效时存储历史页面的本地第二缓存可以是HTML5的sessionStorage(会话存储)缓存。在另一优选实施例中，第二缓存可以是浏览器的history.state(历史状态)缓存。

由此，使得本发明所公开的方法可以根据不同场景具体使用不同的技术来实现历史网页的备选缓存，从而提高所述方法的灵活性和处理效率。

在一个优选实施例中，可以根据标识信息的不同取值来标识是否能够从默认缓存中获得先前页面的页面内容。

由此，通过使用标识信息来标识判断结果，能够进一步简化本发明所公开方法的计算，提高页面展示效率。

在一个优选实施例中，标识信息的取值的初始化可以通过使用HTML5的sessionStorage缓存，在每个标签页打开时初始化所述标记信息的取值来实现。在另一优选实施例中，初始化可以通过使用浏览器的history.state缓存，在每次浏览器启动后访问第一个网页时初始化所述标记信息的取值来实现。

由此，使得能够根据具体原因选择标识信息初始化途径(例如，逐标签页或是逐浏览器启动)，进一步提高本发明所公开的页面展示方法的灵活性以及计算速度。

在一个优选实施例中，标识信息可以在能从默认缓存中获得所述先前页面的页面内容时取值为真(true)，否则取值为假(false)。

由此，通过二元判断进一步提高本发明的页面展示方法的灵活性以及应用于具体场景中的实现速度，以改善用户的浏览体验。

在一个优选实施例中，使用第二缓存来缓存和展示目标页面通过结合使用浏览器的弹出状态处理(onpopstate)实现，弹出状态处理包括回退分支和刷新分支，在能够从默认缓存中获得所述先前页面的页面内容时执行回退分支，否则执行刷新分支。

由此通过结合使用浏览器自带的API函数来实现回退，能够进一步优化本发明的页面展示方法的计算与速度，从而进一步改善用户的浏览体验。

显而易见的是，以上优选实施例也能够以本领域技术人员可以想到的其他方式实现，而不背离本发明的精神和范围。

另外，根据HTML5的sessionStorage以及浏览器history.state的运行原理，本发明所公开的方法能够在本要回退至的页面渲染之前执行还原，以实现最快速度的还原，确保用户浏览的连续性。

如下将根据上述优选实施例描述在一个实施例中的本发明所公开方法的一个具体实现。应该理解的是，该具体实现中所阐明的各优选特征可以同时出现、部分出现、由其他优选特征所代替，并且这些修改和变化都位于所附权利要求所涵盖的本发明的精神和范围之内。

在一个实施例中，利用HTML5的sessionStorage和浏览器的弹出状态处理API onpopstate来实现本发明所公开的页面展示方法。

HTML5技术已知提供两种在客户端存储数据的方法——localStorage(没有时间限制的数据存储)；sessionStorage(针对一个会话的数据存储)。

在本发明的所述优选实施例中，使用生存期仅持续一个会话的sessionStorage实现历史页面的存储。

Onpopstate则已知是一种在浏览器接收到回退指令(例如，用户点击后退或前进按钮)时弹出栈内的最上层内容的API函数。

在该实施例中，首先根据sessionStorage内是否缓存了标识信息backRefresh(回退刷新)来判断是否已经知晓该浏览器存不存在回退刷新问题(即，用户点击回退或前进时会由于诸如WebView缓存的浏览器内核本身缓存的失效而导致页面刷新)。在一个优选实施例中，backRefresh是用来判断是否存在回退刷新问题的标识信息，当取值为true时，表示存在回退刷新问题，为false时，则表示浏览器能够正常回退。

用户第一次打开网页时，脚本初始化一个临时变量refresh＝true，并注册一个onpopstate事件，该事件有两个分支，一个是刷新进来执行，一个是回退进来执行。

该网页的页面渲染完毕触发onpopstate事件，执行刷新进来分支，执行refresh＝false。

用户在该页面上点击链接或是在浏览器地址栏输入网址时，浏览器打开对应页面，之后，用户在页面上发生回退操作时，判断浏览器的WebView缓存是否正常，正常时，执行步骤(i)，失效时，执行步骤(ii)：

(i)当浏览器WebView缓存正常时，针对于所要回退的页面，浏览器不会重新加载该页面的资源、执行脚本，refresh＝false，触发onpopstate事件，执行回退分支，在本地缓存(例如，sessionStorage)中存储backRefresh＝refresh＝false，表示该浏览器不存在回退刷新问题。

(ii)当浏览器WebView缓存失效时，浏览器会重新加载所要回退页面的资源、渲染执行脚本，refresh赋值为true，触发onpopstate事件，执行刷新分支，在本地缓存(例如，sessionStorage)中存储backRefresh＝refresh＝true，表明该浏览器存在回退刷新问题。

由此，就完成了对backRefresh的赋值，从而方便后续通过backRefresh的取值对浏览器是否存在回退问题进行判断。

其后，浏览器正常地向服务器请求页面资源(例如，HTML、CSS、Javascript等)。页面资源加载完毕后，开始渲染、执行脚本，首先从本地缓存读取该标识信息backRefresh，并且执行脚本，注册一个onpopstate事件，该事件有两个分支，一个是刷新来执行，一个是回退来执行。

当backRefresh＝true时，表示浏览器不能正常执行回退刷新，例如WebView缓存的浏览器内核缓存失效。这时，需要从本地缓存(在本例中，HTML5的sessionStorage)中读取当前页面的缓存数据，根据该缓存数据还原页面。若本地缓存中不存在该缓存数据时则正常渲染页面。页面渲染完毕后，为页面锚点注册监听事件，点击锚点时触发该监听事件，将当前场景DOM节点缓存到本地缓存中，供回退还原使用。具体缓存的数据例如可以是页面动态插入的DOM节点字符串、页面浏览的位置和其他必要参数(如：分页页码、请求次数之类的，根据需求而定)。随后，例如响应于用户的回退操作，触发onpopstate，展示由sessionStorage缓存的页面展示历史中的页面的页面内容。

当backRefresh＝false时，浏览器自身完成渲染或执行WebView缓存还原页面。

以上给出了一个集合了本发明各方面的优选实施例的一个具体实现。在另一个实施例中，例如可以使用以及浏览器的history.state和onpopstate来实现本发明的优选方法。不过此时根据浏览器的history.state的特性，用于判断浏览器内核的WebView缓存是否失效的标识信息是在每次浏览器启动到关闭的周期内存续，而非使用sessionStorage时仅在一个会话的生存期内存续。

由上可知，在一个优选实施例中，使用本地第二缓存(例如，sessionStorage或是history.state)来缓存和展示目标页面可以通过结合使用浏览器的回退处理(onpopstate)来实现。

由此，通过使用浏览器自带API(应用程序接口)函数来实现回退，能够进一步优化本发明的页面展示方法的计算与速度，从而进一步改善用户的浏览体验。

以上参考图1描述了页面展示方法。下面参考图2和3描述页面展示装置。

下面描述的装置的很多单元的功能分别与上面参考图1及随后具体实施例所描述的相应步骤的功能相同。为了避免重复，这里重点描述该装置可以具有的单元结构，而对于一些细节则不再赘述，可以参考上文中的相应描述。

图2是根据本发明的一个实施例的一种页面展示装置的示意性方框图。

如图2所示，该装置包括回退判断单元100、第二缓存页面缓存单元200、以及第二缓存页面展示单元300。

回退判断单元100判断在沿页面展示历史从当前页面回退到先前页面时是否能够从默认缓存中获得先前页面的页面内容。

第二缓存页面缓存单元200在判定无法从默认缓存中获得所述先前页面的页面内容的情况下，使用本地第二缓存来缓存页面展示历史中的页面的页面内容。

第二缓存页面展示单元300响应于沿页面展示历史回退或前进到目标页面的指令，使用本地第二缓存中缓存的相应页面内容来展示目标页面。

在一个优选实施例中，第二缓存页面缓存单元200和第二缓存页面展示单元300使用浏览器的onpopstate实现所述目标页面展示。

如上结合图1对本发明的方法及其相关优选实施例的描述，在一个优选实施例中，默认缓存可以是浏览器内核的WebView缓存，本地第二缓存可以是HTML5的sessionStorage或浏览器的history.state。

在一个优选实施例中，根据标识信息的不同取值来判断是否能够从默认缓存中获得所述先前页面的页面内容。

图3是根据本发明的一个实施例的页面展示装置可以包括的可选单元的示意性方框图。

在一个优选实施例中，页面展示装置可以可选的包括第一取值单元400和/或第二取值单元500。

第一取值单元400使用HTML5的sessionStorage在每个标签页打开时初始化所述标记信息的取值。

第二取值单元500使用浏览器的history.state在每次浏览器启动后访问第一个网页时初始化所述标记信息的取值。

本领域技术人员显而易见的是，本发明的页面展示装置可以可选的包括上述取值单元之一或两者，而不影响本发明原理的实现。

此外，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (12)

1.一种页面展示方法，包括：

判断在沿页面展示历史从当前页面回退到先前页面时是否能够从默认缓存中获得所述先前页面的页面内容；

在判断无法从所述默认缓存中获得所述先前页面的页面内容的情况下，使用本地第二缓存来缓存页面展示历史中的页面的页面内容；以及

响应于沿页面展示历史回退或前进到目标页面的指令，使用所述本地第二缓存中缓存的相应页面内容来展示所述目标页面。

2.如权利要求1所述的方法，其中所述默认缓存是浏览器内核的网络视图缓存，所述本地第二缓存是HTML5的会话存储缓存或浏览器的历史状态缓存。

3.如权利要求1所述的方法，其中根据标识信息的不同取值来判断是否能够从默认缓存中获得所述先前页面的页面内容。

4.如权利要求3所述的方法，其中所述标识信息的取值的初始化通过如下之一实现的：

使用HTML5的会话存储缓存，在每个标签页打开时初始化所述标记信息的取值；

使用浏览器的历史状态缓存，在每次浏览器启动后访问第一个网页时初始化所述标记信息的取值。

5.如权利要求3所述的方法，其中所述标识信息在能够从默认缓存中获得所述先前页面的页面内容时取值为真，否则取值为假。

6.如权利要求1-5中任一项所述的方法，其中使用第二缓存来缓存和展示目标页面通过结合使用浏览器的弹出状态处理实现，所述弹出状态处理包括回退分支和刷新分支，在能够从默认缓存中获得所述先前页面的页面内容时执行所述回退分支，否则执行所述刷新分支。

7.一种页面展示装置，包括：

回退判断单元，用于判断在沿页面展示历史从当前页面回退到先前页面时是否能够从默认缓存中获得所述先前页面的页面内容；

第二缓存页面缓存单元，用于在判定无法从所述默认缓存中获得所述先前页面的页面内容的情况下，使用本地第二缓存来缓存页面展示历史中的页面的页面内容；以及

第二缓存页面展示单元，用于响应于沿页面展示历史回退或前进到目标页面的指令，使用所述本地第二缓存中缓存的相应页面内容来展示所述目标页面。

8.如权利要求7所述的装置，其中所述默认缓存是浏览器内核的网络视图缓存，所述本地第二缓存是HTML5的会话存储缓存或浏览器的历史状态缓存。

9.如权利要求8所述的装置，其中根据标识信息的不同取值来判断是否能够从默认缓存中获得所述先前页面的页面内容。

10.如权利要求9所述的装置，其中所述标识信息的取值的初始化通过如下单元之一实现的：

第一取值单元，用于使用HTML5的会话存储缓存在每个标签页打开时初始化所述标记信息的取值；或者

第二取值单元，用于使用浏览器的历史状态缓存在每次浏览器启动后访问第一个网页时初始化所述标记信息的取值。

11.如权利要求9所述的装置，其中所述标识信息在能够从默认缓存中获得所述先前页面的页面内容时取值为真，否则取值为假。

12.如权利要求7-11中任一项所述的装置，其中所述第二缓存页面缓存单元和所述第二缓存页面展示单元通过结合使用浏览器的弹出状态处理实现所述目标页面的缓存和展示，所述弹出状态处理包括回退分支和刷新分支，在能够从默认缓存中获得所述先前页面的页面内容时执行所述回退分支，否则执行所述刷新分支。