CN112114808A - 页面渲染方法、装置、电子设备 - Google Patents
页面渲染方法、装置、电子设备 Download PDFInfo
- Publication number
- CN112114808A CN112114808A CN202011047531.8A CN202011047531A CN112114808A CN 112114808 A CN112114808 A CN 112114808A CN 202011047531 A CN202011047531 A CN 202011047531A CN 112114808 A CN112114808 A CN 112114808A
- Authority
- CN
- China
- Prior art keywords
- rendering instruction
- rendering
- fast application
- snapshot file
- instruction
- 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
- 238000009877 rendering Methods 0.000 title claims abstract description 417
- 238000000034 method Methods 0.000 title claims abstract description 53
- 238000004590 computer program Methods 0.000 claims description 13
- 238000003672 processing method Methods 0.000 claims description 9
- 230000006870 function Effects 0.000 claims description 7
- 230000004044 response Effects 0.000 claims description 6
- 238000004088 simulation Methods 0.000 claims description 5
- 238000010586 diagram Methods 0.000 description 11
- 230000008569 process Effects 0.000 description 9
- 238000004458 analytical method Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/11—File system administration, e.g. details of archiving or snapshots
- G06F16/128—Details of file system snapshots on the file-level, e.g. snapshot creation, administration, deletion
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本申请提供了页面渲染方法、页面渲染数据处理方法、装置、电子设备和计算机可读存储介质。所述方法包括:响应于快应用启动,获取快应用对应的渲染指令快照文件,渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将渲染指令保存生成的快照文件;解析渲染指令快照文件得到渲染指令;使用渲染指令进行渲染生成并展示对应的目标页面,能显著提升快应用启动速度,提高页面渲染效率。
Description
技术领域
本申请涉及计算机技术领域,特别是涉及一种页面渲染、页面渲染数据处理方法、装置、电子设备和计算机可读存储介质。
背景技术
随着电子技术的不断发展,电子设备如手机的功能越来越强大,用户可以通过各式各样的快应用程序去浏览应用的页面。
目前,通过快应用程序进行浏览页面时,需要花费较多时间渲染页面,导致快应用启动速度较慢,打开快应用后,需要较长时间才能看到画面渲染完成。
发明内容
本申请实施例提供了一种页面渲染、页面渲染数据处理方法、装置、电子设备、计算机可读存储介质,直接通过渲染指令快照文件就能生成画面,能显著提升快应用启动速度,提高页面渲染效率。
一种页面渲染方法,包括:
响应于快应用启动,获取所述快应用对应的渲染指令快照文件,所述渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将所述渲染指令保存生成的快照文件;
解析所述渲染指令快照文件得到所述渲染指令;
使用所述渲染指令进行渲染生成并展示对应的目标页面。
一种页面渲染装置,包括:
获取模块,用于响应于快应用启动,获取所述快应用对应的渲染指令快照文件,所述渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将所述渲染指令保存生成的快照文件;
渲染指令获取模块,用于解析所述渲染指令快照文件得到所述渲染指令;
渲染模块,用于使用所述渲染指令进行渲染生成并展示对应的目标页面。
一种电子设备,包括存储器及处理器,所述存储器中储存有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如下步骤:
响应于快应用启动,获取所述快应用对应的渲染指令快照文件,所述渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将所述渲染指令保存生成的快照文件;
解析所述渲染指令快照文件得到所述渲染指令;
使用所述渲染指令进行渲染生成并展示对应的目标页面。
一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现如下步骤:
响应于快应用启动,获取所述快应用对应的渲染指令快照文件,所述渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将所述渲染指令保存生成的快照文件;
解析所述渲染指令快照文件得到所述渲染指令;
使用所述渲染指令进行渲染生成并展示对应的目标页面。
上述页面渲染方法、装置、电子设备和计算机可读存储介质,响应于快应用启动,获取快应用对应的渲染指令快照文件,渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将渲染指令保存生成的快照文件;解析渲染指令快照文件得到渲染指令;使用渲染指令进行渲染生成并展示对应的目标页面,通过渲染指令快照文件可直接获取渲染指令,省去耗费大量时间进行JS环境初始化,JS代码运行生成渲染指令的过程,不再需要一系列初始化操作,直接运行渲染指令就可以生成画面,提高了页面渲染的效率,能显著提升快应用启动速度。
一种页面渲染数据处理方法,包括:
在服务端模拟快应用的运行环境,创建JS引擎运行环境;
通过所述JS引擎运行环境运行快应用包体,生成对应的渲染指令;
将所述渲染指令保存为快照文件生成对应的渲染指令快照文件,所述渲染指令快照文件用于下发至所述快应用的运行终端进行渲染生成对应的目标页面。
一种页面渲染数据处理装置,包括:
运行环境模拟模块,用于在服务端模拟快应用的运行环境,创建JS引擎运行环境;
渲染指令生成模块,用于通过所述JS引擎运行环境运行快应用包体,生成对应的渲染指令;
快照文件生成模块,用于将所述渲染指令保存为快照文件生成对应的渲染指令快照文件,所述渲染指令快照文件用于下发至所述快应用的运行终端进行渲染生成对应的目标页面。
一种电子设备,包括存储器及处理器,所述存储器中储存有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如下步骤:
在服务端模拟快应用的运行环境,创建JS引擎运行环境;
通过所述JS引擎运行环境运行快应用包体,生成对应的渲染指令;
将所述渲染指令保存为快照文件生成对应的渲染指令快照文件,所述渲染指令快照文件用于下发至所述快应用的运行终端进行渲染生成对应的目标页面。
一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现如下步骤:
在服务端模拟快应用的运行环境,创建JS引擎运行环境;
通过所述JS引擎运行环境运行快应用包体,生成对应的渲染指令;
将所述渲染指令保存为快照文件生成对应的渲染指令快照文件,所述渲染指令快照文件用于下发至所述快应用的运行终端进行渲染生成对应的目标页面。
上述页面渲染数据处理方法、装置、电子设备和计算机可读存储介质,在服务端模拟快应用的运行环境,创建JS(javascript)引擎运行环境;通过JS引擎运行环境运行快应用包体,生成对应的渲染指令;将渲染指令保存为快照文件生成对应的渲染指令快照文件,渲染指令快照文件用于下发至快应用的运行终端进行渲染生成对应的目标页面,通过渲染指令快照文件可直接获取渲染指令,省去耗费大量时间进行JS环境初始化,JS代码运行生成渲染指令的过程,不再需要一系列初始化操作,直接运行渲染指令就可以生成画面,提高了页面渲染的效率,能显著提升快应用启动速度。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为一个实施例中页面渲染方法的应用环境图;
图2为一个实施例中页面渲染方法的流程图;
图3为一个实施例中页面渲染数据处理方法的流程图;
图4为一个具体的实施例中,渲染指令快照文件的生成的流程示意图;
图5为一个具体的实施例中,页面渲染的流程示意图;
图6为一个实施例中页面渲染装置的结构框图;
图7为一个实施例中页面渲染数据处理装置的结构框图;
图8为一个实施例中电子设备的内部结构示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
可以理解,本申请所使用的术语“第一”、“第二”等可在本文中用于描述各种操作,但这些操作不受这些术语限制。这些术语仅用于将一个快应用与另一个快应用区分。举例来说,在不脱离本申请的范围的情况下,可以将第一快应用称为第二快应用,且类似地,可将第二快应用称为第一快应用。第一快应用和第二快应用两者都是快应用,但其不是同一快应用。
图1为一个实施例中页面渲染、页面渲染数据处理方法的应用环境图。如图1所示,该应用环境包括终端110和服务器120,服务器120模拟快应用的运行环境,运行快应用包体得到渲染指令,将渲染指令保存生成的快照文件;终端110向服务器120发送快应用列表信息获取请求或快应用包体下载请求,服务器120根据快应用列表信息获取请求或快应用包体下载请求将渲染指令快照文件发送至终端110,终端110保存渲染指令快照文件,响应于快应用启动,获取快应用对应的渲染指令快照文件,解析渲染指令快照文件得到渲染指令;使用渲染指令进行渲染生成并展示对应的目标页面。其中终端110可以为包括手机、平板电脑、PDA(Personal Digital Assistant,个人数字助理)、车载电脑、穿戴式设备等终端设备。其中服务器120可以为一个服务器或服务器集群。
图2为一个实施例中页面渲染方法的流程图。本实施例中的页面渲染方法,以运行于上述终端为例进行描述,包括以下步骤:
步骤102,响应于快应用启动,获取快应用对应的渲染指令快照文件,渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将渲染指令保存生成的快照文件。
其中,快应用指用户无需下载安装应用,即点即用,实时享受原生应用的性能体验,很大程度的节省电子设备的存储空间。不同的快应用对应不同的渲染指令快照文件,渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,快应用包体里保存的是JS代码,这些代码需要在JS引擎里运行起来,经过框架的解析才能得到最终的渲染指令,将渲染指令经过压缩后保存为快照文件,通过渲染指令快照文件可解析得到渲染指令,直接运行渲染指令就可以生成画面,无需一系列初始化操作。
具体地,可以从不同的入口启动快应用,如从浏览器入口、应用商店入口等。渲染指令快照文件在快应用启动之前,已由服务器下发至终端存储,从而在快应用启动时,可直接获取快应用对应的渲染指令快照文件。渲染指令快照文件可用于直接渲染得到任意一个快应用中的页面,如快应用的首页页面,具体的页面内容可自定义。在一个实施例中,渲染指令快照文件包含的渲染指令可用于渲染得到一个或多个页面。
步骤104,解析渲染指令快照文件得到渲染指令。
其中,渲染指令在形式上可以是Json(JavaScript Object Notation,JS对象简谱),通过命令告诉引擎需要绘制什么,以及在哪里绘制,可以包括待渲染对象标识、待渲染对象属性信息,如颜色、位置等。
具体地,快应用引擎对渲染指令快照文件进行解压缩得到渲染指令,通过渲染指令中的待渲染对象属性信息对待渲染对象进行渲染。
步骤106,使用渲染指令进行渲染生成并展示对应的目标页面。
具体地,使用渲染指令直接进行渲染生成并展示对应的目标页面,如渲染指令包括组件标识ABC,组件颜色:黄色,组件位置正中间,则会在页面的正中间渲染得到黄色的组件标识为ABC的组件。可以理解,当渲染指令中只包括静态渲染元素时,可直接进行渲染得到目标页面,如果渲染指令中包括动态渲染元素,则还需要与服务器进行交互获取对应的动态渲染元素进行渲染才能得到目标页面。
本实施例中的页面渲染方法,响应于快应用启动,获取快应用对应的渲染指令快照文件,渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将渲染指令保存生成的快照文件;解析渲染指令快照文件得到渲染指令;使用渲染指令进行渲染生成并展示对应的目标页面,通过渲染指令快照文件可直接获取渲染指令,省去耗费大量时间进行JS环境初始化,JS代码运行生成渲染指令的过程,不再需要一系列初始化操作,直接运行渲染指令就可以生成画面,提高了页面渲染的效率,能显著提升快应用启动速度。
在一个实施例中,步骤102之前,还包括:当进入快应用列表界面时,获取服务器下发的快应用列表对应的渲染指令快照文件。
其中,快应用列表对应的渲染指令快照文件是包括了快应用列表中所有快应用的渲染指令快照文件,将快应用列表中各个快应用的渲染指令快照文件提前下发至终端,使得终端在打开任意一个快应用列表中的快应用时,无需等待快应用包体的下载时间,就可提前获取渲染指令快照文件。
具体地,快应用列表界面用于显示快应用列表,可包括多种不同类型的快应用,当需要进入快应用列表界面时,终端向服务器发送快应用列表数据获取请求,服务器根据快应用列表数据获取请求向终端返回快应用列表数据,同时将快应用列表对应的渲染指令快照文件下发至终端。可通过不同的入口进入快应用列表界面,通过对不同的入口进行配置,使得服务器在接收到不同入口的快应用列表数据获取请求时,都同时下发快应用列表对应的渲染指令快照文件。例如,从软件商店进入快应用,当进入软件商店的快应用列表时,渲染指令快照文件就已经下发,当启动快应用时,快照文件随之传递给快应用引擎,快应用引擎使用快照文件生成画面,省去快应用包体的下载时间,达到最大的优化效果。
本实施例中,当进入快应用列表界面时,就可获取服务器下发的快应用列表对应的渲染指令快照文件,在快应用启动前就获取到渲染指令快照文件,无需等待快应用包体的下载时间,就可通过渲染指令快照文件生成并展示快应用页面,进一步提高了快应用启动速度。
在一个实施例中,步骤102之前,还包括:向服务器发送快应用包体下载请求;从服务器下载快应用包体下载请求对应的快应用包体和渲染指令快照文件。
其中,在第一次打开快应用时,终端会向服务器发送快应用包体下载请求,用于下载快应用对应的快应用包体。快应用包体是一个标准的zip压缩包,包含了快应用的前端代码和资源文件。
具体地,在第一次打开快应用时,在接收服务器发送的快应用包体的同时,得到渲染指令快照文件,保存于终端,从而在下次启动快应用时,可直接通过渲染指令快照文件直接获取到渲染指令,提高渲染效率。
本实施例中的页面渲染方法,通过快应用包体下载请求,在第一次启动快应用时,同时获取到快应用对应的渲染指令快照文件,在下一次启动快应用时可通过渲染指令快照文件直接得到渲染指令,提高快应用启动速度。
在一个实施例中,步骤102之前,还包括:当快应用启动为首次启动时,运行快应用包体以得到当前渲染指令,使用当前渲染指令进行渲染生成并展示对应的目标页面。当快应用启动为非首次启动时,进入步骤102。
具体地,当快应用启动为首次启动时,由于快应用包体和渲染指令快照文件的接收顺序不确定,所以通过运行快应用包体以得到当前渲染指令,通过当前渲染指令进行渲染生成并展示对应的目标页面,避免渲染指令快照文件在快应用包体之后接收到,使用渲染指令快照文件反而影响渲染速度的问题。当快应用启动为非首次启动时,由于首次启动时已下载并保存了渲染指令快照文件,则无需通过运行快应用包体进行大量初始化工作得到渲染指令,可直接通过渲染指令快照文件得到渲染指令,并渲染得到对应的目标页面。
本实施例中,对于不同的快应用启动的情况,使用不同的方式进行页面渲染,自适应的保证页面渲染速度,智能提高快应用的启动速度。
在一个实施例中,方法还包括:创建JS引擎运行环境,JS框架初始化;解析快应用包体,加载资源文件,在JS引擎中运行生成当前渲染指令;当当前渲染指令已通过渲染指令快照文件执行时,生成并执行下一个渲染指令。
具体地,创建JS引擎运行环境,通过调用接口进行JS框架初始化,解析快应用包体,将资源文件加载至内存中,运行入口文件进行初始化,运行首页文件,在JS引擎中运行生成当前渲染指令。其中创建JS引擎运行环境,JS框架初始化和解析快应用包体可并行进行,JS框架初始化成功后,才开始加载资源文件。判断生成的当前渲染指令是否已通过渲染指令快照文件执行,如果已执行则忽略当前渲染指令,生成并执行下一个渲染指令。
本实施例中,通过创建JS引擎运行环境,执行JS代码,在JS引擎里运行,经过框架的解析得到当前渲染指令,如果当前渲染指令已通过渲染指令快照文件执行,则可通过JS引擎生成下一个渲染指令,继续渲染其他的页面。
在一个实施例中,方法还包括:获取动态加载页面元素指令,根据动态加载页面元素指令获取所述JS引擎运行生成的目标渲染指令;根据目标渲染指令在所述目标页面上绘制对应的页面元素,生成并展示更新的页面。
具体地,动态加载页面元素指令用于加载动态页面元素,动态页面元素是渲染指令快照文件无法绘制的,需要通过JS引擎运行生成对应的目标渲染指令,通过目标渲染指令在目标页面上绘制对应的页面元素,生成并展示更新的页面。动态页面元素可以根据用户的特征自定义,不同的用户对应不同的动态页面元素,从而形成个性化的页面。
本实施例中,在通过渲染指令快照文件直接生成目标页面后,再通过JS引擎生成动态加载页面元素对应的目标渲染指令,从而生成更新的页面,在高效生成的目标页面上进一步进行绘制。
图3为一个实施例中页面渲染数据处理方法的流程图。本实施例中的页面渲染数据处理方法,以运行于上述服务器为例进行描述,包括以下步骤:
步骤302,在服务端模拟快应用的运行环境,创建JS引擎运行环境。
具体地,可以通过Node V8模拟快应用的运行环境,Node V8是一个可以在pc上运行的JS引擎,与手机上的V8运行时环境对应,JS代码都需要在JS引擎里才能运行,Node V8就提供了这样的环境。
步骤304,通过JS引擎运行环境运行快应用包体,生成对应的渲染指令。
具体地,服务器接收到上传的快应用包体后,通过上个步骤创建的JS引擎运行环境运行快应用包体,生成对应的渲染指令。渲染指令在形式上可以是Json,通过命令告诉引擎需要绘制什么,以及在哪里绘制,可以包括待渲染对象标识、待渲染对象属性信息,如颜色、位置等。
步骤306,将渲染指令保存为快照文件生成对应的渲染指令快照文件,渲染指令快照文件用于下发至快应用的运行终端进行渲染生成对应的目标页面。
具体地,将渲染指令经过压缩后在服务端保存为快照文件,生成渲染指令快照文件,其中渲染指令快照文件可以是快应用列表中的所有快应用对应的渲染指令快照文件,不同的快应用对应不同的渲染指令快照文件。渲染指令快照文件可以在终端请求快应用列表数据时,将快应用列表中的所有快应用对应的渲染指令快照文件下发至终端,也可以在终端请求快应用包体时,将快应用包体对应的渲染指令快照文件下发至终端。渲染指令快照文件用于下发至快应用的运行终端后,可无需一系列的初始化操作直接得到渲染指令,从而进行渲染生成对应的目标页面。
本实施例中,在服务端模拟快应用的运行环境,创建JS引擎运行环境;通过JS引擎运行环境运行快应用包体,生成对应的渲染指令;将渲染指令保存为快照文件生成对应的渲染指令快照文件,渲染指令快照文件用于下发至快应用的运行终端进行渲染生成对应的目标页面,通过渲染指令快照文件可直接获取渲染指令,省去耗费大量时间进行JS环境初始化,JS代码运行生成渲染指令的过程,不再需要一系列初始化操作,直接运行渲染指令就可以生成画面,提高了页面渲染的效率,能显著提升快应用启动速度。
在一个实施例中,步骤302包括:创建电脑端JS引擎运行环境;将终端硬件调用接口对应的功能注入空实现。
具体地,电脑端JS引擎运行环境是指可以在电脑端上实现的JS引擎运行环境,如Node V8等。快应用的JS代码有大量需要调用手机硬件能力的方法,比如调用拍照能力,可称为Feature,但在PC上模拟运行时环境时,因为没有这些接口,就会导致运行时报错,为了能在PC上模拟整个快应用的运行时过程,将快应用的Feature都做一个空实现注入到NodeV8,让快应用在PC上也可以正常运行。
本实施例中,通过创建电脑端JS引擎运行环境;将终端硬件调用接口对应的功能注入空实现,使得快应用在PC(Personal Computer,个人计算机)上也可以正常运行,从而生成渲染指令。
在一个具体的实施例中,如图4和图5所示,渲染指令快照文件的生成和页面渲染包括以下步骤:
1、服务器通过开发平台接收开发者上传的快应用包体。
2、通过快照生成工具通过Node V8模拟快应用的运行环境,将快应用的Feature都做一个空实现注入到Node V8,运行快应用包体中的JS代码生成渲染指令,生成对应的渲染指令快照文件。
3、当服务器接收到快应用列表数据请求,或接收到快应用包体下载请求时,服务器将渲染指令快照文件下发至客户端,从而客户端可通过快应用引擎解析成渲染指令,不再需要一系列初始化操作,直接运行渲染指令就可以生成画面。
4、终端收到渲染指令快照文件,解析渲染指令快照文件得到渲染指令,使用渲染指令进行渲染生成并展示对应的目标页面。
5、终端创建V8运行时环境,运行JS框架,解析快应用包体,加载初始化文件,如app.js,加载首页文件,如page.js,生成对应的渲染指令,判断渲染指令是否已执行,如果已执行,则生成下一个渲染指令,如果未执行,则执行渲染指令。在目标页面上继续通过其他的渲染指令进行绘制,生成更新的页面。
本实施例中,通过在服务端模拟快应用运行时环境,提前生成渲染指令并保存成快照下发给客户端,省去耗费大量时间的JS环境初始化,JS代码运行生成渲染指令的过程,极大提升了快应用启动速度。
应该理解的是,虽然图2-5的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,图2-5中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些子步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
图6为一个实施例的页面渲染装置的结构框图。如图6所示,一种页面渲染装置500,包括获取模块502、渲染指令获取模块504、渲染模块506,其中:
获取模块502,用于响应于快应用启动,获取快应用对应的渲染指令快照文件,渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将渲染指令保存生成的快照文件。
渲染指令获取模块504,用于解析渲染指令快照文件得到渲染指令。
渲染模块506,用于使用渲染指令进行渲染生成并展示对应的目标页面。
本实施例中的页面渲染装置,响应于快应用启动,获取快应用对应的渲染指令快照文件,渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将渲染指令保存生成的快照文件;解析渲染指令快照文件得到渲染指令;使用渲染指令进行渲染生成并展示对应的目标页面,通过渲染指令快照文件可直接获取渲染指令,省去耗费大量时间进行JS环境初始化,JS代码运行生成渲染指令的过程,不再需要一系列初始化操作,直接运行渲染指令就可以生成画面,提高了页面渲染的效率,能显著提升快应用启动速度。
在一个实施例中,获取模块502还用于当进入快应用列表界面时,获取服务器下发的快应用列表对应的渲染指令快照文件。
本实施例中的页面渲染装置,当进入快应用列表界面时,就可获取服务器下发的快应用列表对应的渲染指令快照文件,在快应用启动前就获取到渲染指令快照文件,无需等待快应用包体的下载时间,就可通过渲染指令快照文件生成并展示快应用页面,进一步提高了快应用启动速度。
在一个实施例中,装置还包括:
下载模块508,用于向服务器发送快应用包体下载请求,从服务器下载快应用包体下载请求对应的快应用包体和渲染指令快照文件。
本实施例中的页面渲染装置,通过快应用包体下载请求,在第一次启动快应用时,同时获取到快应用对应的渲染指令快照文件,在下一次启动快应用时可通过渲染指令快照文件直接得到渲染指令,提高快应用启动速度。
在一个实施例中,装置还包括:
选择渲染模块510,用于当快应用启动为首次启动时,运行快应用包体以得到当前渲染指令,使用当前渲染指令进行渲染生成并展示对应的目标页面,当快应用启动为非首次启动时,进入渲染模块。
本实施例中的页面渲染装置,对于不同的快应用启动的情况,使用不同的方式进行页面渲染,自适应的保证页面渲染速度,智能提高快应用的启动速度。
在一个实施例中,装置还包括:
JS引擎模块512,用于创建JS引擎运行环境,JS框架初始化,解析快应用包体,加载资源文件,在JS引擎中运行生成当前渲染指令;当当前渲染指令已通过渲染指令快照文件执行时,生成并执行下一个渲染指令。
本实施例中的页面渲染装置,通过创建JS引擎运行环境,执行JS代码,在JS引擎里运行,经过框架的解析得到当前渲染指令,如果当前渲染指令已通过渲染指令快照文件执行,则可通过JS引擎生成下一个渲染指令,继续渲染其他的页面。
在一个实施例中,装置还包括:
页面更新模块514,用于获取动态加载页面元素指令,根据动态加载页面元素指令获取JS引擎运行生成的目标渲染指令;根据目标渲染指令在目标页面上绘制对应的页面元素,生成并展示更新的页面。
本实施例中的页面渲染装置,在通过渲染指令快照文件直接生成目标页面后,再通过JS引擎生成动态加载页面元素对应的目标渲染指令,从而生成更新的页面,在高效生成的目标页面上进一步进行绘制。
在一个实施例中,如图7所示,提供了一种页面渲染数据处理装置600,包括:
运行环境模拟模块602,用于在服务端模拟快应用的运行环境,创建JS引擎运行环境。
渲染指令生成模块604,用于通过JS引擎运行环境运行快应用包体,生成对应的渲染指令。
快照文件生成模块606,用于将渲染指令保存为快照文件生成对应的渲染指令快照文件,渲染指令快照文件用于下发至快应用的运行终端进行渲染生成对应的目标页面。
本实施例中,在服务端模拟快应用的运行环境,创建JS引擎运行环境;通过JS引擎运行环境运行快应用包体,生成对应的渲染指令;将渲染指令保存为快照文件生成对应的渲染指令快照文件,渲染指令快照文件用于下发至快应用的运行终端进行渲染生成对应的目标页面,通过渲染指令快照文件可直接获取渲染指令,省去耗费大量时间进行JS环境初始化,JS代码运行生成渲染指令的过程,不再需要一系列初始化操作,直接运行渲染指令就可以生成画面,提高了页面渲染的效率,能显著提升快应用启动速度。
在一个实施例中,运行环境模拟模块602还用于创建电脑端JS引擎运行环境,将终端硬件调用接口对应的功能注入空实现。
本实施例中,通过创建电脑端JS引擎运行环境;将终端硬件调用接口对应的功能注入空实现,使得快应用在PC上也可以正常运行,从而生成渲染指令。
上述页面渲染装置、页面渲染数据处理装置中各个模块的划分仅用于举例说明,在其他实施例中,可将页面渲染装置按照需要划分为不同的模块,以完成上述页面渲染装置的全部或部分功能。
关于页面渲染装置、页面渲染数据处理装置的具体限定可以参见上文中对于页面渲染方法、页面渲染数据处理方法的限定,在此不再赘述。上述页面渲染装置、页面渲染数据处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。
图8为一个实施例中电子设备的内部结构示意图。如图8所示,该电子设备包括通过系统总线连接的处理器和存储器。其中,该处理器用于提供计算和控制能力,支撑整个电子设备的运行。存储器可包括非易失性存储介质及内存储器。非易失性存储介质存储有操作系统和计算机程序。该计算机程序可被处理器所执行,以用于实现以下各个实施例所提供的一种页面渲染方法、页面渲染数据处理方法。内存储器为非易失性存储介质中的操作系统计算机程序提供高速缓存的运行环境。该电子设备可以是手机或服务器等。
本申请实施例中提供的页面渲染装置、页面渲染数据处理装置中的各个模块的实现可为计算机程序的形式。该计算机程序可在终端或服务器上运行。该计算机程序构成的程序模块可存储在电子设备的存储器上。该计算机程序被处理器执行时,实现本申请实施例中所描述方法的步骤。
本申请实施例还提供了一种计算机可读存储介质。一个或多个包含计算机可执行指令的非易失性计算机可读存储介质,当所述计算机可执行指令被一个或多个处理器执行时,使得所述处理器执行页面渲染方法或页面渲染数据处理方法的步骤。
一种包含指令的计算机程序产品,当其在计算机上运行时,使得计算机执行页面渲染方法或页面渲染数据处理方法。
本申请所使用的对存储器、存储、数据库或其它介质的任何引用可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM),它用作外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDR SDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。
Claims (12)
1.一种页面渲染方法,其特征在于,包括:
响应于快应用启动,获取所述快应用对应的渲染指令快照文件,所述渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将所述渲染指令保存生成的快照文件;
解析所述渲染指令快照文件得到所述渲染指令;
使用所述渲染指令进行渲染生成并展示对应的目标页面。
2.根据权利要求1所述的方法,其特征在于,所述响应于快应用启动,获取所述快应用对应的渲染指令快照文件之前,还包括:
当进入快应用列表界面时,获取服务器下发的快应用列表对应的渲染指令快照文件。
3.根据权利要求1所述的方法,其特征在于,所述响应于快应用启动,获取所述快应用对应的渲染指令快照文件之前,还包括:
向服务器发送快应用包体下载请求;
从服务器下载所述快应用包体下载请求对应的快应用包体和所述渲染指令快照文件。
4.根据权利要求3所述的方法,其特征在于,所述响应于快应用启动,获取所述快应用对应的渲染指令快照文件之前,还包括:
当所述快应用启动为首次启动时,运行所述快应用包体以得到当前渲染指令,使用所述当前渲染指令进行渲染生成并展示对应的目标页面;
当所述快应用启动为非首次启动时,进入所述获取所述快应用对应的渲染指令快照文件的步骤。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:
创建JS引擎运行环境,JS框架初始化;
解析快应用包体,加载资源文件,在所述JS引擎中运行生成当前渲染指令;
当所述当前渲染指令已通过所述渲染指令快照文件执行时,生成并执行下一个渲染指令。
6.根据权利要求4所述的方法,其特征在于,所述方法还包括:
获取动态加载页面元素指令,根据所述动态加载页面元素指令获取所述JS引擎运行生成的目标渲染指令;
根据所述目标渲染指令在所述目标页面上绘制对应的页面元素,生成并展示更新的页面。
7.一种页面渲染数据处理方法,其特征在于,包括:
在服务端模拟快应用的运行环境,创建JS引擎运行环境;
通过所述JS引擎运行环境运行快应用包体,生成对应的渲染指令;
将所述渲染指令保存为快照文件生成对应的渲染指令快照文件,所述渲染指令快照文件用于下发至所述快应用的运行终端进行渲染生成对应的目标页面。
8.根据权利要求7所述的方法,其特征在于,所述在服务端模拟快应用的运行环境,创建JS引擎运行环境包括:
创建电脑端JS引擎运行环境;
将终端硬件调用接口对应的功能注入空实现。
9.一种页面渲染装置,其特征在于,包括:
获取模块,用于响应于快应用启动,获取所述快应用对应的渲染指令快照文件,所述渲染指令快照文件是服务端模拟快应用的运行环境,运行快应用包体得到渲染指令,将所述渲染指令保存生成的快照文件;
渲染指令获取模块,用于解析所述渲染指令快照文件得到所述渲染指令;
渲染模块,用于使用所述渲染指令进行渲染生成并展示对应的目标页面。
10.一种页面渲染数据处理装置,其特征在于,包括:
运行环境模拟模块,用于在服务端模拟快应用的运行环境,创建JS引擎运行环境;
渲染指令生成模块,用于通过所述JS引擎运行环境运行快应用包体,生成对应的渲染指令;
快照文件生成模块,用于将所述渲染指令保存为快照文件生成对应的渲染指令快照文件,所述渲染指令快照文件用于下发至所述快应用的运行终端进行渲染生成对应的目标页面。
11.一种电子设备,包括存储器及处理器,所述存储器中储存有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如权利要求1至8中任一项所述方法的步骤。
12.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011047531.8A CN112114808A (zh) | 2020-09-29 | 2020-09-29 | 页面渲染方法、装置、电子设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011047531.8A CN112114808A (zh) | 2020-09-29 | 2020-09-29 | 页面渲染方法、装置、电子设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112114808A true CN112114808A (zh) | 2020-12-22 |
Family
ID=73797320
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011047531.8A Pending CN112114808A (zh) | 2020-09-29 | 2020-09-29 | 页面渲染方法、装置、电子设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112114808A (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112596729A (zh) * | 2020-12-28 | 2021-04-02 | 深圳市欢太科技有限公司 | 目标应用界面生成方法及装置、可读介质和电子设备 |
CN113694523A (zh) * | 2021-08-30 | 2021-11-26 | 上海哔哩哔哩科技有限公司 | 基于移动端app的h5游戏显示方法、装置及计算机设备 |
CN113885967A (zh) * | 2021-10-22 | 2022-01-04 | 北京字跳网络技术有限公司 | 一种小程序的启动方法、装置、设备及介质 |
WO2023005715A1 (zh) * | 2021-07-30 | 2023-02-02 | 花瓣云科技有限公司 | 快应用处理方法、电子设备与快应用系统 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109388453A (zh) * | 2018-09-07 | 2019-02-26 | Oppo广东移动通信有限公司 | 应用页面的展示方法、装置、存储介质和电子设备 |
US20190370024A1 (en) * | 2018-06-04 | 2019-12-05 | Sap Se | Context framework |
CN111177616A (zh) * | 2019-12-11 | 2020-05-19 | 未鲲(上海)科技服务有限公司 | 页面恢复显示方法、装置、计算机设备和存储介质 |
-
2020
- 2020-09-29 CN CN202011047531.8A patent/CN112114808A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20190370024A1 (en) * | 2018-06-04 | 2019-12-05 | Sap Se | Context framework |
CN109388453A (zh) * | 2018-09-07 | 2019-02-26 | Oppo广东移动通信有限公司 | 应用页面的展示方法、装置、存储介质和电子设备 |
CN111177616A (zh) * | 2019-12-11 | 2020-05-19 | 未鲲(上海)科技服务有限公司 | 页面恢复显示方法、装置、计算机设备和存储介质 |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112596729A (zh) * | 2020-12-28 | 2021-04-02 | 深圳市欢太科技有限公司 | 目标应用界面生成方法及装置、可读介质和电子设备 |
WO2023005715A1 (zh) * | 2021-07-30 | 2023-02-02 | 花瓣云科技有限公司 | 快应用处理方法、电子设备与快应用系统 |
CN113694523A (zh) * | 2021-08-30 | 2021-11-26 | 上海哔哩哔哩科技有限公司 | 基于移动端app的h5游戏显示方法、装置及计算机设备 |
CN113885967A (zh) * | 2021-10-22 | 2022-01-04 | 北京字跳网络技术有限公司 | 一种小程序的启动方法、装置、设备及介质 |
CN113885967B (zh) * | 2021-10-22 | 2024-02-13 | 北京字跳网络技术有限公司 | 一种小程序的启动方法、装置、设备及介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112114808A (zh) | 页面渲染方法、装置、电子设备 | |
CN109358936B (zh) | 信息处理方法、装置、存储介质、电子设备及系统 | |
CN109901834B (zh) | 文档页面生成方法、装置、计算机设备和存储介质 | |
CN110866198B (zh) | 静态资源缓存方法、系统、装置、计算机设备和存储介质 | |
CN108388515B (zh) | 测试数据生成方法、装置、设备以及计算机可读存储介质 | |
CN105718313A (zh) | 应用操作方法和装置 | |
CN110597709B (zh) | 混合模式移动应用的交互调试方法、装置和计算机设备 | |
CN112416458A (zh) | 基于ReactNative的预加载方法、装置、计算机设备及存储介质 | |
CN111949314A (zh) | 应用安装包的生成方法、装置、服务器和存储介质 | |
US9571557B2 (en) | Script caching method and information processing device utilizing the same | |
CN111737614B (zh) | 页面显示方法、装置、电子设备和存储介质 | |
CN109582890A (zh) | 页面加载方法、装置、计算机设备及存储介质 | |
CN113157337A (zh) | 应用程序启动方法、装置、终端设备及存储介质 | |
CN112926002A (zh) | 一种服务请求的处理方法及装置 | |
CN112416533A (zh) | 在浏览器上运行应用程序的方法、装置及电子设备 | |
CN111026988A (zh) | 一种页面加载的方法、装置、系统及计算机设备 | |
CN113315829B (zh) | 客户端离线化h5页面加载方法、装置、计算机设备及介质 | |
CN111045747A (zh) | 一种h5移动应用快速加载方法、系统、终端及存储介质 | |
CN115563424A (zh) | 一种动态pdf文档的生成方法、装置、系统及介质 | |
CN111857782B (zh) | 界面更新方法、装置、计算机设备和存储介质 | |
CN111177624B (zh) | 网站前后端通讯方法、装置、计算机设备和存储介质 | |
CN114398912A (zh) | 语言处理方法、装置、设备及存储介质 | |
CN113672826A (zh) | 页面跳转方法、装置、计算机设备和存储介质 | |
CN112015378A (zh) | 骨架屏页面生成方法、装置、计算机设备和存储介质 | |
CN112925715A (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 |