CN112306587A - 页面的显示处理方法、装置、及终端设备 - Google Patents
页面的显示处理方法、装置、及终端设备 Download PDFInfo
- Publication number
- CN112306587A CN112306587A CN201910637444.9A CN201910637444A CN112306587A CN 112306587 A CN112306587 A CN 112306587A CN 201910637444 A CN201910637444 A CN 201910637444A CN 112306587 A CN112306587 A CN 112306587A
- Authority
- CN
- China
- Prior art keywords
- page
- file
- view component
- client
- server
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title abstract description 15
- 238000012545 processing Methods 0.000 claims abstract description 32
- 238000009877 rendering Methods 0.000 claims abstract description 31
- 238000000034 method Methods 0.000 claims abstract description 26
- 230000001960 triggered effect Effects 0.000 claims abstract description 19
- 230000015654 memory Effects 0.000 claims description 24
- 238000010586 diagram Methods 0.000 description 10
- 230000008569 process Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 230000003993 interaction Effects 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000014509 gene expression Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000036316 preload Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种页面的显示处理方法、装置、终端设备及存储介质；方法包括：通过客户端创建至少一个网络视图组件，并在所述至少一个网络视图组件中预加载页面公共资源；当所述客户端的页面被触发时，查询预加载有与所述页面对应的页面公共资源的网络视图组件，以及查询与所述页面的地址对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示所述页面的内容；向服务器请求所述页面的更新版本的文件，并更新所述页面的缓存文件。通过本发明，能够提升页面的加载速度。
Description
技术领域
本发明涉及互联网技术领域，尤其涉及一种页面的显示处理方法、装置、终端设备及存储介质。
背景技术
移动操作***中内置网络视图(Webview)组件，供安装于终端的客户端可以调用Webview组件实现页面的显示。当客户端请求访问页面时，先创建Webview组件，并向服务器发送数据资源获取请求，以获取显示目标页面所需的所有数据资源。将获取到的数据资源在上述创建的Webview组件中去进行渲染，从而显示页面。通过上述方式显示页面时，整个数据资源获取以及渲染的过程耗时较长，导致页面显示速度慢，使用效率低。
发明内容
本发明实施例提供一种页面的显示处理方法、装置、终端设备及存储介质，能够优化页面加载Webview组件的耗时，从而提升加载页面的速度。
本发明实施例的技术方案是这样实现的：
本发明实施例提供一种页面的显示处理方法，包括：
通过客户端创建至少一个网络视图组件，并在所述至少一个网络视图组件中预加载页面公共资源；
当所述客户端的页面被触发时，查询预加载有与所述页面对应的页面公共资源的网络视图组件，以及
查询与所述页面的地址对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示所述页面的内容；
向服务器请求所述页面的更新版本的文件，并更新所述页面的缓存文件。
本发明实施例提供一种页面的显示处理装置，包括：
创建模块，用于通过客户端创建至少一个网络视图组件，并在所述至少一个网络视图组件中预加载页面公共资源；
查询模块，用于当所述客户端的页面被触发时，查询预加载有与所述页面对应的页面公共资源的网络视图组件，以及
用于查询与所述页面的地址对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示所述页面的内容；
请求更新模块，用于向服务器请求所述页面的更新版本的文件，并更新所述页面的缓存文件。
上述方案中，所述创建模块，还用于当所述客户端被启动、所述客户端从后台切换至前台、或所述客户端跳转到设定的界面时，通过所述客户端预创建包括至少一个网络视图组件的网络视图组件池，并在所述网络视图组件池中的每个网络视图组件中加载页面公共资源的页面模板文件。
上述方案中，所述创建模块，还用于加载所述页面公共资源对应的公共超文本标记语言文件的固定链接，或者，加载所述页面公共资源对应的离线包形式的本地文件，其中，所述本地文件中包括公共超文本标记语言文件、公共层叠样式表以及公共脚本语言。
上述方案中，所述请求更新模块，还用于向服务器发送页面请求，其中，所述页面请求包括所述页面的缓存文件的模板版本号和数据版本号；当所述页面的缓存文件的模板版本号与所述服务器中的模板版本号不一致时，接收所述服务器发送的更新后的页面模板文件和页面数据文件；当所述页面的缓存文件的模板版本号与所述服务器中的模板版本号一致，且所述页面的缓存文件的数据版本号与所述服务器中的数据版本号不一致时，接收所述服务器发送的更新后的页面数据文件。
上述方案中，页面的显示处理装置还包括创建加载模块，用于当未查询到预加载有与所述页面对应的页面公共资源的网络视图组件时，创建新的网络视图组件，并在所述新的网络视图组件中加载所述页面对应的页面公共资源；查询与所述页面的地址对应的缓存文件，并发送到所述新的网络视图组件中进行渲染，以显示所述页面的内容。
上述方案中，页面的显示处理装置还包括触发请求模块，用于当未查询到与所述页面的地址对应的缓存文件时，触发前端代码进行页面加载操作，以使前端代码向服务器请求所述页面地址对应的文件，以及将所述页面地址对应的文件发送到查询到的网络视图组件进行渲染，以显示所述页面的内容。
本发明实施例提供一种终端设备，包括：
存储器，用于存储可执行指令；
处理器，用于执行所述存储器中存储的可执行指令时，实现本发明实施例提供的方法。
本发明实施例提供一种存储介质，存储有可执行指令，用于引起处理器执行时，实现本发明实施例提供的页面的显示处理方法。
本发明实施例具有以下有益效果：
本发明实施例通过查询与页面的地址相对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示页面的内容，提升了页面加载速度；并且通过使用客户端本地缓存，以及在网络视图组件中先进行渲染后再进行页面的更新，从而当二次加载页面时可以进一步加载速度，同时也提升了首次用户的加载速度。
附图说明
图1是本发明实施例提供的页面的显示处理方法的一个可选应用场景示意图；
图2是本发明实施例提供的页面的显示处理装置的一个可选的结构示意图；
图3是本发明实施例提供的终端实现页面显示的一个可选的框架图；
图4是实现本发明实施例的页面的显示处理方法的一个可选的流程示意图；
图5是实现本发明实施例的页面的显示处理方法的一个可选的流程示意图；
图6是实现本发明实施例的页面的显示处理方法的一个可选的流程示意图；
图7是实现本发明实施例的页面的显示处理方法的一个可选的流程示意图；
图8是实现本发明实施例的页面的显示处理方法的一个可选的流程示意图；
图9A是实现本发明实施例的页面的显示处理方法的一个可选的应用场景示意图；
图9B是实现本发明实施例的页面的显示处理方法的一个可选的应用场景示意图。
具体实施方式
为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，所描述的实施例不应视为对本发明的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。
除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本发明实施例的目的，不是旨在限制本发明。
对本发明实施例进行进一步详细说明之前，对本发明实施例中涉及的名词和术语进行说明，本发明实施例中涉及的名词和术语适用于如下的解释。
1)客户端，是终端设备中的原生应用(APP)，例如混合模式移动应用(HybridApp)。
2)前端，是客户端加载的页面中的前端代码(例如JavaScript代码)，负责实现页面的渲染和与交互相关的业务逻辑，可以和客户端进行交互。
3)网络视图组件，是终端设备的操作***中内置的用于显示页面的容器。
4)H5页面，是网络页面(简称网页)。
5)直出，即服务器渲染(SSR，Server Side Render)，具体是在服务器将页面模板文件和页面数据文件进行拼接，渲染完成后返回至客户端。
本发明实施例提供一种页面的显示处理方法、装置、终端设备和存储介质，下面说明本发明实施例提供的页面的显示处理设备的示例性应用，本发明实施例提供的终端设备可以实施为笔记本电脑，平板电脑，台式计算机，机顶盒，移动设备(例如，移动电话，便携式音乐播放器，个人数字助理，专用消息设备，便携式游戏设备)等各种类型的用户终端。下面将说明终端设备(下文也简称为终端)的示例性应用。
参见图1，图1是本发明实施例提供的页面的显示处理***100的一个可选的架构示意图。页面的显示处理***100包括有：服务器200、网络300、终端400以及终端400中的客户端410。基于页面的显示处理***100，当用户通过终端400触发客户端410的页面时，首先客户端410查询预加载有与页面对应的页面公共资源的网络视图组件以及页面的地址对应的缓存文件，并且通过网络300向服务器200请求页面的更新版本的文件，并根据页面的更新版本的文件更新页面的缓存文件，然后将页面的地址对应的缓存文件发送到网络视图组件中进行渲染，从而在客户端410显示被用户触发的页面。
参见图2，图2是本发明实施例提供的终端400的结构示意图，图2所示的终端400包括：至少一个处理器460、存储器450、至少一个网络接口420和用户接口430。终端400中的各个组件通过总线***440耦合在一起。可理解，总线***440用于实现这些组件之间的连接通信。总线***440除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图2中将各种总线都标为总线***440。
处理器460可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。
用户接口430包括使得能够呈现媒体内容的一个或多个输出装置431，包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口430还包括一个或多个输入装置432，包括有助于用户输入的用户接口部件，比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。
存储器450可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器450可选地包括在物理位置上远离处理器460的一个或多个存储设备。
存储器450包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM，Read Only Memory)，易失性存储器可以是随机存取存储器(RAM，Random Access Memory)。本发明实施例描述的存储器450旨在包括任意适合类型的存储器。
在一些实施例中，存储器450能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。
操作***451，包括用于处理各种基本***服务和执行硬件相关任务的***程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务；
网络通信模块452，用于经由一个或多个(有线或无线)网络接口420到达其他计算设备，示例性的网络接口420包括：蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB，Universal Serial Bus)等；
呈现模块453，用于经由一个或多个与用户接口430相关联的输出装置431(例如，显示屏、扬声器等)使得能够呈现信息(例如，用于操作***设备和显示内容和信息的用户接口)；
输入处理模块454，用于对一个或多个来自一个或多个输入装置432之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。
在一些实施例中，本发明实施例提供的页面的显示处理装置可以采用软件方式实现，图2示出了存储在存储器450中的页面的显示处理装置455，其可以是程序和插件等形式的软件，包括以下软件模块：创建模块4551、查询模块4552和请求更新模块4553，这些模块是可以是逻辑功能模块，因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。
在另一些实施例中，本发明实施例提供的页面的显示处理装置可以采用硬件方式实现，作为示例，本发明实施例提供的页面的显示处理装置可以是采用硬件译码处理器形式的处理器，其被编程以执行本发明实施例提供的页面的显示处理方法，例如，硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC，Application SpecificIntegrated Circuit)、DSP、可编程逻辑器件(PLD，Programmable Logic Device)、复杂可编程逻辑器件(CPLD，Complex Programmable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable Gate Array)或其他电子元件。
将结合本发明实施例提供的终端的示例性应用和实施，说明本发明实施例提供的页面的显示处理方法。
参见图3，图3是本发明实施例提供的终端实现页面显示的一个可选的原理示意图。在一些实施例中，客户端可以为安装于终端上的第三方应用程序，客户端中可以从服务器请求页面的相关文件，显示符合超文本标记语言(HTML，Hyper Text Markup Language)标准(例如HTML5)的页面，页面中的代码即前端代码(例如JavaScript代码)负责页面的业务逻辑，客户端可以调用前端代码来实现页面中的与用户交互相关的逻辑，同时，客户端中封装的原生功能可以封装成应用程序编程接口(API，Application ProgrammingInterface)的形式供前端代码调用，从而在页面中实现客户端的原生功能。客户端和前端代码以Webview组件作为媒介建立通信，从而使客户端既拥有页面开发的速度优势，又能拥有强大的原生能力。
继续参见图4，图4是以终端中的上述客户端为例说明页面的显示处理方法的一个可选的流程示意图，将结合图4示出的步骤进行具体说明。
在步骤S101中，客户端创建至少一个网络视图组件，并在至少一个网络视图组件中预加载页面公共资源。
在一些实施例中，当客户端被启动、客户端从后台切换至前台、或客户端跳转到设定的界面时，通过客户端预创建包括至少一个Webview组件的Webview组件池，并在Webview组件池中的每个Webview组件中加载页面公共资源的页面模板文件，其中，上述Webview组件即网络视图组件。
在另一些实施例中，加载页面公共资源的页面模板文件可以是加载页面公共资源对应的公共HTML文件的固定链接；也可以是加载页面公共资源对应的离线包形式的本地文件，其中，本地文件中包括公共HTML文件、公共层叠样式表(CSS，Cascading Style Sheets)以及公共脚本语言(JS，JavaScript)。
作为获取页面公共资源的示例，客户端对应的页面公共资源可以存储在客户端的安装文件中，当客户端在终端上被安装后，客户端会将页面公共资源释放到客户端在终端中的文件中。当客户端被运行时可以直接从文件中取出对应的页面公共资源。
作为获取页面公共资源的另一示例，还可以将页面公共资源存储在服务器中。客户端在终端中运行时，从服务器中获取该页面公共资源。
作为获取页面公共资源的又一示例，还可以将上述页面公共资源存储在客户端对应的服务器中。客户端运行时自动从服务器中获取该页面公共资源并进行缓存。
可以理解，还可以通过其它的方式获取客户端对应的页面公共资源，本发明对获取客户端对应的页面公共资源的具体方式方面不限定。
作为示例，参见图5，图5是实现本发明实施例的页面的显示处理方法的一个可选的流程示意图，当客户端被触发时，首先预创建一个或多个Webview组件，然后在每个Webview组件中加载页面公共资源对应的公共HTML文件，公共HTML文件可以是线上的一个固定链接，也可以是基于离线包形式的本地文件，包含了页面的公共HTML，公共CSS以及公共JS代码。其中，上述公共HTML文件是客户端页面的公共部分，可以根据不同的客户端建立不同的公共HTML文件，也可以根据不同的客户端建立相同的公共HTML文件。
在步骤S102中，当客户端的页面被触发时，客户端查询预加载有与页面对应的页面公共资源的网络视图组件。
在一些实施例中，当客户端的页面被触发时，客户端可以从步骤S101中建立的Webview组件池中查询到与页面对应的已经加载好页面公共资源的Webview组件。
作为示例，参见图6，图6是实现本发明实施例的页面的显示处理方法的一个可选的流程示意图。当客户端页面被触发，并且在上述的Webview组件池中存在与客户端页面对应的加载好页面公共资源的Webview组件时，则客户端从上述Webview组件池中取出一个加载好页面公共资源的Webview组件并进行使用。
在步骤S103中，客户端查询与页面的地址对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示页面的内容。
在一些实施例中，客户端从终端中查询到与页面的地址对应的缓存文件，将页面的地址对应的缓存文件发送到查询到的Webview组件中进行渲染，并显示页面的内容。
例如，可以通过如下过程在上述Webview组件中去进行渲染：首先，采用该Webview组件加载和解析页面公共资源中的公共HTML文件，然后，对页面公共资源中的公共JS代码进行解析、编译以及执行，对页面公共资源中的公共CSS文件进行解析，构建文档对象模型(DOM，Document Object Model)树以及渲染树。最后，将与页面的地址对应的缓存文件的数据进行解析，完成渲染过程。
作为示例，参见图6，当终端中有与页面的地址对应的本地缓存(Cache)时，客户端直接读取与页面的地址对应的缓存文件并发送到查询到的Webview组件中进行渲染，从而在客户端中显示页面的内容。
在步骤S104中，客户端向服务器请求页面的更新版本的文件，在步骤S105中，客户端根据服务器返回的文件更新客户端的页面的缓存文件。
在一些实施例中，向服务器发送页面请求，其中，页面请求包括页面的缓存文件的模板版本号和数据版本号；当页面的缓存文件的模板版本号与服务器中的模板版本号不一致时，接收服务器发送的更新后的页面模板文件和页面数据文件；当页面的缓存文件的模板版本号与服务器中的模板版本号一致，且页面的缓存文件的数据版本号与服务器中的数据版本号不一致时，接收服务器发送的更新后的页面数据文件。并根据服务器返回的文件更新客户端页面的缓存文件。
作为示例，参见图7，客户端向服务器发送页面请求，并在请求中附带当前页面缓存的模板版本号和数据版本号。服务器需要接入直出，并且根据请求中的当前页面缓存文件的版本号跟服务器中的文件版本号进行对比，从而决定返回至客户端的内容。①当页面的缓存文件的模板版本号与服务器中的模板版本号不一致时，模板需要更新，服务器则重新渲染页面模板文件和页面数据文件返回给前端代码，前端代码更新整个页面；②当页面的缓存文件的模板版本号与服务器中的模板版本号一致，且页面的缓存文件的数据版本号与服务器中的数据版本号不一致时，数据需要更新，服务器只返回页面数据文件给前端代码，前端代码只使用数据异步更新页面内容的数据部分；③当页面的缓存文件的模板版本号与服务器中的模板版本号一致，且页面的缓存文件的数据版本号与服务器中的数据版本号一致，无需更新，服务器不返回新的内容给前端代码，前端代码无需更新。
通过查询与页面的地址相对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示页面的内容，提升了页面加载速度。
参见图8，图8为本申请实施例提供的页面的显示处理方法的一个可选的流程示意图，图8示出了步骤S102至步骤S103可以通过步骤S201至步骤S202实现，将结合各步骤进行说明。
在步骤201中，当客户端的页面被触发，并且未查询到预加载有与页面对应的页面公共资源的网络视图组件时，客户端创建新的网络视图组件，并在新的网络视图组件中加载页面对应的页面公共资源。
在一些实施例中，当客户端的页面被触发，并且在步骤S101中建立的Webview组件池中未查询到与页面对应的已经加载好页面公共资源的Webview组件时，客户端创建新的Webview组件，并在新的Webview组件中加载页面对应的页面公共资源。
作为示例，参见图6，当客户端页面被触发时，并且在上述的Webview组件池中不存在与客户端页面对应的加载好页面公共资源的Webview组件时，则创建新的Webview组件，并在新的Webview组件中加载页面对应的页面公共资源。其中，在Webview组件池中查询是否存在加载好页面公共资源的Webview组件的过程和创建新的Webview组件并在新的Webview组件中加载页面公共资源的过程可以并行执行。
在步骤202中，客户端查询与所述页面的地址对应的缓存文件，并发送到所述新的网络视图组件中进行渲染，以显示所述页面的内容。
在一些实施例中，步骤S103还可以采用这样的方式实现：当未查询到与页面的地址对应的缓存文件时，客户端触发前端代码进行页面加载操作，以使前端代码向服务器请求页面地址对应的文件，将页面地址对应的文件发送到查询到的网络视图组件进行渲染，以显示页面的内容(步骤S301)。
作为示例，参见图6，当终端中没有与页面的地址对应的本地缓存时，则客户端调用前端代码通知前端代码页面加载开始，然后令前端代码发起异步的JavaScript和XML(Ajax，Asynchronous JavaScript And XML)请求，请求页面的地址，并发送到Webview组件中加载页面以显示页面的内容。通过令前端代码发起异步Ajax请求，可以不必更新整个页面就可以显示新获取的数据。
下面，将结合图6说明本发明实施例在一个实际的应用场景中的示例性应用。
在步骤S401中，客户端被触发后，立即预创建固定个数(至少1个，视终端性能可多个)的Webview组件池，并加载一个固定的页面公共资源的公共HTML文件(例如common.html)。其中，公共HTML文件可以是线上的一个固定链接，也可以是基于离线包技术的本地文件，包含了页面的公共HTML，公共CSS以及公共JS代码。需要指出的是，上述公共HTML文件是客户端所有页面的公共部分，可以根据不同的客户端建立不同的公共HTML文件，也可以根据不同的客户端建立相同的公共HTML文件。
在步骤S402中，当客户端的H5页面被触发时，客户端先从步骤S201中建立的的Webview组件池中查询是否存在可用的预加载好公共HTML文件的Webview组件，当存在时，则从Webview组件池取出一个并进行使用；当不存在时，则客户端创建新的Webview组件，并在新的Webview组件中加载页面对应的页面公共资源。
在步骤S403中，客户端根据触发的页面的地址查找本地缓存(相当于客户端自己维护的一个缓存，将服务器返回的请求存储在本地，并和页面地址建立一个映射关系)，查看本地缓存中是否有与页面的地址对应的缓存文件，当存在时，则将页面的地址对应的缓存文件发送到Webview组件中进行渲染，并显示页面的内容。
在步骤S404中，客户端并行发送页面请求到达服务器，并在请求中附带当前页面的缓存文件的模板版本号和数据版本号，服务器返回最新的页面内容，客户端使用该返回报文重新更新本地缓存，给下次打开页面时在步骤203中使用。
在步骤S405中，如果在步骤203中没有查询到与页面的地址对应的缓存文件时，则客户端调用前端代码通知前端代码页面加载开始，然后令前端代码发起异步Ajax请求，向服务器请求页面的地址，并将页面地址发送到Webview组件里加载页面。
在步骤S406中，服务器接受到客户端发送的请求时，服务器需要接入直出，并且根据请求中的当前页面缓存文件的版本号跟服务器中的文件版本号进行对比，从而决定返回至客户端的内容。①当页面的缓存文件的模板版本号与服务器中的模板版本号不一致时，模板需要更新，服务器则重新渲染页面模板文件和页面数据文件返回给前端代码，前端代码更新整个页面；②当页面的缓存文件的模板版本号与服务器中的模板版本号一致，且页面的缓存文件的数据版本号与服务器中的数据版本号不一致时，数据需要更新，服务器只返回页面数据文件给前端代码，前端代码只使用数据异步更新页面内容的数据部分；③当页面的缓存文件的模板版本号与服务器中的模板版本号一致，且页面的缓存文件的数据版本号与服务器中的数据版本号一致，无需更新，服务器不返回新的内容给前端代码，前端代码无需更新。
作为示例，当触发客户端的图9A页面“信用分”所对应的触发按钮501时，将更新页面(即采用本发明实施例提供的页面的显示处理方法更新页面)，并在客户端显示如图9B所示的触发“信用分”所对应的页面。然后，当触发图9B所示的“返回”触发按钮502时，使用客户端的缓存文件显示图9A页面，无需再次请求，从而加载效率高。
下面继续说明本发明实施例提供的页面的显示处理装置455的实施为软件模块的示例性结构，在一些实施例中，如图2所示，存储在存储器450的显示处理装置455中的软件模块可以包括：创建模块4551、查询模块4552和请求更新模块4553。
创建模块，用于通过客户端创建至少一个网络视图组件，并在所述至少一个网络视图组件中预加载页面公共资源；
查询模块，用于当所述客户端的页面被触发时，查询预加载有与所述页面对应的页面公共资源的网络视图组件，以及
用于查询与所述页面的地址对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示所述页面的内容；
请求更新模块，用于向服务器请求所述页面的更新版本的文件，并更新所述页面的缓存文件。
在一些实施例中，所述创建模块，还用于当所述客户端被启动、所述客户端从后台切换至前台、或所述客户端跳转到设定的界面时，通过所述客户端预创建包括至少一个网络视图组件的网络视图组件池，并在所述网络视图组件池中的每个网络视图组件中加载页面公共资源的页面模板文件。
在一些实施例中，所述创建模块，还用于加载所述页面公共资源对应的公共超文本标记语言文件的固定链接，或者，加载所述页面公共资源对应的离线包形式的本地文件，其中，所述本地文件中包括公共超文本标记语言文件、公共层叠样式表以及公共脚本语言。
在一些实施例中，所述请求更新模块，还用于向服务器发送页面请求，其中，所述页面请求包括所述页面的缓存文件的模板版本号和数据版本号；当所述页面的缓存文件的模板版本号与所述服务器中的模板版本号不一致时，接收所述服务器发送的更新后的页面模板文件和页面数据文件；当所述页面的缓存文件的模板版本号与所述服务器中的模板版本号一致，且所述页面的缓存文件的数据版本号与所述服务器中的数据版本号不一致时，接收所述服务器发送的更新后的页面数据文件。
在一些实施例中，页面的显示处理装置还包括创建加载模块，用于当未查询到预加载有与所述页面对应的页面公共资源的网络视图组件时，创建新的网络视图组件，并在所述新的网络视图组件中加载所述页面对应的页面公共资源；查询与所述页面的地址对应的缓存文件，并发送到所述新的网络视图组件中进行渲染，以显示所述页面的内容。
在一些实施例中，页面的显示处理装置还包括触发请求模块，用于当未查询到与所述页面的地址对应的缓存文件时，触发前端代码进行页面加载操作，以使前端代码向服务器请求所述页面地址对应的文件，以及将所述页面地址对应的文件发送到查询到的网络视图组件进行渲染，以显示所述页面的内容。
本发明实施例提供一种存储有可执行指令的存储介质，其中存储有可执行指令，当可执行指令被处理器执行时，将引起处理器执行本发明实施例提供的方法，例如，如图4示出的方法。
在一些实施例中，存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。
在一些实施例中，可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言(包括编译或解释语言，或者声明性或过程性语言)来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例，可执行指令可以但不一定对应于文件***中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在HTML文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。
作为示例，可执行指令可被部署为在一个计算设备上执行，或者在位于一个地点的多个计算设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算设备上执行。
综上所述，本发明实施例具有以下有益效果：
1)在命中预加载Webview组件的场景下，优化了Webview组件加载过程，减少了加载Webview组件所需的时间，降低白屏等待时间。
2)服务器渲染的方式将请求个数缩减至1个，减少多次发送请求，提升后续加载的速度。
3)使用客户端本地缓存，二次加载页面的速度等同于原生体验速度，页面可极速打开。
以上所述，仅为本发明的实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本发明的保护范围之内。
Claims (10)
1.一种页面的显示处理方法，其特征在于，包括：
通过客户端创建至少一个网络视图组件，并在所述至少一个网络视图组件中预加载页面公共资源；
当所述客户端的页面被触发时，查询预加载有与所述页面对应的页面公共资源的网络视图组件，以及
查询与所述页面的地址对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示所述页面的内容；
向服务器请求所述页面的更新版本的文件，并更新所述页面的缓存文件。
2.根据权利要求1所述的方法，其特征在于，所述通过客户端创建至少一个网络视图组件，并在所述至少一个网络视图组件中预加载页面公共资源，包括：
当所述客户端被启动、所述客户端从后台切换至前台、或所述客户端跳转到设定的界面时，
通过所述客户端预创建包括至少一个网络视图组件的网络视图组件池，并在所述网络视图组件池中的每个网络视图组件中加载页面公共资源的页面模板文件。
3.根据权利要求2所述的方法，其特征在于，所述加载页面公共资源的页面模板文件，包括：
加载所述页面公共资源对应的公共超文本标记语言文件的固定链接，或者，
加载所述页面公共资源对应的离线包形式的本地文件，其中，所述本地文件中包括公共超文本标记语言文件、公共层叠样式表以及公共脚本语言。
4.根据权利要求1所述的方法，其特征在于，所述向服务器请求所述页面的更新版本的文件，包括：
向服务器发送页面请求，其中，所述页面请求包括所述页面的缓存文件的模板版本号和数据版本号；
当所述页面的缓存文件的模板版本号与所述服务器中的模板版本号不一致时，接收所述服务器发送的更新后的页面模板文件和页面数据文件；
当所述页面的缓存文件的模板版本号与所述服务器中的模板版本号一致，且所述页面的缓存文件的数据版本号与所述服务器中的数据版本号不一致时，接收所述服务器发送的更新后的页面数据文件。
5.根据权利要求1所述的方法，所述方法还包括：
当未查询到预加载有与所述页面对应的页面公共资源的网络视图组件时，
创建新的网络视图组件，并在所述新的网络视图组件中加载所述页面对应的页面公共资源；
查询与所述页面的地址对应的缓存文件，并发送到所述新的网络视图组件中进行渲染，以显示所述页面的内容。
6.根据权利要求1至5任一项所述的方法，所述方法还包括：
当未查询到与所述页面的地址对应的缓存文件时，
触发前端代码进行页面加载操作，以使前端代码向服务器请求所述页面地址对应的文件，以及
将所述页面地址对应的文件发送到查询到的网络视图组件进行渲染，以显示所述页面的内容。
7.一种页面的显示处理装置，其特征在于，包括：
创建模块，用于通过客户端创建至少一个网络视图组件，并在所述至少一个网络视图组件中预加载页面公共资源；
查询模块，用于当所述客户端的页面被触发时，查询预加载有与所述页面对应的页面公共资源的网络视图组件，以及
用于查询与所述页面的地址对应的缓存文件，并发送到查询到的网络视图组件中进行渲染，以显示所述页面的内容；
请求更新模块，用于向服务器请求所述页面的更新版本的文件，并更新所述页面的缓存文件。
8.根据权利要求7所述的装置，其特征在于，
所述创建模块，还用于当所述客户端被启动、所述客户端从后台切换至前台、或所述客户端跳转到设定的界面时，通过所述客户端预创建包括至少一个网络视图组件的网络视图组件池，并在所述网络视图组件池中的每个网络视图组件中加载页面公共资源的页面模板文件。
9.根据权利要求7所述的装置，其特征在于：
所述创建模块，还用于加载所述页面公共资源对应的公共超文本标记语言文件的固定链接，或者，
加载所述页面公共资源对应的离线包形式的本地文件，其中，所述本地文件中包括公共超文本标记语言文件、公共层叠样式表以及公共脚本语言。
10.一种终端设备，其特征在于，包括：
存储器，用于存储可执行指令；
处理器，用于执行所述存储器中存储的可执行指令时，实现权利要求1至6任一项所述的页面的显示处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910637444.9A CN112306587A (zh) | 2019-07-15 | 2019-07-15 | 页面的显示处理方法、装置、及终端设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910637444.9A CN112306587A (zh) | 2019-07-15 | 2019-07-15 | 页面的显示处理方法、装置、及终端设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112306587A true CN112306587A (zh) | 2021-02-02 |
Family
ID=74329218
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910637444.9A Pending CN112306587A (zh) | 2019-07-15 | 2019-07-15 | 页面的显示处理方法、装置、及终端设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112306587A (zh) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113254819A (zh) * | 2021-05-27 | 2021-08-13 | 广东太平洋互联网信息服务有限公司 | 一种页面渲染方法、***、设备和存储介质 |
| CN113360121A (zh) * | 2021-07-09 | 2021-09-07 | 帆软软件有限公司 | 分页展示及页间动画的可视化设计方法 |
| CN113515323A (zh) * | 2021-07-09 | 2021-10-19 | 中原银行股份有限公司 | Web应用在便携式终端客户端中加载速度的优化方法及装置 |
| CN113569551A (zh) * | 2021-07-16 | 2021-10-29 | 青岛海尔科技有限公司 | App页面配置的方法、设备、***及存储介质 |
| CN113656110A (zh) * | 2021-09-02 | 2021-11-16 | 武汉众邦银行股份有限公司 | 一种前端升级后免清缓存的页面加载方法及装置 |
| CN114327707A (zh) * | 2021-12-20 | 2022-04-12 | 凌云光技术股份有限公司 | 一种用户界面的刷新方法 |
| CN114567623A (zh) * | 2022-02-20 | 2022-05-31 | ***股份有限公司 | 一种页面显示方法及装置 |
| CN114764354A (zh) * | 2022-04-19 | 2022-07-19 | 卡奥斯工业智能研究院(青岛)有限公司 | 基于paas的依赖管理方法、装置、电子设备及介质 |
| CN117193907A (zh) * | 2023-08-25 | 2023-12-08 | 中移互联网有限公司 | 页面处理方法及装置 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120137081A1 (en) * | 2010-11-30 | 2012-05-31 | Shea James C | System and method for managing a cache using file system metadata |
| CN104391725A (zh) * | 2014-12-08 | 2015-03-04 | 畅捷通信息技术股份有限公司 | 页面展示方法和页面展示装置 |
| CN105843814A (zh) * | 2015-01-14 | 2016-08-10 | 阿里巴巴集团控股有限公司 | 一种页面生成方法、装置及*** |
| CN106250434A (zh) * | 2016-07-26 | 2016-12-21 | 东软集团股份有限公司 | 加载网页的方法及装置 |
| CN106682176A (zh) * | 2016-12-29 | 2017-05-17 | 北京五八信息技术有限公司 | 页面的加载方法、装置和设备 |
| CN106776761A (zh) * | 2016-11-18 | 2017-05-31 | 武汉斗鱼网络科技有限公司 | 一种移动浏览器渲染网页的方法及装置 |
| CN107066631A (zh) * | 2017-05-26 | 2017-08-18 | 北京三快在线科技有限公司 | 页面的显示方法、装置及电子设备 |
| CN109933737A (zh) * | 2019-03-22 | 2019-06-25 | 中国工商银行股份有限公司 | 网页页面处理方法、装置及*** |
-
2019
- 2019-07-15 CN CN201910637444.9A patent/CN112306587A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120137081A1 (en) * | 2010-11-30 | 2012-05-31 | Shea James C | System and method for managing a cache using file system metadata |
| CN104391725A (zh) * | 2014-12-08 | 2015-03-04 | 畅捷通信息技术股份有限公司 | 页面展示方法和页面展示装置 |
| CN105843814A (zh) * | 2015-01-14 | 2016-08-10 | 阿里巴巴集团控股有限公司 | 一种页面生成方法、装置及*** |
| CN106250434A (zh) * | 2016-07-26 | 2016-12-21 | 东软集团股份有限公司 | 加载网页的方法及装置 |
| CN106776761A (zh) * | 2016-11-18 | 2017-05-31 | 武汉斗鱼网络科技有限公司 | 一种移动浏览器渲染网页的方法及装置 |
| CN106682176A (zh) * | 2016-12-29 | 2017-05-17 | 北京五八信息技术有限公司 | 页面的加载方法、装置和设备 |
| CN107066631A (zh) * | 2017-05-26 | 2017-08-18 | 北京三快在线科技有限公司 | 页面的显示方法、装置及电子设备 |
| CN109933737A (zh) * | 2019-03-22 | 2019-06-25 | 中国工商银行股份有限公司 | 网页页面处理方法、装置及*** |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113254819A (zh) * | 2021-05-27 | 2021-08-13 | 广东太平洋互联网信息服务有限公司 | 一种页面渲染方法、***、设备和存储介质 |
| CN113360121A (zh) * | 2021-07-09 | 2021-09-07 | 帆软软件有限公司 | 分页展示及页间动画的可视化设计方法 |
| CN113515323A (zh) * | 2021-07-09 | 2021-10-19 | 中原银行股份有限公司 | Web应用在便携式终端客户端中加载速度的优化方法及装置 |
| CN113569551B (zh) * | 2021-07-16 | 2023-12-19 | 青岛海尔科技有限公司 | App页面配置的方法、设备、***及存储介质 |
| CN113569551A (zh) * | 2021-07-16 | 2021-10-29 | 青岛海尔科技有限公司 | App页面配置的方法、设备、***及存储介质 |
| CN113656110A (zh) * | 2021-09-02 | 2021-11-16 | 武汉众邦银行股份有限公司 | 一种前端升级后免清缓存的页面加载方法及装置 |
| CN113656110B (zh) * | 2021-09-02 | 2024-03-29 | 武汉众邦银行股份有限公司 | 一种前端升级后免清缓存的页面加载方法及装置 |
| CN114327707A (zh) * | 2021-12-20 | 2022-04-12 | 凌云光技术股份有限公司 | 一种用户界面的刷新方法 |
| CN114567623A (zh) * | 2022-02-20 | 2022-05-31 | ***股份有限公司 | 一种页面显示方法及装置 |
| CN114567623B (zh) * | 2022-02-20 | 2023-09-08 | ***股份有限公司 | 一种页面显示方法及装置 |
| CN114764354B (zh) * | 2022-04-19 | 2024-01-05 | 卡奥斯工业智能研究院(青岛)有限公司 | 基于paas的依赖管理方法、装置、电子设备及介质 |
| CN114764354A (zh) * | 2022-04-19 | 2022-07-19 | 卡奥斯工业智能研究院(青岛)有限公司 | 基于paas的依赖管理方法、装置、电子设备及介质 |
| CN117193907A (zh) * | 2023-08-25 | 2023-12-08 | 中移互联网有限公司 | 页面处理方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112306587A (zh) | 页面的显示处理方法、装置、及终端设备 | |
| US20210216700A1 (en) | Information Processing Method and System | |
| CN112866785B (zh) | 图片生成方法、装置、设备及存储介质 | |
| US11706331B2 (en) | Information processing method and apparatus, storage medium, and electronic device | |
| CN109753617B (zh) | 一种页面显示方法、设备和存储介质 | |
| US9619304B2 (en) | Automatic connections between application components | |
| CN109165050B (zh) | 程序的运行方法、装置、计算设备以及存储介质 | |
| CN103914205B (zh) | 一种智能终端的文件缩略图展示方法和装置 | |
| CN108549568B (zh) | 应用入口处理方法、装置、存储介质及电子设备 | |
| CN111026491B (zh) | 界面显示方法、装置、电子设备、服务器及存储介质 | |
| CN113468448A (zh) | 页面渲染方法及装置 | |
| WO2020206691A1 (zh) | 应用程序的处理方法、装置、存储介质及电子设备 | |
| CN110990075A (zh) | 快应用的启动方法、装置、设备及存储介质 | |
| US20140039885A1 (en) | Methods and apparatus for voice-enabling a web application | |
| EP4280048A1 (en) | Page rendering method and apparatus, electronic device, computer-readable storage medium, and computer program product | |
| CN111679790B (zh) | 远程软件开发存储空间分配方法及装置 | |
| CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
| CN115309470B (zh) | 微件的加载方法、装置、设备以及存储介质 | |
| CN113253880A (zh) | 互动场景的页面的处理方法、装置及存储介质 | |
| CN108334330B (zh) | 应用卸载方法、装置、存储介质及电子设备 | |
| US20140040745A1 (en) | Methods and apparatus for voiced-enabling a web application | |
| CN112579048A (zh) | 小程序集成方法、装置、电子设备及存储介质 | |
| CN112235132B (zh) | 动态配置服务的方法、装置、介质以及服务器 | |
| CN113792208A (zh) | 基于网页的图片交互方法、装置、设备、介质及程序产品 | |
| CN114090118A (zh) | 启动小程序的方法、装置、设备以及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |