用于显示网页内容的方法、电子设备及存储介质与流程

1.本公开涉及互联网领域，尤其涉及一种用于显示网页内容的方法、电子设备及存储介质。


背景技术：

2.为了方便阅读，目前有多种形式来阅读电子书，例如app(application，应用程序)和网页，其中，在app上可以使用客户端引擎对电子阅读页面进行渲染，实现较佳的显示效果；在网页中加载h5(hyper text markup language 5，第5版超文本标记语言)页面作为阅读页，也可以实现对电子书的阅读。
3.然而，当用户切换h5阅读页的章节或者重新设置h5阅读页的显示属性，例如字号等时，由于只有一个组件既对当前内容进行显示，又对切换后或设置后内容进行渲染，会有抹去当前内容并显示渲染后的内容的步骤；或者，通过同一个组件先利用切换后或设置后内容替换当前内容，再进行渲染的步骤，而上述步骤均产生由可视化渲染步骤导致的闪跳现象，例如，在从第一章切换至第二章时，容易导致在客户端切换显示的过程中会出现空白页停留的视觉效果，降低了针对h5阅读页的用户阅读体验。


技术实现要素：

4.为了解决上述技术问题或者至少部分地解决上述技术问题，本公开的实施例提供了一种用于显示网页内容的方法、电子设备及存储介质。
5.第一方面，本公开的实施例提供了一种用于显示网页内容的方法。上述用于显示网页内容的方法包括：在利用预设的第一组件显示当前网页内容期间，当接收到网页内容重渲染请求时，利用预设的第二组件响应所述网页内容重渲染请求，以获取待显示的目标网页内容；基于所述第二组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容。
6.第二方面，本公开的实施例提供了一种电子设备。该电子设备例如为服务器。上述电子设备包括处理器、通信接口、存储器和通信总线，其中，处理器、通信接口和存储器通过通信总线完成相互间的通信；存储器，用于存放至少一可执行指令，上述可执行指令使得上述处理器执行以下步骤：在利用预设的第一组件显示当前网页内容期间，当接收到网页内容重渲染请求时，利用预设的第二组件响应所述网页内容重渲染请求，以获取待显示的目标网页内容；基于所述第二组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容。
7.根据本公开的实施例，上述第一方面提供的用于显示网页内容的方法中或上述第二方面提供的电子设备中，所述目标网页内容被成功渲染通过以下步骤确认：获取所述目标网页内容被成功渲染的预测时长；计算渲染所述目标网页内容的累计时长；当所述累计时长达到所述预测时长时，确认所述目标网页内容被成功渲染。
8.根据本公开的实施例，上述第一方面提供的用于显示网页内容的方法中或上述第
二方面提供的电子设备中，所述第一组件与所述第二组件均包括list组件和swiper组件中的至少一种。
9.根据本公开的实施例，上述第一方面提供的用于显示网页内容的方法中或上述第二方面提供的电子设备中，所述网页内容重渲染请求包括调整网页内容的显示属性和 /或切换至新的网页内容的章节的请求。
10.根据本公开的实施例，上述第一方面提供的用于显示网页内容的方法中，所述第二组件包括所述第一组件的部分属性，所述方法还包括：在利用所述第二组件显示所述目标网页内容期间，基于所述第一组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第二组件，以切换到利用所述第一组件显示所述目标网页内容。
11.根据本公开的实施例，上述第二方面提供的电子设备中，所述第二组件包括所述第一组件的部分属性，所述可执行指令还使得所述处理器执行以下步骤：在利用所述第二组件显示所述目标网页内容期间，基于所述第一组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第二组件，以切换到利用所述第一组件显示所述目标网页内容。
12.根据本公开的实施例，上述第一方面提供的用于显示网页内容的方法中或上述第二方面提供的电子设备中，所述渲染所述目标网页内容包括：对所述目标网页内容的进行页面分页渲染重排版和渲染操作。
13.根据本公开的实施例，上述第一方面提供的用于显示网页内容的方法中或上述第二方面提供的电子设备中，所述第一组件具备渲染属性和交互属性，所述第二组件具备渲染属性，其中所述第一组件与所述第二组件所具备的渲染属性相同。
14.根据本公开的实施例，上述第一方面提供的用于显示网页内容的方法中或上述第二方面提供的电子设备中，所述网页内容为电子书籍的章节内容。
15.第三方面，本公开的实施例提供了一种计算机可读存储介质。上述计算机可读存储介质上存储有计算机程序，上述计算机程序被处理器执行时实现如上所述的用于显示网页内容的方法。
16.上述实施例中的一个或多个技术方案至少具有如下优点的部分或全部：
17.在利用预设的第一组件显示当前网页内容期间，基于所述第二组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容，能够在切换显示内容之前，利用第二组件对切换后的显示内容完成渲染，再显示第二组件渲染后的网页内容，能够利用第二组件作为现有技术中第一组件渲染过程的缓冲，确保第一组件渲染过程被隐藏，从而避免可视化渲染过程导致的闪跳现象。
附图说明
18.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
19.为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
20.图1示意性地示出了适用于本公开实施例的用于显示网页内容的方法的系统架构；
21.图2示意性地示出了根据本公开实施例的用于显示网页内容的方法的流程图；
22.图3示意性地示出了根据本公开另一实施例的用于显示网页内容的方法的流程图；
23.图4示意性地示出了根据本公开又一实施例的用于显示网页内容的方法的流程图；以及
24.图5示意性示出了本公开实施例提供的电子设备的结构框图。
具体实施方式
25.本公开的实施例提供了一种用于显示网页内容的方法、电子设备及存储介质。上述用于显示网页内容的方法包括：在利用预设的第一组件显示当前网页内容期间，当接收到网页内容重渲染请求时，利用预设的第二组件响应所述网页内容重渲染请求，以获取待显示的目标网页内容；基于所述第二组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容。
26.本公开实施例提供的用于显示网页内容的方法，可以适用于各种场景下的网页内容的显示。例如，显示的网页内容可以包括但不限于：书籍内容、新闻内容、广告内容等。示例性的应用场景可以是：终端设备的浏览器、社交平台的小程序或终端设备的快应用在利用预设的第一组件显示当前网页内容期间，当接收到网页内容重渲染请求时，利用预设的第二组件响应所述网页内容重渲染请求，向服务器发送待显示的目标网页内容加载的请求，以获取待显示的目标网页内容；基于所述第二组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容服务器响应于接收到的终端设备待显示的目标网页内容的加载请求，将待显示的目标网页内容返回至终端设备。
27.在利用预设的第一组件显示当前网页内容期间，基于所述第二组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容，能够在切换显示内容之前，利用第二组件对切换后的显示内容完成渲染，再显示第二组件渲染后的网页内容，能够利用第二组件作为现有技术中第一组件渲染过程的缓冲，确保第一组件渲染过程被隐藏，从而避免可视化渲染过程导致的闪跳现象。
28.为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开的一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
29.图1示意性地示出了适用于本公开实施例的用于显示网页内容的方法的系统架构。
30.参照图1所示，适用于本公开实施例的用于显示网页内容的方法的系统架构100包括：终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、 102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信
链路或者光纤电缆等。
31.用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有网页浏览器应用、搜索类应用、社交平台软件等(仅为示例)。
32.终端设备101、102、103可以是具有显示屏并且支持文本、图片等至少一种显示的电子设备，或者上述终端设备101、102、103也可以是具有显示屏并且支持网页浏览的电子设备。例如，上述电子设备可以包括但不限于是：智能手机、平板电脑、笔记本电脑、台式计算机、智能手表等。
33.服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的应用界面或者网页提供服务支持的后台管理服务器(仅为示例)。终端设备可以在利用预设的第一组件显示当前网页内容期间，当接收到网页内容重渲染请求时，利用预设的第二组件响应所述网页内容重渲染请求，向服务器发送待显示的目标网页内容加载的请求，以获取待显示的目标网页内容；基于所述第二组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容。后台管理服务器可以响应于接收到的终端设备待显示的目标网页内容的加载请求，将待显示的目标网页内容返回至终端设备。
34.应该理解的是，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
35.在一示例性实施场景中，用户通过终端设备上的电子书阅读类软件(例如电子书阅读类软件为：支持网页版电子书的浏览器、社交平台的小程序或终端设备的快应用) 来阅读书籍等，服务器为电子书阅读类软件提供数据支持。在某个用户打开终端设备上的网页版电子书后，该用户可以通过操作终端设备上的网页版电子书，以发起网页内容重渲染请求。相应的，在终端设备上执行本公开实施例提供的用于显示网页内容的方法。
36.尽管上述场景以电子书阅读场景下的网页内容显示作为示例，可以理解的是，本公开实施例提供的技术方案的应用场景不局限于电子书阅读场景，可以拓展至任何需要进行网页内容显示的场景。
37.下面结合附图来对本公开的实施例进行详细介绍。
38.本公开的第一个示例性实施例提供了一种用于显示网页内容的方法。
39.图2示意性地示出了根据本公开一实施例的用于显示网页内容的方法的流程图。
40.参照图2所示，本公开实施例提供的用于显示网页内容的方法，包括以下步骤： s210、s220和s230。在步骤s210，在利用预设的第一组件显示当前网页内容期间，当接收到网页内容重渲染请求时，利用预设的第二组件响应所述网页内容重渲染请求，以获取待显示的目标网页内容。
41.上述步骤s210中，预设的第一组件为用于加载、渲染和呈现当前网页内容的组件。所述网页内容重渲染请求包括调整网页内容的显示属性和/或切换至新的网页内容的章节的请求，其中，网页内容的显示属性包括网页内容的字号大小、字体类型、行段间距和文本对齐方式中的至少一种。当用户在显示界面上当前网页内容最后一页翻页或选择跳转后章节时，所述网页内容重渲染请求为切换至新的网页内容的章节的请求。当用户在显示界面上选择网页内容的显示属性时，所述网页内容重渲染请求为调整网页内容的显示属性。预
设的第二组件为用于加载和渲染待显示的目标网页内容，并呈现渲染后的目标网页内容的组件。所述网页内容为电子书籍的章节内容。
42.在一实施例中，预设的第一组件通过以下步骤加载、渲染和呈现当前网页内容：对当前网页内容进行分页，并对分页后的网页内容配置交互功能，其中，所述交互功能包括但不限于显示可打开的插页广告、对网页内容的显示属性进行调整、对网页内容的显示位置进行调整、查看网页内容的显示目录。
43.在一实施例中，所述第一组件与所述第二组件均包括list组件和swiper组件中的至少一种。当用户设置为通过横向滑动翻页时，所述第一组件与所述第二组件均包括 swiper组件；当用户设置为通过纵向滑动翻页时，所述第一组件与所述第二组件均包括list组件。
44.在步骤s220，基于所述第二组件，渲染所述目标网页内容。
45.上述步骤s220中，第二组件与第一组件的属性可以相同，也可以不同。当第二组件与第一组件不同时，在所述待显示的目标网页内容相同的情况下，第二组件与第一组件相比，第二组件用于加载和渲染待处理网页内容，并呈现目标网页内容，第一组件在加载待显示的目标网页内容这一步骤与第二组件相同，在渲染待显示的目标网页内容这一步，比第二组件的渲染复杂，因此，第一组件与第二组件渲染后的目标网页内容不同。
46.在一实施例中，所述渲染所述目标网页内容包括：对所述目标网页内容的进行页面分页渲染重排版和渲染操作，其中，页面重排版包括但不限于分页、设置对应的字体大小和行间距等。利用预设的第二组件执行加载和渲染所述待显示的目标网页内容，可以包括：对所述重渲染请求中待显示的目标网页内容进行调整，并对调整后待显示的目标网页内容进行分页；在所述待显示的目标网页内容相同的情况下，利用第一组件执行加载和渲染所述待显示的目标网页内容，可以包括：按照调整请求对所述调整请求中待处理网页内容进行调整，对调整后待处理网页内容进行分页，并对分页后的调整后待处理网页内容配置交互功能。
47.在步骤s230，在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容。
48.在第二组件将目标网页内容成功渲染时，将利用第一组件显示当前网页内容的状态转换为利用第二组件显示目标网页内容的状态，实现转换过程无缝衔接，从而避免转换过程中即将显示的内容还没有完成渲染而导致的闪跳或抖动现象。
49.图3示意性地示出了根据本公开另一实施例的用于显示网页内容的方法的流程图。
50.根据本公开的实施例，上述用于显示网页内容的方法除了包括上述步骤 s210～s230之外，还包括以下步骤：
51.s310，获取所述目标网页内容被成功渲染的预测时长；
52.s320，计算渲染所述目标网页内容的累计时长；
53.s330，判断所述累计时长是否达到所述预测时长：
54.若是，则执行步骤s340；
55.若否，则返回步骤s320；
56.s340，确认所述目标网页内容被成功渲染。
57.上述步骤s310～s340在上述步骤s230之前执行。
58.步骤s310～s340通过对比时长大小判断所述目标网页内容是否被成功渲染，在实际应用中，还可以通过以下步骤判断所述目标网页内容是否被成功渲染：实时检测所述目标网页内容被渲染的运行状态；当所述目标网页内容被渲染的运行状态为结束时，确认所述目标网页内容被成功渲染。
59.图4示意性地示出了根据本公开又一实施例的用于显示网页内容的方法的流程图。
60.根据本公开的实施例，所述第二组件包括所述第一组件的部分属性，上述用于显示网页内容的方法除了包括上述步骤s210～s230之外，还包括以下步骤：s410，在利用所述第二组件显示所述目标网页内容期间，基于所述第一组件，渲染所述目标网页内容；s420，在所述目标网页内容被成功渲染时，隐藏所述第二组件，以切换到利用所述第一组件显示所述目标网页内容。
61.在一实施例中，当所述第二组件包括所述第一组件的部分属性时，所述第一组件具备渲染属性和交互属性，所述第二组件具备渲染属性，其中所述第一组件与所述第二组件所具备的渲染属性相同，使得所述基于所述第一组件渲染的目标网页内容可以为用于呈现的网页内容，所述基于所述第二组件渲染的目标网页内容可以为用于交互的网页内容。
62.上述步骤s410～s420中，由于显示页面的多种响应事件需要第一组件来支持，因此，用于显示网页内容的方法的整个流程为利用第一组件显示原网页内容(用于交互的网页内容)——利用第二组件显示新网页内容(用于显示的网页内容)——利用第一组件显示新网页内容(用户交互的网页内容)，与现有技术中利用第一组件显示原网页内容——利用第一组件显示新网页内容相比，利用第二组件显示新网页内容作为缓冲步骤，隐藏了现有技术中利用第一组件渲染网页内容生成新网页内容的过程，从而避免了该过程导致的闪跳问题。
63.基于上述步骤s410～s420，由最初的利用第一组件显示当前网页内容到最终的利用第一组件显示目标网页内容，且利用第一组件显示的目标网页内容为用于交互的目标网页内容，能够在再次接收到网页内容重渲染请求时触发新一轮的显示网页内容的方法。
64.基于上述步骤s410～s420，在第一组件成功渲染所述目标网页内容时，将利用第二组件显示目标网页内容的状态转换为利用第一组件显示目标网页内容的状态，实现转换过程无缝衔接，从而避免转换过程中即将显示的内容还没有完成渲染而导致的闪跳或抖动现象。
65.本公开的实施例提供的上述各个技术方案可以全部或部分步骤以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(dsp)来实现根据本公开的实施例的电子设备中的一些或者全部部件的一些或者全部功能。本公开的实施例还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。实现本公开的实施例的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
66.本公开的第二个示例性实施例提供了一种电子设备。
67.图5示意性示出了本公开实施例提供的电子设备的结构框图。
68.参照图5所示，本公开实施例提供的电子设备1100包括处理器1101、通信接口1102、存储器1103和通信总线1104，其中，处理器1101、通信接口1102和存储器1103通过通信总线1104完成相互间的通信；存储器1103，用于存放至少一可执行指令；处理器1101，用于执行存储器上所存放的可执行指令时，实现如上所述的用于显示网页内容的方法。
69.具体而言，当实现上述用于显示网页内容的方法时，上述可执行指令使得上述处理器执行以下步骤：
70.在利用预设的第一组件显示当前网页内容期间，当接收到网页内容重渲染请求时，利用预设的第二组件响应所述网页内容重渲染请求，以获取待显示的目标网页内容；基于所述第二组件，渲染所述目标网页内容；在所述目标网页内容被成功渲染时，隐藏所述第一组件，以切换到利用所述第二组件显示所述目标网页内容。上述各个步骤的详细实施过程以及上述用于显示网页内容的方法中进一步包括的步骤可以参照第一个实施例的描述，这里不再赘述。
71.上述应用软件可以是以下软件中的一种或多种：电子书阅读类软件(例如电子书阅读类软件为：支持网页版电子书的浏览器、社交平台的小程序或终端设备的快应用) 等。
72.上述存储器1103可以是诸如闪存、eeprom(电可擦除可编程只读存储器)、 eprom、硬盘或者rom之类的电子存储器。存储器1103具有用于执行上述方法中的任何方法步骤的程序代码的存储空间。例如，用于程序代码的存储空间可以包括分别用于实现上面的方法中的各个步骤的各个程序代码。这些程序代码可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘，光盘(cd)、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为便携式或者固定存储单元。该存储单元可以具有与上述电子设备中的存储器1103类似布置的存储段或者存储空间等。程序代码可以例如以适当形式进行压缩。通常，存储单元包括用于执行根据本公开的实施例的方法步骤的程序，即可以由例如诸如1101之类的处理器读取的代码，这些代码当由电子设备运行时，导致该电子设备执行上面所描述的方法中的各个步骤。
73.本公开的第三个示例性实施例还提供了一种计算机可读存储介质。上述计算机可读存储介质上存储有计算机程序，上述计算机程序被处理器执行时实现如上所述的用于显示网页内容的方法。
74.该计算机可读存储介质可以是上述实施例中描述的设备/装置中所包含的；也可以是单独存在，而未装配入该设备/装置中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。
75.根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
76.需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者步骤与另一个实体或步骤区分开来，而不一定要求或者暗示这些实体或步骤之
间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
77.以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。