发明内容
本公开实施例至少提供一种页面渲染方法、装置、计算机设备和存储介质。
第一方面,本公开实施例提供了一种页面渲染方法,包括:
获取在跨端框架上编译得到的待转换文件,所述待转换文件用于加载目标页面;
基于浏览器对应的可运行语言,对所述待转换文件进行文件解码,得到所述目标页面对应的且与所述可运行语言相匹配的组件结构指令和页面执行逻辑文件;
利用所述可运行语言对应的第一代码运行引擎,运行所述组件结构指令,并基于运行结果得到所述目标页面对应的页面组件信息;
根据所述页面组件信息和所述页面执行逻辑文件,渲染得到所述目标页面。
在一种可能的实施方式中,所述基于浏览器对应的可运行语言,对所述待转换文件进行文件解码,得到所述目标页面对应的且与所述可运行语言相匹配的组件结构指令和页面执行逻辑文件,包括:
基于所述浏览器对应的可运行语言,对所述待转换文件进行文件解码,得到所述目标页面对应的且与可运行语言相匹配的可执行结构信息、所述页面执行逻辑文件和页面样式代码文件;
将所述可执行结构信息,转换为在所述浏览器中可执行的所述组件结构指令;
所述运行所述组件结构指令,并基于运行结果得到所述目标页面对应的页面组件信息,包括:
运行所述组件结构指令,得到所述运行结果,并将所述运行结果和所述页面样式代码文件进行结合,得到所述目标页面对应的页面组件信息。
在一种可能的实施方式中,所述运行所述组件结构指令,包括:
运行所述组件结构指令,得到所述目标页面中的各组件对应的虚拟节点树信息;并将所述虚拟节点树信息转换为所述各组件对应的可加载节点树信息;
所述运行结果包括所述可加载节点树信息,所述将所述运行结果和所述页面样式代码文件进行结合,得到所述目标页面对应的页面组件信息,包括:
利用页面布局引擎,将所述可加载节点树信息和所述页面样式代码文件进行结合,得到所述页面组件信息。
在一种可能的实施方式中,所述页面样式代码文件包括所述各组件对应的组件样式文件;
所述将所述可加载节点树信息和所述页面样式代码文件进行结合,得到所述页面组件信息,包括:
根据所述可加载节点树信息,确定所述各组件的位置信息,并根据所述组件样式文件,确定所述各组件对应的组件样式;
将所述各组件的位置信息和所述各组件对应的组件样式进行结合,得到所述页面组件信息。
在一种可能的实施方式中,所述页面样式代码文件还包括所述各组件之间的依赖关系;
所述根据所述可加载节点树信息,确定所述各组件的位置信息,包括:
根据所述可加载节点树信息和所述依赖关系,确定所述各组件的位置信息。
在一种可能的实施方式中,所述根据所述页面组件信息和所述页面执行逻辑文件,渲染得到所述目标页面,包括:
根据所述页面组件信息和所述页面样式代码文件,加载得到初始页面;
在接收到针对所述初始页面的目标触发请求后,利用第二代码运行引擎,从所述页面执行逻辑文件指示的各页面触发请求对应的执行逻辑中,确定所述目标触发请求对应的目标执行逻辑;
生成与所述目标执行逻辑对应的信息获取请求,并向服务器发送所述信息获取请求;所述信息获取请求用于获取执行所述目标执行逻辑所需要的目标页面信息;
接收所述服务器在响应于所述信息获取请求后反馈的目标页面信息,并基于所述目标页面信息,对所述初始页面进行更新渲染,得到所述目标页面。
在一种可能的实施方式中,所述页面样式代码文件指示有浏览器的版本和页面版本之间的关联关系;
所述根据所述页面组件信息和所述页面样式代码文件,加载得到初始页面,包括:
根据所述页面样式代码文件指示的关联关系和所述浏览器的版本,确定所述初始页面的页面尺寸和页面版本;
按照所述页面尺寸和所述页面版本,根据所述页面组件信息,加载得到所述初始页面。
第二方面,本公开实施例还提供一种页面渲染装置,包括:
获取模块,用于获取在跨端框架上编译得到的待转换文件,所述待转换文件用于加载目标页面;
解码模块,用于基于浏览器对应的可运行语言,对所述待转换文件进行文件解码,得到所述目标页面对应的且与所述可运行语言相匹配的组件结构指令和页面执行逻辑文件;
运行模块,用于利用所述可运行语言对应的第一代码运行引擎,运行所述组件结构指令,并基于运行结果得到所述目标页面对应的页面组件信息;
渲染模块,用于根据所述页面组件信息和所述页面执行逻辑文件,渲染得到所述目标页面。
在一种可能的实施方式中,所述解码模块,用于基于所述浏览器对应的可运行语言,对所述待转换文件进行文件解码,得到所述目标页面对应的且与可运行语言相匹配的可执行结构信息、所述页面执行逻辑文件和页面样式代码文件;
将所述可执行结构信息,转换为在所述浏览器中可执行的所述组件结构指令;
所述运行模块,用于运行所述组件结构指令,得到所述运行结果,并将所述运行结果和所述页面样式代码文件进行结合,得到所述目标页面对应的页面组件信息。
在一种可能的实施方式中,所述运行模块,用于运行所述组件结构指令,得到所述目标页面中的各组件对应的虚拟节点树信息;并将所述虚拟节点树信息转换为所述各组件对应的可加载节点树信息;所述运行结果包括所述可加载节点树信息;
所述运行模块,用于利用页面布局引擎,将所述可加载节点树信息和所述页面样式代码文件进行结合,得到所述页面组件信息。
在一种可能的实施方式中,所述页面样式代码文件包括所述各组件对应的组件样式文件;
所述运行模块,用于根据所述可加载节点树信息,确定所述各组件的位置信息,并根据所述组件样式文件,确定所述各组件对应的组件样式;
将所述各组件的位置信息和所述各组件对应的组件样式进行结合,得到所述页面组件信息。
在一种可能的实施方式中,所述页面样式代码文件还包括所述各组件之间的依赖关系;
所述运行模块,用于根据所述可加载节点树信息和所述依赖关系,确定所述各组件的位置信息。
在一种可能的实施方式中,所述渲染模块,用于根据所述页面组件信息和所述页面样式代码文件,加载得到初始页面;
在接收到针对所述初始页面的目标触发请求后,利用第二代码运行引擎,从所述页面执行逻辑文件指示的各页面触发请求对应的执行逻辑中,确定所述目标触发请求对应的目标执行逻辑;
生成与所述目标执行逻辑对应的信息获取请求,并向服务器发送所述信息获取请求;所述信息获取请求用于获取执行所述目标执行逻辑所需要的目标页面信息;
接收所述服务器在响应于所述信息获取请求后反馈的目标页面信息,并基于所述目标页面信息,对所述初始页面进行更新渲染,得到所述目标页面。
在一种可能的实施方式中,所述页面样式代码文件指示有浏览器的版本和页面版本之间的关联关系;
所述渲染模块,用于根据所述页面样式代码文件指示的关联关系和所述浏览器的版本,确定所述初始页面的页面尺寸和页面版本;
按照所述页面尺寸和所述页面版本,根据所述页面组件信息,加载得到所述初始页面。
第三方面,本公开可选实现方式还提供一种计算机设备,处理器、存储器,所述存储器存储有所述处理器可执行的机器可读指令,所述处理器用于执行所述存储器中存储的机器可读指令,所述机器可读指令被所述处理器执行时,所述机器可读指令被所述处理器执行时执行上述第一方面,或第一方面中任一种可能的实施方式中的步骤。
第四方面,本公开可选实现方式还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被运行时执行上述第一方面,或第一方面中任一种可能的实施方式中的步骤。
关于上述页面渲染装置、计算机设备、及计算机可读存储介质的效果描述参见上述页面渲染方法的说明,这里不再赘述。
本公开实施例提供的页面渲染方法、装置、计算机设备和存储介质,在获取到跨端框架编译的待转换文件之后,通过将待转换文件解码为与浏览器的可运行语言相匹配的组件结构指令和页面执行逻辑文件,可以得到能够在浏览器直接运行的组件结构指令和页面执行逻辑文件,从而保证由跨端框架编译的待转换文件能够在浏览器中运行。再利用可运行语言对应的第一代码运行引擎,运行组件结构指令,能够准确得到与组件结构相关的信息,即运行结果;进而基于运行结果可以准确得到目标页面对应的页面组件信息;最后基于页面组件信息和页面执行逻辑文件,可以渲染得到具备准确的执行逻辑的目标页面。这样,通过本公开实施例提供的页面渲染方法,可以实现基于待转换文件,在浏览器中渲染得到目标页面,有效解决了在插件下载失败的情况下,应用程序端对应的浏览器无法直接运行待转换代码(即跨端框架编译后的页面代码文件),导致无法渲染出目标页面,甚至应用程序端闪退的问题。
为使本公开的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚,下面将结合本公开实施例中附图,对本公开实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本公开一部分实施例,而不是全部的实施例。通常在此处描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此,以下对本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围,而是仅仅表示本公开的选定实施例。基于本公开的实施例,本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本公开保护的范围。
另外,本公开实施例中的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。
在本文中提及的“多个或者若干个”是指两个或两个以上。“和/或”,描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
经研究发现,当应用程序端下载跨端框架对应的插件失败时,为实现对跨端框架编译后的页面代码文件(即待转换文件)对应的目标页面的渲染,需要在浏览器中对页面代码文件进行加载,而浏览器存在无法加载页面代码文件的问题,从而导致浏览器无法根据页面代码文件渲染出目标页面,继而导致应用程序端无法展示目标页面,甚至出现应用程序端闪退的问题。
基于上述研究,本公开提供了一种页面渲染方法、装置、计算机设备和存储介质,在获取到跨端框架编译的待转换文件之后,通过将待转换文件解码为与浏览器的可运行语言相匹配的组件结构指令和页面执行逻辑文件,可以得到能够在浏览器直接运行的组件结构指令和页面执行逻辑文件,从而保证由跨端框架编译的待转换文件能够在浏览器中运行。再利用可运行语言对应的第一代码运行引擎,运行组件结构指令,能够准确得到与组件结构相关的信息,即运行结果;进而基于运行结果可以准确得到目标页面对应的页面组件信息;最后基于页面组件信息和页面执行逻辑文件,可以渲染得到具备准确的执行逻辑的目标页面。这样,通过本公开实施例提供的页面渲染方法,可以实现基于待转换文件,在浏览器中渲染得到目标页面,有效解决了在插件下载失败的情况下,应用程序端对应的浏览器无法直接运行待转换代码,导致无法渲染出目标页面,甚至应用程序端闪退的问题。
针对以上方案所存在的缺陷,均是发明人在经过实践并仔细研究后得出的结果,因此,上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案,都应该是发明人在本公开过程中对本公开做出的贡献。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。
需要说明的是,本公开实施例中所提到的特定名词包括:
HTML:Hyper Text Markup Language,超文本标记语言,一种页面标记语言;
CSS:Cascading Style Sheets,层叠样式表,是一种用来表现HTML文件样式的计算机语言;
JavaScript:简称JS,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;
第一代码运行引擎:一种用于运行基于JS的指令的引擎,位于浏览器中;
JavaScript引擎:即JS引擎,是一个专门处理JavaScript脚本的虚拟机,也称JS虚拟机(Virtual Machine,VM)。
为便于对本实施例进行理解,首先对本公开实施例所公开的一种页面渲染方法进行详细介绍,本公开实施例所提供的页面渲染方法的执行主体一般为具有一定计算能力的计算机设备,在一些可能的实现方式中,该页面渲染方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
下面以执行主体为浏览器为例对本公开实施例提供的页面渲染方法加以说明。
如图1所示,为本公开实施例提供的一种页面渲染方法的流程图,可以包括以下步骤:
S101:获取在跨端框架上编译得到的待转换文件,待转换文件用于加载目标页面。
这里,跨端框架是一种接受以小程序DSL为输入的前端工程,并且最终可以编译打包出一份待转换文件作为输出的高性能框架。其中,DSL全称Domain Specified Language,即领域专用语言。待转换文件为用于加载目标页面的文件,能够运行在跨端框架且不能直接运行在浏览器中。
待转换文件用于表征目标页面相关的所有信息。例如,目标页面的页面结构、目标页面中的组件之间的依赖关系、目标页面的响应逻辑等信息,页面结构可以包括根据目标页面对应的HTML代码解析出的抽象语法树,以及包括根据目标页面对应的CSS代码解析出的抽象语法树(简称CSS AST)。
示例性的,当应用程序端下载跨端框架对应的插件失败,需要在应用程序端对应的浏览器中,运行在跨端框架上编译得到的待转换文件时,浏览器可以先获取待转换文件。
S102:基于浏览器对应的可运行语言,对待转换文件进行文件解码,得到目标页面对应的且与可运行语言相匹配的组件结构指令和页面执行逻辑文件。
这里,浏览器对应的可运行语言具体可以为JS语言。组件结构指令用于加载得到与目标页面的页面结构相对应的节点树。页面执行逻辑文件用于表征目标页面对应的页面执行逻辑。例如,页面执行逻辑文件可以用于确定运行调度目标页面相关的组件的生命周期。示例性的,页面执行逻辑文件可以表征在获取到针对目标页面的页面触发请求(如点击页面按钮)后,如何对该页面触发请求进行响应以及响应所需要获取的页面信息。
组件结构指令为与可运行语言相匹配的指令,页面执行逻辑文件为基于可运行语言的文件,也即,组件结构指令为基于JS的指令,页面执行逻辑文件为JS文件。
具体实施时,可以利用跨端框架对应的解码器decoder,基于浏览器对应的可运行语言JS,对待转换文件进行解码操作,得到目标页面对应的基于JS的组件结构指令,以及解码得到JS类型的页面执行逻辑文件(即app-service.js)。
S103:利用可运行语言对应的第一代码运行引擎,运行组件结构指令,并基于运行结果得到目标页面对应的页面组件信息。
这里,可运行语言对应的第一代码运行引擎,用于运行基于可运行语言的指令,在本公开实施例中,第一代码运行引擎能够运行组件结构指令。
运行结果即为利用第一代码运行引擎运行组件结构指令后得到的结果。运行结果用于表征目标页面对应的页面结构。
页面组件信息用于表征目标页面中的各组件的相关信息,例如,页面组件信息可以表征组件的位置、样式、形状、组件对应的文字信息、组件之间的相对位置关系等信息,页面组件信息具体可以为网页用户界面(Web UI)。
具体实施时,可以利用第一代码运行引擎运行组件结构指令,得到用于表征目标页面对应的页面结构的运行结果,之后,可以将得到的运行结果和组件样式信息进行结合,从而得到上述页面组件信息。
S104:根据页面组件信息和页面执行逻辑文件,渲染得到目标页面。
具体实施时,可以根据页面组件信息进行页面渲染,得到初始页面,并根据页面执行逻辑文件,确定在不同执行逻辑下需要获取的各种页面信息,利用获取的各种页面信息对初始页面进行更新,从而得到最终的目标页面。其中,初始页面为目标页面在初始状态下的页面,例如,初始页面可以为首次打开目标页面时对应的页面。
或者,可以直接将上述初始页面作为目标页面,之后利用页面执行逻辑文件对目标页面进行更新,得到新的目标页面。
这样,在获取到跨端框架编译的待转换文件之后,通过将待转换文件解码为与浏览器的可运行语言相匹配的组件结构指令和页面执行逻辑文件,可以得到能够在浏览器直接运行的组件结构指令和页面执行逻辑文件,从而保证由跨端框架编译的待转换文件能够在浏览器中运行。再利用可运行语言对应的第一代码运行引擎,运行组件结构指令,能够准确得到与组件结构相关的信息,即运行结果;进而基于运行结果可以准确得到目标页面对应的页面组件信息;最后基于页面组件信息和页面执行逻辑文件,可以渲染得到具备准确的执行逻辑的目标页面。这样,通过本公开实施例提供的页面渲染方法,可以实现基于待转换文件,在浏览器中渲染得到目标页面,有效解决了在插件下载失败的情况下,应用程序端对应的浏览器无法直接运行待转换代码,导致无法渲染出目标页面,甚至应用程序端闪退的问题。
在一种实施例中,针对上述S102,可以按照以下步骤实施:
S102-1:基于浏览器对应的可运行语言,对待转换文件进行文件解码,得到目标页面对应的且与可运行语言相匹配的可执行结构信息、页面执行逻辑文件和页面样式代码文件。
这里,可执行结构信息也用于表征目标页面对应的页面结构,为组成待转换文件的信息,其可以在跨端框架中运行,具体可以用可执行结构信息表示。
页面样式代码文件用于表征目标页面中各组件的样式、位置、尺寸等信息,具体的,页面样式代码文件可以为根据上述CSS AST树得到的。
具体实施时,可以利用跨端框架对应的解码器decoder,基于可运行语言JS,对待转换文件进行解码操作,得组件结构指令,app-service.js以及CSS AST树,并根据CSS AST树,得到页面样式代码文件。例如,可以直接将CSS AST树对应的代码作为页面样式代码文件,或者,可以根据CSS AST树对应的代码,以及对待转换文件进行解析得到的组件依赖关系和页面配置信息,确定页面样式文件。其中,组件依赖关系和页面配置信息将在后文进行详细介绍。
S102-2:将可执行结构信息,转换为在浏览器中可执行的组件结构指令。
具体实施时,可以先将可执行结构信息由可在跨端框架中运行的信息转换为可在浏览器中运行的信息,也即,可以将可执行结构信息,转换为在浏览器中可执行的组件结构指令。
针对上述S103中运行组件结构指令,并基于运行结果得到目标页面对应的页面组件信息的步骤,可以先利用第一代码运行引擎运行组件结构指令,得到用于表征目标页面对应的页面结构的运行结果,再将运行结果和页面样式代码文件进行结合,得到目标页面对应的页面组件信息。也即,利用页面样式代码文件,确定出每个组件对应的样式、位置等信息,从而得到目标页面对应的各个具体的组件,再将得到的各个具体的组件和运行结果对应的页面结构结合,得到目标页面对应的页面组件信息。
在一种实施例中,针对S103中运行组件结构指令的步骤,可以先利用第一代码运行引擎运行组件结构指令,得到目标页面中的各组件对应的虚拟节点树信息。这里,虚拟节点树信息用于表征目标页面对应的页面结构,但虚拟节点树信息对应的结构为虚拟结构,无法直接渲染在目标页面中,具体的,虚拟节点树信息即为目标页面对应的VDOM。
进一步的,可以对虚拟节点树信息执行patch操作,也即,将虚拟节点树信息转换为各组件对应的可加载节点树信息。这里,可加载节点树信息也用于表征目标页面对应的页面结构,且可加载节点树信息对应的结构为真实可加载的结构,可以直接在目标页面中绘制出。可加载节点树信息中的一个可加载节点可以对应于一个组件,因此,可加载节点树信息可以对应于目标页面中各组件。具体的,可加载节点树信息即为目标页面对应的DOM。
然后,可以直接将可加载节点树信息作为上述运行结果。继而,针对上述将运行结果和页面样式代码文件进行结合,得到目标页面对应的页面组件信息的步骤,可以利用浏览器中的页面布局引擎,将可加载节点树信息和页面样式代码文件进行结合,以得到页面组件信息。
这里,页面布局引擎用于确定目标页面对应的页面布局,具体的,页面布局引擎可以为Browser render。
示例性的,可以利用Browser render从DOM中确定出各个组件对应的节点的位置,将每个组件对应的节点的位置,作为该组件在目标页面的位置。再根据页面样式代码文件,确定各个位置的组件的样式。进而,基于各组件的位置和样式,得到页面组件信息。
在一种实施例中,页面样式代码文件包括各组件对应的组件样式文件。其中,组件样式文件即为CSS文件,用于表征各个组件的样式,例如,组件的形状、尺寸、颜色、对应文字等信息。
针对上述将可加载节点树信息和页面样式代码文件进行结合,得到页面组件信息的步骤,可以利用Browser render,先根据可加载节点树信息,确定目标页面中的各组件分别对应的位置信息,例如,确定各组件之间的相对位置关系,各个组件在目标页面中的具体位置等等。并且,可以利用Browser render,根据上述组件样式文件,分别确定出目标页面中的每个组件分别对应的组件样式。之后,将各组件的位置信息和各组件对应的组件样式进行结合,得到页面组件信息。
针对将各组件的位置信息和各组件对应的组件样式进行结合的过程,具体的,针对目标页面中的每个组件,可以将该组件对应的位置信息和组件样式,作为该组件对应的组件信息,将每个组件对应的组件信息组合,得到上述页面组件信息。
在一种实施例中,页面样式代码文件还包括各组件之间的依赖关系。这里,组件之间的依赖关系例如可以包括各组件之间的父子关系和组件相互之间的依赖。各组件之间的父子关系例如组件A为组件B的子组件,组件B为组件C的子组件;组件D和组件E为兄弟组件;组件相互之间的依赖例如可以为组件1依赖组件2和组件3,组件2依赖组件4,组件3依赖组件5等等。
针对根据可加载节点树信息,确定各组件的位置信息的步骤,可以根据可加载节点树信息和依赖关系,一起确定各组件的位置信息。
具体的,可以根据可加载节点树信息,确定出目标页面中属于组件的位置,再根据依赖关系和组件与可加载节点之间的对应关系,确定各组件在目标页面中的具体位置。
在一种实施例中,针对上述S104,可以按照以下步骤实施:
S104-1:根据页面组件信息和页面样式代码文件,加载得到初始页面。
这里,初始页面为目标页面在初始状态下的页面。页面样式文件中还可以包括页面配置信息,页面配置信息用于指示浏览器的版本和页面版本之间的关联关系;例如,浏览器版本1对应于页面版本1,浏览器版本2对应于页面版本2。不同页面版本可以对应于不同的页面缩放逻辑和页面样式。此外,页面配置信息中还可以指示不同页面版本对应的目标页面的区别,以及不同页面版本对应的页面尺寸等信息。
在一种实施例中,本步骤可以按照以下子步骤实施:
子步骤一、根据页面样式代码文件指示的关联关系和浏览器的版本,确定初始页面的页面尺寸和页面版本。
示例性的,可以根据页面样式代码文件对应的页面配置信息指示的关联关系和浏览器的版本,确定浏览器当前可加载的页面版本,将该页面版本作为初始页面的页面版本。以及根据页面配置信息中指示的各页面版本对应的页面尺寸,确定出浏览器当前可加载的页面尺寸,并将该页面尺寸作为初始页面的页面尺寸。
子步骤二、按照页面尺寸和页面版本,根据页面组件信息,加载得到初始页面。
具体实施时,可以按照页面尺寸和页面版本,生成尺寸与上述页面尺寸一致、版本与上述页面版本一致的待填充页面,再根据页面组件信息,渲染生成各个组件,并将生成的各个组件填充到待填充页面,即可得到初始页面。
S104-2:在接收到针对初始页面的目标触发请求后,利用第二代码运行引擎,从页面执行逻辑文件指示的各页面触发请求对应的执行逻辑中,确定目标触发请求对应的目标执行逻辑。
这里,第二代码运行引擎可以为浏览器中的自带引擎,用于运行JS代码,具体的,第二代码运行引擎可以为JS引擎。此外,上述第一代码运行引擎,需要在JS引擎中运行。
目标触发请求为用户在对初始页面进行触发操作后,浏览器生成的请求。例如,用户在点击初始页面中的按钮后,生成该点击操作对应的目标触发请求。
页面执行逻辑文件指示有各页面触发请求对应的执行逻辑,也即,指示有如何对各页面触发请求进行响应以及响应所需要获取的页面信息。
具体实施时,针对到的目标触发请求,可以利用第二代码运行引擎,从页面执行逻辑文件指示的各页面触发请求对应的执行逻辑中,确定目标触发请求对应的目标执行逻辑,也即,确定如何对目标触发请求进行响应以及响应所需要获取的目标页面信息。
S104-3:生成与目标执行逻辑对应的信息获取请求,并向服务器发送信息获取请求;信息获取请求用于获取执行目标执行逻辑所需要的目标页面信息;
具体实施时,可以根据确定的目标执行逻辑指示的所需要获取的目标页面信息,生成信息获取请求,并将该信息获取请求发送至服务器。
S104-4:接收服务器在响应于信息获取请求后反馈的目标页面信息,并基于目标页面信息,对初始页面进行更新渲染,得到所述目标页面。
具体实施时,服务器在接收到信息获取请求,可以对该请求进行响应,获取存储的与该请求对应的目标页面信息,并将目标页面信息反馈给浏览器。
之后,浏览器可以接收到服务器反馈的目标页面信息,并利用目标页面信息,对初始页面中的内容进行更新渲染,得到目标页面。这里,可以基于页面执行逻辑文件,实现对初始页面进行多次更新渲染,每一次更新渲染得到的页面均可以称为目标页面。
如图2所示,为本公开实施例提供的一种页面渲染方法的具体实施流程图,可以包括以下步骤:
S201:获取待转换文件。
S202:对待转换文件进行文件解码,得到目标页面对应的组件结构指令、页面执行逻辑文件和页面样式代码文件。
这里,可以利用解码器decoder,对待转换文件进行文件解码,得到目标页面对应的可执行结构信息,并将可执行结构信息转换为组件结构指令。同时,基于对待转换文件的文件解码,还可以得到页面执行逻辑文件和页面样式代码文件。其中,页面样式代码文件包括组件样式文件、依赖关系和页面配置信息。
S203:运行组件结构指令,得到目标页面中的各组件对应的虚拟节点树信息。
本步骤可以利用第一代码运行引擎执行。
S204:将虚拟节点树信息转换为各组件对应的可加载节点树信息。
这里,可以对虚拟节点树信息执行patch操作,以得到可加载节点树信息。
S205:利用页面布局引擎,将可加载节点树信息和页面样式代码文件进行结合,得到页面组件信息。
这里,可以利用页面布局引擎,基于可加载节点树信息和页面样式代码文件中的组件样式文件、依赖关系,确定页面组件信息。
S206:根据页面组件信息和页面样式代码文件,加载得到初始页面。
上述S203~S206均可在第一代码运行引擎中执行。
S207:在接收到针对初始页面的目标触发请求后,利用第二代码运行引擎,基于页面执行逻辑文件,生成目标触发请求对应的信息获取请求。
关于本步骤的具体实施过程,可以参照上述S104-1~S104-4,此处不再赘述。基于本步骤,可以得到目标触发请求对应的目标页面信息。
S208:基于目标页面信息,对初始页面进行更新渲染,得到目标页面。
这里,S208为在第一代码运行引擎中执行的步骤,具体的,在得到目标页面信息后,可以重新执行S203~S206。
关于上述S201~S208的具体实施过程,可以参照上述各实施例,此处不再赘述。
本领域技术人员可以理解,在具体实施方式的上述方法中,各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定,各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思,本公开实施例中还提供了与页面渲染方法对应的页面渲染装置,由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面渲染方法相似,因此装置的实施可以参见方法的实施,重复之处不再赘述。
如图3所示,为本公开实施例提供的一种页面渲染装置的示意图,包括:
获取模块301,用于获取在跨端框架上编译得到的待转换文件,所述待转换文件用于加载目标页面;
解码模块302,用于基于浏览器对应的可运行语言,对所述待转换文件进行文件解码,得到所述目标页面对应的且与所述可运行语言相匹配的组件结构指令和页面执行逻辑文件;
运行模块303,用于利用所述可运行语言对应的第一代码运行引擎,运行所述组件结构指令,并基于运行结果得到所述目标页面对应的页面组件信息;
渲染模块304,用于根据所述页面组件信息和所述页面执行逻辑文件,渲染得到所述目标页面。
在一种可能的实施方式中,所述解码模块302,用于基于所述浏览器对应的可运行语言,对所述待转换文件进行文件解码,得到所述目标页面对应的且与可运行语言相匹配的可执行结构信息、所述页面执行逻辑文件和页面样式代码文件;
将所述可执行结构信息,转换为在所述浏览器中可执行的所述组件结构指令;
所述运行模块303,用于运行所述组件结构指令,得到所述运行结果,并将所述运行结果和所述页面样式代码文件进行结合,得到所述目标页面对应的页面组件信息。
在一种可能的实施方式中,所述运行模块303,用于运行所述组件结构指令,得到所述目标页面中的各组件对应的虚拟节点树信息;并将所述虚拟节点树信息转换为所述各组件对应的可加载节点树信息;所述运行结果包括所述可加载节点树信息;
所述运行模块303,用于利用页面布局引擎,将所述可加载节点树信息和所述页面样式代码文件进行结合,得到所述页面组件信息。
在一种可能的实施方式中,所述页面样式代码文件包括所述各组件对应的组件样式文件;
所述运行模块303,用于根据所述可加载节点树信息,确定所述各组件的位置信息,并根据所述组件样式文件,确定所述各组件对应的组件样式;
将所述各组件的位置信息和所述各组件对应的组件样式进行结合,得到所述页面组件信息。
在一种可能的实施方式中,所述页面样式代码文件还包括所述各组件之间的依赖关系;
所述运行模块303,用于根据所述可加载节点树信息和所述依赖关系,确定所述各组件的位置信息。
在一种可能的实施方式中,所述渲染模块304,用于根据所述页面组件信息和所述页面样式代码文件,加载得到初始页面;
在接收到针对所述初始页面的目标触发请求后,利用第二代码运行引擎,从所述页面执行逻辑文件指示的各页面触发请求对应的执行逻辑中,确定所述目标触发请求对应的目标执行逻辑;
生成与所述目标执行逻辑对应的信息获取请求,并向服务器发送所述信息获取请求;所述信息获取请求用于获取执行所述目标执行逻辑所需要的目标页面信息;
接收所述服务器在响应于所述信息获取请求后反馈的目标页面信息,并基于所述目标页面信息,对所述初始页面进行更新渲染,得到所述目标页面。
在一种可能的实施方式中,所述页面样式代码文件指示有浏览器的版本和页面版本之间的关联关系;
所述渲染模块304,用于根据所述页面样式代码文件指示的关联关系和所述浏览器的版本,确定所述初始页面的页面尺寸和页面版本;
按照所述页面尺寸和所述页面版本,根据所述页面组件信息,加载得到所述初始页面。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明,这里不再详述。
本公开实施例还提供了一种计算机设备,如图4所示,为本公开实施例提供的一种计算机设备结构示意图,包括:
处理器41和存储器42;所述存储器42存储有处理器41可执行的机器可读指令,处理器41用于执行存储器42中存储的机器可读指令,所述机器可读指令被处理器41执行时,处理器41执行下述步骤:S101:获取在跨端框架上编译得到的待转换文件,待转换文件用于加载目标页面;S102:基于浏览器对应的可运行语言,对待转换文件进行文件解码,得到目标页面对应的且与可运行语言相匹配的组件结构指令和页面执行逻辑文件;S103:利用可运行语言对应的第一代码运行引擎,运行组件结构指令,并基于运行结果得到目标页面对应的页面组件信息以及S104:根据页面组件信息和页面执行逻辑文件,渲染得到目标页面。
上述存储器42包括内存421和外部存储器422;这里的内存421也称内存储器,用于暂时存放处理器41中的运算数据,以及与硬盘等外部存储器422交换的数据,处理器41通过内存421与外部存储器422进行数据交换。
上述指令的具体执行过程可以参考本公开实施例中所述的页面渲染方法的步骤,此处不再赘述。
本公开实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行上述方法实施例中所述的页面渲染方法的步骤。其中,该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例所提供的页面渲染方法的计算机程序产品,包括存储了程序代码的计算机可读存储介质,所述程序代码包括的指令可用于执行上述方法实施例中所述的页面渲染方法的步骤,具体可参见上述方法实施例,在此不再赘述。
该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中,所述计算机程序产品具体体现为计算机存储介质,在另一个可选实施例中,计算机程序产品具体体现为软件产品,例如软件开发包(Software Development Kit,SDK)等等。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。在本公开所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,又例如,多个单元或组件可以结合,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本公开各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解,本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-OnlyMemory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上所述实施例,仅为本公开的具体实施方式,用以说明本公开的技术方案,而非对其限制,本公开的保护范围并不局限于此,尽管参照前述实施例对本公开进行了详细的说明,本领域的普通技术人员应当理解:任何熟悉本技术领域的技术人员在本公开揭露的技术范围内,其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化,或者对其中部分技术特征进行等同替换;而这些修改、变化或者替换,并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围,都应涵盖在本公开的保护范围之内。因此,本公开的保护范围应所述以权利要求的保护范围为准。