CN114238815A - 页面渲染方法、装置、计算机设备和存储介质 - Google Patents
页面渲染方法、装置、计算机设备和存储介质 Download PDFInfo
- Publication number
- CN114238815A CN114238815A CN202111549190.9A CN202111549190A CN114238815A CN 114238815 A CN114238815 A CN 114238815A CN 202111549190 A CN202111549190 A CN 202111549190A CN 114238815 A CN114238815 A CN 114238815A
- Authority
- CN
- China
- Prior art keywords
- rendering
- loading
- page
- task execution
- event
- 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
Images
Classifications
-
- 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
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请涉及一种页面渲染方法、装置、计算机设备和存储介质。方法包括:获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;获取目标页面对应的业务数据,获取目标页面对应的页面组件;基于配置信息确定任务执行主体级别,按照任务执行主体级别对业务数据进行加载,在业务数据的加载过程中,对页面组件进行加载及实例化;基于加载的业务数据与实例化的页面组件,应用渲染事件进行渲染。采用本方法并行加载动态的业务数据与静态的页面组件数据,改变现有的数据加载模式,在此基础上,通过配置信息来控制渲染事件的加载过程,可以通过各级别的并行方式进行渲染,由此,提高了渲染的效率。
Description
技术领域
本申请涉及前端界面显示技术领域,特别是涉及一种页面渲染方法、装置、计算机设备和存储介质。
背景技术
随着前端技术的发展,出现了页面渲染技术,在一个页面进行渲染的过程中,常常从渲染引擎入手,一个渲染引擎常常对应于单独的渲染进程,通过多个渲染引擎分别对应的渲染进程间通讯,实现内容的展示与交互。
而随着数据的增多,在使用渲染引擎进行加载业务数据时,一般需要基于渲染好的页面组件进行业务数据的第二轮渲染,而第二轮渲染的次数也是未知的,导致渲染过程复杂,渲染效率低。
发明内容
基于此,针对上述技术问题,本申请提供一种能够高效渲染业务数据的页面渲染方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
第一方面,本申请提供了一种页面渲染方法。所述方法包括:
获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;
获取目标页面对应的业务数据,获取目标页面对应的页面组件;
基于所述配置信息确定任务执行主体级别,按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化;
基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染。
在其中一个实施例中,所述按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化包括:
获取用于加载的任务执行主体级别,基于所述任务执行主体级别确定第一任务执行主体与第二任务执行主体;
应用第一任务执行主体加载所述业务数据,在所述业务数据的加载过程中,应用所述第二任务执行主体对所述页面组件进行加载及实例化。
在其中一个实施例中,所述基于所述任务执行主体级别确定第一任务执行主体与第二任务执行主体,包括:
若所述任务执行主体级别是设备级别,则将第一渲染设备确定为第一任务执行主体,将第二渲染设备确定为第二任务执行主体;
若所述任务执行主体级别是进程级别,则将第一渲染进程确定为第一任务执行主体,将第二渲染进程确定为第二任务执行主体;
若所述任务执行主体级别是线程级别,则将第一渲染进程的第一渲染线程确定为第一任务执行主体,将所述第一渲染进程的第二渲染线程确定为第二任务执行主体。
在其中一个实施例中,所述按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化,包括:
若所述目标页面的加载策略为并行加载策略,则对所述业务数据进行加载,在所述业务数据的加载过程中,使用第二任务执行主体对所述页面组件进行加载及实例化,其中,所述第一任务执行主体与所述第二任务执行主体的任务执行主体级别相同;
所述方法还包括:
若所述目标页面的加载策略为串行加载策略,则对所述页面组件进行加载及实例化,应用实例化的所述页面组件进行渲染,得到渲染后的页面组件;
基于所述渲染事件,对所述业务数据与渲染后的页面组件进行渲染。
在其中一个实施例中,所述基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染包括:当所述渲染事件未完成且所述业务数据与所述页面组件是待显示内容时,基于所述渲染事件,渲染所述待显示内容。
在其中一个实施例中,当应用所述渲染事件进行渲染时,所述方法还包括:
获取所述目标页面对应的界面刷新频率;
基于所述界面刷新频率生成渲染调度周期,根据所述渲染调度周期对渲染过程进行渲染调度处理。
在其中一个实施例中,所述配置信息包括加载策略配置事件,所述获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息包括:
获取页面渲染指令,从所述页面渲染指令中获取所述目标页面的渲染事件,所述渲染事件用于进行渲染;
将加载策略配置插件实例化,得到加载策略配置事件,所述加载策略配置事件用于控制业务数据与页面组件的加载策略。
第二方面,本申请还提供了一种页面渲染装置,所述装置包括:
事件获取模块,用于获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;
数据获取模块,用于获取目标页面对应的业务数据,获取目标页面对应的页面组件;
加载模块,用于基于所述配置信息确定任务执行主体级别,按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化;
渲染模块,用于基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染。
第三方面,本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:
获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;
获取目标页面对应的业务数据,获取目标页面对应的页面组件;
基于所述配置信息确定任务执行主体级别,按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化;
基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染。
第四方面,本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现以下步骤:
获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;
获取目标页面对应的业务数据,获取目标页面对应的页面组件;
基于所述配置信息确定任务执行主体级别,按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化;
基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染。
第五方面,本申请还提供了一种计算机程序产品。所述计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现以下步骤:
获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;
获取目标页面对应的业务数据,获取目标页面对应的页面组件;
基于所述配置信息确定任务执行主体级别,按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化;
基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染。
上述页面渲染方法、装置、计算机设备、存储介质和计算机程序产品,并行加载动态的业务数据与静态的页面组件数据,改变现有的数据加载模式,由此,只需要一次渲染,即可得到同时携带有静态数据与动态数据的网页,减少渲染次数,提高渲染效率;而在此基础上,通过配置信息来控制渲染事件的加载过程,可以通过设备级别、浏览器进程级别或线程级别的并行方式进行渲染,充分尊重目标网页的渲染事件,避免因为加载策略导致渲染出现问题,进一步提高了渲染的效率。
附图说明
图1为一个实施例中页面渲染方法的应用环境图;
图2为一个实施例中页面渲染方法的流程示意图;
图3为一个实施例中渲染事件与加载策略获取的流程示意图;
图4为一个实施例中执行并行加载策略的流程示意图;
图5为另一个实施例中对并行加载策略的流程示意图;
图6为另一个实施例中对单进程加载策略的流程示意图;
图7为一个实施例中渲染事件干预的流程示意图;
图8为一个实施例中插件实例化的流程示意图;
图9为一个实施例中加载策略读取的流程示意图;
图10为一个实施例中渲染调度机制的流程示意图;
图11为另一个实施例中页面渲染方法的流程示意图;
图12为一个实施例中页面渲染装置的结构框图;
图13为一个实施例中计算机设备的内部结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。在以下的描述中,“A和/或B”的含义是“A以及B中的至少之一”。
本申请实施例提供的页面渲染方法,可以应用于如图1所示的应用环境中。其中,终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上,也可以放在云上或其他网络服务器上。终端102获取目标页面的渲染事件;获取目标页面对应的业务数据,获取目标页面对应的页面组件;对业务数据进行加载,在业务数据的加载过程中,对页面组件进行加载及实例化;基于加载的业务数据与实例化的页面组件,应用渲染事件进行渲染。例如:终端102可以向服务器104提供某些信息,以便服务器104进行渲染的计算过程,而服务器104计算之后,会将计算结果反馈给终端102,再由终端102实现页面进行页面渲染。
其中,终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备,物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
在一个实施例中,如图2所示,提供了一种页面渲染方法,以该方法应用于图1中的终端102为例进行说明,包括以下步骤:
步骤202,获取目标页面的渲染事件,确定用于控制渲染事件加载的配置信息。
渲染事件,常称为render事件,其可以是目标页面的原生渲染事件。渲染事件可以是一个函数集合,该函数集合用于调用某些数据对目标页面进行渲染;渲染事件可以是一个类,包括多个函数集合与相应的参数;渲染事件还可以是某一个流程,是一系列渲染相关的事件组合而成,包括但不限于渲染树构建的流程,也可以是任意渲染流程。
可选地,在获取目标页面的渲染事件时,获取加载策略的配置信息,以确定加载策略,加载策略用于控制渲染事件的进行状态。当渲染事件是原生渲染事件时,可通过插件将加载策略加载到浏览器中,或者,加载到其他用来检索、展示或者传递网络信息资源的应用程序中。加载策略的配置信息,可用来调度加载策略,其可以是一个标识,也可以是一个系列的函数或事件。
可选地,用于控制渲染事件加载的配置信息,还用于确定任务执行主体级别,通过选择不同任务执行主体级别的任务执行主体,使用合适任务执行主体执行合适的事情,进一步地提升整体加载效率。
在一个可选地实施方式中,在获取目标页面的渲染事件之前,先会加载目标页面的HTML,解析出段落结构,进行渲染事件的选择,以在对应的段落进行渲染。相对应的,通过对HTML进行解析之后,可以直接得到目标页面的渲染事件。
在一个可选地实施方式中,在某插件检测到预设指令时,该插件会获取渲染事件,而获取渲染事件之后,可以从该插件对应的数据中获取加载策略,从加载策略获取到配置信息。
步骤204,获取目标页面对应的业务数据,获取目标页面对应的页面组件;
页面组件,其是对基础数据、方法、UI封装成的控件。页面组件可以是单页Web应用的业务组件,单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML页面并在用户与应用程序交互时,动态更新该页面的Web应用程序。用于加载单个HTML页面和多个业务组件,还用于在用户与应用程序交互时动态更新该页面。业务数据,其是随着业务的改变的动态数据,主要是通过app客户端、小程序或轻应用等程序输入或获取到的数据。
步骤206,基于配置信息确定任务执行主体级别,按照任务执行主体级别对业务数据进行加载,在业务数据的加载过程中,对页面组件进行加载及实例化;
在一可选地实施例中,基于配置信息确定加载策略为并行加载策略,按照并行加载策略判断是否执行,为目标页面的渲染事件添加了加载策略的配置信息,而使用配置信息可以不改变目标网页的原生渲染事件,以便于把控渲染的整体执行,同时提高原生单一进程下的请求业务数据的线程并存数可控渲染流程,增强了渲染组件的灵活性;也可以通过并行的方式执行,分别获取目标页面对应的业务数据与目标页面对应的页面组件;使用一个任务执行主体获取目标页面对应的业务数据,并且使用另一个任务执行主体获取目标页面对应的页面组件,对页面组件进行实例化,得到实例化后的页面组件。
在一可选地实施例中,在获取目标页面对应的业务数据后,和/或,得到实例化后的页面组件后,会生成订阅消息或者按照某些算法进行计算,以通知对应的线程或者进程执行下一步骤的操作。例如:可以使用心跳算法等算法,只要该算法能够实现进行线程或进程间的通信。
步骤208,基于业务数据与实例化后的页面组件,应用渲染事件进行渲染。
在一可选地实施方式中,在加载对应的业务数据,且得到实例化的页面组件后,将业务数据与实例化后的页面组件同步渲染。由此,只需要一次渲染,即可对动态的业务数据进行渲染。
在一实施方式中,渲染事件是目标网页的原生渲染事件。由此,可以更改渲染的条件,却不更改原生的渲染事件,可以充分实现原生的渲染事件的渲染效果。可选地,应用渲染事件进行渲染,可以基于原生渲染引擎或修改后的渲染引擎,也可以改变渲染进程或渲染线程,例如:可以通过原生渲染引擎启动原生的渲染事件,按照原有的渲染流程进行渲染,而使用修改后的渲染引擎进行渲染时,也不容易出现问题。
上述页面渲染方法中,按照目标页面的渲染事件,并行加载动态的业务数据与静态的页面组件数据,改变现有的数据加载模式,由此,只需要一次渲染,即可得到同时携带有静态数据与动态数据的网页,减少渲染次数,提高渲染效率。具体的,并行加载大大提高了组件实例化与业务数据处理的速度,降低因同进程下局部异常导致全过程失败的可能,此外,提高了应用访问的成功率与程序加载速度。而在此基础上,通过配置信息来控制渲染事件的加载过程,可以通过设备级别、浏览器进程级别或线程级别的并行方式进行渲染,充分尊重目标网页的渲染事件,避免因为加载策略导致渲染出现问题,进一步提高了渲染的效率。
在一个实施例中,论述渲染事件与加载策略的获取过程,如图3所示,配置信息包括加载策略配置事件,获取目标页面的渲染事件与加载策略的配置信息,确定用于控制渲染事件加载的配置信息包括:
步骤302,获取页面渲染指令,从页面渲染指令中获取目标页面的渲染事件,渲染事件用于进行渲染。
在一可选地实施方式中,通过用户直接触发的或者某些线程触发的指令,生成页面渲染指令;页面渲染指令携带有目标页面的渲染事件,或者,页面渲染指令对应于目标页面的渲染事件。由此,对于浏览器或轻应用等用于显示某些界面的应用程序,可以直接调用其中的原生渲染事件,以原生渲染事件进行渲染,可以配合各种渲染引擎,进一步提高渲染效率或者,进一步提高渲染效果。
步骤304,将加载策略配置插件实例化,得到实例化后的加载策略配置事件,加载策略配置事件用于控制业务数据与页面组件的加载流程。
在一可选地实施例中,通过某种对应关系获取加载策略配置插件实例化后的结果,或者,直接应用加载策略配置插件,以实现加载策略配置插件实例化。而实例化的加载策略配置事件,其可以是对象或者其他任意类型的数据实体。
本实施例中,通过页面渲染指令获取目标页面的渲染事件,以此进行渲染;同时,基于实例化的加载策略配置事件,控制业务数据与页面组件的加载流程,由此,可以选择是否并行加载这两种数据,把控整体渲染进程,提高了可选择性,间接提升渲染效率。
在一个实施例中,初步阐述并行加载策略,如图4所示,对业务数据进行加载,在业务数据的加载过程中,对页面组件进行加载及实例化包括:
步骤402,获取用于加载的任务执行主体级别,基于任务执行主体级别,确定第一任务执行主体与第二任务执行主体。
目标页面可以设定有不同的任务执行主体级别,任务执行主体级别可以是设备级别、进程级或者线程级;设备级别可以是终端级别或服务器级别,若设备级别是服务器级别,其渲染过程可以基于SSR技术,SSR技术是通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序;任务执行主体级别可以基于基本因素或者基本因素的任意组合而设定,基本因素可以是不同功能、用途、面向对象、显示效果、渲染引擎和数据量等。
步骤404,应用第一任务执行主体加载业务数据,在业务数据的加载过程中,应用第二任务执行主体对页面组件进行加载及实例化。
本实施例中,目标页面可以设定有不同的任务执行主体级别,设定相应的执行效果,可并行加载业务数据与页面组件,以提高渲染效率,也可以进一步提升渲染效果。
在一个实施例中,对任务执行主体级别进行剖析,如图5所示,获取用于加载的任务执行主体级别,基于任务执行主体级别,获取第一任务执行主体与第二任务执行主体,包括:
步骤502,若任务执行主体级别是设备级别,则将第一渲染设备确定为第一任务执行主体,将第二渲染设备确定为第二任务执行主体。
步骤504,若任务执行主体级别是进程级别,则将第一渲染进程确定为第一任务执行主体,将第二渲染进程确定为第二任务执行主体。
步骤506,若任务执行主体级别是线程级别,则将第一渲染进程的第一渲染线程确定为第一任务执行主体,将第一渲染进程的第二渲染线程确定为第二任务执行主体。
本实施例中,阐述了渲染的执行主体,上述渲染可以基于一个浏览器级别的渲染进程,也可以跨进程执行,由此,充分尊重目标网页的原生渲染事件,避免因为加载策略导致渲染出现问题,间接的提高了渲染的效率。
在一个实施例中,描述单进程加载策略,如图6所示,按照任务执行主体级别对业务数据进行加载,在业务数据的加载过程中,对页面组件进行加载及实例化,包括:
步骤602,若目标页面的加载策略为并行加载策略,则使用第一任务执行主体对业务数据进行加载,在业务数据的加载过程中,使用第二任务执行主体对页面组件进行加载及实例化,其中,第一任务执行主体与第二任务执行主体的任务执行主体级别相同;
步骤604,若目标页面的加载策略为串行加载策略,则对页面组件进行加载及实例化,应用实例化的页面组件进行渲染,得到渲染后的页面组件。
可选地,串行加载策略,其可以是传统的串行方式进行加载,也可以是单线程并发;其中,单线程并发是指,通过仅使用一个线程来执行渲染任务,其可以利用系统的回收机制,如果内存中的数据没有任何变量进行指向的话,则该数据ip的映射数为0,系统会自动的对映射数为0的数据ip进行清空,以实现单线程并发。
步骤606,基于渲染事件,对业务数据与渲染后的页面组件进行渲染。
本实施例中,阐述了使用单浏览器级别的进程进行加载的策略,先对页面组件实例化,再通过实例化后的页面组件进行第一次渲染,在第一次渲染之后,使用业务数据与渲染后的页面组件进行二次渲染,由此,可以提供备用方案,在并行进程加载策略无法执行时,可以选择单进程加载策略,降低渲染失败的可能性;也可以尊重目标页面对应的原生渲染事件,保障渲染效果。
在一个实施例中,描述对渲染事件执行过程的干预,如图7所示,当应用渲染事件进行渲染时,该方法还包括:
步骤702,获取目标页面对应的界面刷新频率;
其中,界面刷新频率可以是终端的屏幕刷新频率,可以是屏幕刷新频率的整数倍或其他倍数,还可以是预设频率,或者基于某种调节机制而设定的动态频率。
步骤704,基于界面刷新频率生成渲染调度周期,在渲染调度周期,检测业务数据与实例化后的页面组件是否完成渲染。
可选地,渲染调度周期的生成是多种多样的,其是基于界面刷新频率按照某些映射关系获得的,可以通过映射表获得,也可以通过函数计算所得;如果是通过映射表所得,则渲染调度周期可以是指令周期、机器周期或时钟周期等;如果是通过函数计算所得,那计算所得的渲染调度周期可以是时间性周期等。
在一可选地实施方式中,检测业务数据与实例化后的页面组件是否完成渲染的过程中,可以贯穿渲染事件的整个生命周期,也可以是整个生命周期的一部分。例如:可以判断是否存在渲染调度机制,若不存在渲染调度机制,则渲染完成,若存在渲染调度机制,则依据渲染调度机制进行渲染。当然,不论是否存在渲染调度机制,都可使用渲染调度周期,只是渲染调度周期可以独立于渲染调度机制之外,也可以是渲染调度机制的一部分。
本实施例中,通过将界面刷新频率作为渲染调度时间,能够达到无间隙检测的效果,由此,一方面因为渲染调度机制而产生bug的可能性,另一方面削弱了数据检测对渲染的影响。
在一实施例中,对渲染调度机制进行描述,基于加载的业务数据与实例化的页面组件,应用渲染事件进行渲染包括:当渲染事件未完成且业务数据与页面组件是待显示内容时,基于渲染事件,渲染待显示内容。
待显示内容,是可以用于渲染的内容,对于一个页面而言,其包括诸多元素,有一些元素是面向开发者的元素,面向开发者的元素是不会直接显示在目标页面的;例如:待显示内容可以是body元素对应的内容,body元素用于定义文档的主体;body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)body是用在网页中的一种HTML标签,标签是用在网页中的一种HTML标签,表示网页的主体部分;相对应的,对于body本身而言,其并不会直接显示出来,因此,body元素本身并不是一个待显示内容。
在一可选地实施方式中,判断渲染事件未完成的过程,可以依赖对应的标识,该标识可以是渲染事件的时间点、时间段或某一相关事件对应的数据,例如:可以确定启动渲染事件的时间点、渲染调度周期或渲染调度周期中的时间段或时间点对应的数据进行判断,若符合相应规则,则开始渲染或继续渲染。
相对应的,实施方法还包括:若确定当前的业务数据与页面组件是隐藏内容,则跳过隐藏内容,对待显示内容进行渲染,直至渲染事件对应的待显示内容渲染完毕,或者,基于其他机制暂停、中止或终止渲染。
在一可选地实施方式中,在待显示内容全部被渲染的过程中,渲染调度机制是按照渲染调度周期进行的,在一个渲染调度周期内,可以执行至少部分渲染事件,而在不同渲染调度周期内,渲染页面中的不同部分的待显示内容:例如:可以在第一周期构建DOM树,在第二周期构建渲染树,其中,第一周期与第二周期的长度可以存在关联,也可以并无关联;又如:可以在不同周期内,分别构建视频相关内容与音频相关内容。
本实施例中,通过渲染调度机制,将可渲染的内容进行渲染,将不可渲染的内容隐藏起来,进一步把控渲染的流程。
上述各实施例侧重于技术创新点的描述,为了更清楚论述技术方案,将以工作人员思路对应的实施例进行论述。现有方案中,以同步加载方式且整个过程处于同一进程中。过长的加载时间,在网络稳定性波动的比较大的情况下,短时间内造成应用加载失败比较高;不必要的二次渲染导致有限性能的设备出现短暂的性能瓶颈现象;渲染组件过程中不可控,如:不可中断、不可暂停。
本方案中采用了组件与业务数据的并存的加载方式,在用户加载HTML后,同时请求业务数据的过程与加载、实例化组件的过程,等待数据请求回来后且组件实例化后进行合并处理再渲染组件加以可控制的流程来解决上述现有的缺点,以缩减页面加载时间,提高页面加载的成功率,降低无必要的性能消耗。
在一个具体的实施方案中,如图8所示,当HTML加载完成后,进行以浏览器的插件实例化的一个过程,通过配置文件传入生成的策略选择事件,判断组件与业务数据是通过单线程加载的同步策略,或者多线程级别的并行加载策略,或多进程级别的并行加载策略。由此,通过获取原生渲染事件,既能实现原生渲染事件功能,同时让整个组件渲染流程变得可控的。
在一个具体的实施方案中,如图9所示,在插件实例化之后,进入了加载策略读取过程,其包括如下步骤:
(1)流程开始的时候先进行读取配置信息,配置信息由加载模式、加载级别、加载业务数据逻辑、组件逻辑组成。
(2)根据加载模式,如果不是并存的加载模式,则进行先加载并实例化组件,再加载业务数据;如是并存的加载模式,则在判断是否是以加载级别进行判断,确定是否以进程级别进行并存加载。
(3)如果是进程级别的并存加载,先创建一条浏览器级别的进程;在主进程或新建的进程中,同时进行加载组件与加载业务数据;当加载组件之后,进行实例化组件,实例化完成后,以发布订阅的方式,告知系统组件已经实例化完成;当完成加载业务数据后同样以发布订阅的方式,告知系统已完成加载业务数据;
(4)当系统接收到完成组件实例化与完成加载业务数据后,流程结束,进入渲染流程。在一个具体的实施方案中,如图10所示,在进入渲染流程后,渲染流程包括如下步骤:
(a)当触发渲染组件的过程中,先读取标识这个过程是否可以渲染,如是则调用原生渲染事件,基于原生渲染事件开始渲染的流程。
(b)在开始渲染到渲染完成的过程中,判断是否有暂停渲染调度机制,如果有则以设备屏幕刷新频率的时间,划分时间切片;在时间切片交替的过程中,我们判断当前的渲染过程如果未完成渲染则继续判断是否可以继续渲染,如果不可以则结束,如果可以则进行继续渲染流程。
将上述三个具体的实施方案进行组合后,如图11所示,对比原有的流程,本方案划成4个阶段分别是HTML加载阶段、实例化插件阶段、触发事件策略选择加载阶段、渲染组件阶段;其中HTML加载阶段与现有的流程保持一致;加载完成后进行插件的初始化,然后触发事件策略选择加载,此阶段既包含了兼容原有流程的加载、实化组件、加载业务数据的流程选择,又涵盖方案中提出的策略优化流程;进入渲染组件阶段增加了渲染调度机制配置来控制渲染流程。整个方案中既能兼容原有传统的加载、渲染流程,又具备组件与业务数据并存加载、渲染的新方案。
由此,首先,进程级别的并存加载,大大提高了组件实例化与业务数据处理的速度,降低因同进程下局部异常导致全过程失败,同时提高原生单一进程下的请求业务数据的线程并存数。其次,可控渲染流程,增强了渲染组件的灵活性,此外,提高了应用访问的成功率与程序加载速度。
应该理解的是,虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段,这些步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
基于同样的发明构思,本申请实施例还提供了一种用于实现上述所涉及的页面渲染方法的页面渲染装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似,故下面所提供的一个或多个页面渲染装置实施例中的具体限定可以参见上文中对于页面渲染方法的限定,在此不再赘述。
在一个实施例中,如图12所示,提供了一种页面渲染装置,包括:事件获取模块1202、数据获取模块1204、加载模块1206和渲染模块1208,其中:
事件获取模块1202,用于获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;
数据获取模块1204,用于获取目标页面对应的业务数据,获取目标页面对应的页面组件;
加载模块1206,用于基于所述配置信息确定任务执行主体级别,按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化;
渲染模块1208,用于基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染。
在其中一个实施例中,所述对所述业务数据进行加载,加载模块1206包括:
级别确定单元,用于获取用于加载的任务执行主体级别,基于所述任务执行主体级别确定第一任务执行主体与第二任务执行主体;
并行加载单元,用于应用第一任务执行主体加载所述业务数据,在所述业务数据的加载过程中,应用所述第二任务执行主体对所述页面组件进行加载及实例化。
在其中一个实施例中,级别确定单元,包括:
设备级渲染子单元,用于若所述任务执行主体级别是设备级别,则将第一渲染设备确定为第一任务执行主体,将第二渲染设备确定为第二任务执行主体;
进程级渲染子单元,用于若所述任务执行主体级别是进程级别,则将第一渲染进程确定为第一任务执行主体,将第二渲染进程确定为第二任务执行主体;
线程级渲染子单元,用于若所述任务执行主体级别是线程级别,则将第一渲染进程的第一渲染线程确定为第一任务执行主体,将所述第一渲染进程的第二渲染线程确定为第二任务执行主体。
在其中一个实施例中,所述加载模块1206,包括:
并行加载单元,用于判断所述目标页面的加载策略为并行加载策略,则使用第一任务执行主体对所述业务数据进行加载,在所述业务数据的加载过程中,使用第二任务执行主体对所述页面组件进行加载及实例化,其中,所述第一任务执行主体与所述第二任务执行主体的任务执行主体级别相同;
相对应的,所述数据获取模块1204,还包括:
串行加载单元,用于判断若所述目标页面的加载策略为串行加载策略,则对所述页面组件进行加载及实例化,应用实例化的所述页面组件进行渲染,得到渲染后的页面组件;
串行渲染单元,用于基于所述渲染事件,对所述业务数据与渲染后的页面组件进行渲染。
在其中一个实施例中,所述渲染模块1208,还用于当所述渲染事件未完成且所述业务数据与所述页面组件是待显示内容时,则基于所述渲染事件,渲染所述待显示内容。
在其中一个实施例中,当应用所述渲染事件进行渲染时,所述装置还包括:周期调度模块,所述周期调度模块包括:
刷新频率获取单元,用于获取所述目标页面对应的界面刷新频率;
周期调度单元,用于基于所述界面刷新频率生成渲染调度周期,根据所述渲染调度周期对渲染过程进行渲染调度处理。
在其中一个实施例中,所述配置信息包括加载策略配置事件,所述事件获取模块1202包括:
渲染事件获取单元,用于获取页面渲染指令,从所述页面渲染指令中获取所述目标页面的渲染事件,所述渲染事件用于进行渲染;
配置信息获取单元,用于将加载策略配置插件实例化,得到加载策略配置事件,所述加载策略配置事件用于控制业务数据与页面组件的加载策略。
上述页面渲染装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中,提供了一种计算机设备,该计算机设备可以是终端,其内部结构图可以如图13所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信,无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面渲染方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏,该计算机设备的输入装置可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解,图13中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一个实施例中,还提供了一种计算机设备,包括存储器和处理器,存储器中存储有计算机程序,该处理器执行计算机程序时实现上述各方法实施例中的步骤。
在一个实施例中,提供了一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
在一个实施例中,提供了一种计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
需要说明的是,本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于业务数据、用于分析的数据、存储的数据、展示的数据等),均为经用户授权或者经过各方充分授权的信息和数据。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用,均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory,ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory,MRAM)、铁电存储器(Ferroelectric Random Access Memory,FRAM)、相变存储器(Phase Change Memory,PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory,RAM)或外部高速缓冲存储器等。作为说明而非局限,RAM可以是多种形式,比如静态随机存取存储器(Static Random Access Memory,SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory,DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等,不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等,不限于此。
以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请的保护范围应以所附权利要求为准。
Claims (10)
1.一种页面渲染方法,其特征在于,所述方法包括:
获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;
获取目标页面对应的业务数据,获取目标页面对应的页面组件;
基于所述配置信息确定任务执行主体级别,按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化;
基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染。
2.根据权利要求1所述的方法,其特征在于,所述按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化包括:
获取用于加载的任务执行主体级别,基于所述任务执行主体级别确定第一任务执行主体与第二任务执行主体;
应用第一任务执行主体加载所述业务数据,在所述业务数据的加载过程中,应用所述第二任务执行主体对所述页面组件进行加载及实例化。
3.根据权利要求2所述的方法,其特征在于,所述基于所述任务执行主体级别确定第一任务执行主体与第二任务执行主体,包括:
若所述任务执行主体级别是设备级别,则将第一渲染设备确定为第一任务执行主体,将第二渲染设备确定为第二任务执行主体;
若所述任务执行主体级别是进程级别,则将第一渲染进程确定为第一任务执行主体,将第二渲染进程确定为第二任务执行主体;
若所述任务执行主体级别是线程级别,则将第一渲染进程的第一渲染线程确定为第一任务执行主体,将所述第一渲染进程的第二渲染线程确定为第二任务执行主体。
4.根据权利要求1所述的方法,其特征在于,所述按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化,包括:
若所述目标页面的加载策略为并行加载策略,则使用第一任务执行主体对所述业务数据进行加载,在所述业务数据的加载过程中,使用第二任务执行主体对所述页面组件进行加载及实例化,其中,所述第一任务执行主体与所述第二任务执行主体的任务执行主体级别相同;
所述方法还包括:
若所述目标页面的加载策略为串行加载策略,则对所述页面组件进行加载及实例化,应用实例化的所述页面组件进行渲染,得到渲染后的页面组件;
基于所述渲染事件,对所述业务数据与渲染后的页面组件进行渲染。
5.根据权利要求1所述的方法,其特征在于,所述基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染包括:当所述渲染事件未完成且所述业务数据与所述页面组件是待显示内容时,基于所述渲染事件,渲染所述待显示内容。
6.根据权利要求1~5任意一项所述的方法,其特征在于,当应用所述渲染事件进行渲染时,所述方法还包括:
获取所述目标页面对应的界面刷新频率;
基于所述界面刷新频率生成渲染调度周期,根据所述渲染调度周期对渲染过程进行渲染调度处理。
7.根据权利要求1~5任意一项所述的方法,其特征在于,所述配置信息包括加载策略配置事件,所述获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息包括:
获取页面渲染指令,从所述页面渲染指令中获取所述目标页面的渲染事件,所述渲染事件用于进行渲染;
将加载策略配置插件实例化,得到加载策略配置事件,所述加载策略配置事件用于控制业务数据与页面组件的加载策略。
8.一种页面渲染装置,其特征在于,所述装置包括:
事件获取模块,用于获取目标页面的渲染事件,确定用于控制所述渲染事件加载的配置信息;
数据获取模块,用于获取目标页面对应的业务数据,获取目标页面对应的页面组件;
加载模块,用于基于所述配置信息确定任务执行主体级别,按照所述任务执行主体级别对所述业务数据进行加载,在所述业务数据的加载过程中,对所述页面组件进行加载及实例化;
渲染模块,用于基于加载的所述业务数据与实例化的所述页面组件,应用所述渲染事件进行渲染。
9.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111549190.9A CN114238815A (zh) | 2021-12-17 | 2021-12-17 | 页面渲染方法、装置、计算机设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111549190.9A CN114238815A (zh) | 2021-12-17 | 2021-12-17 | 页面渲染方法、装置、计算机设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN114238815A true CN114238815A (zh) | 2022-03-25 |
Family
ID=80757851
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111549190.9A Pending CN114238815A (zh) | 2021-12-17 | 2021-12-17 | 页面渲染方法、装置、计算机设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114238815A (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115079923A (zh) * | 2022-06-17 | 2022-09-20 | 北京新唐思创教育科技有限公司 | 事件处理方法、装置、设备及介质 |
CN116302579A (zh) * | 2023-05-25 | 2023-06-23 | 智成时空(西安)创新科技有限公司 | 面向Web端的时空大数据高效加载渲染方法及系统 |
-
2021
- 2021-12-17 CN CN202111549190.9A patent/CN114238815A/zh active Pending
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115079923A (zh) * | 2022-06-17 | 2022-09-20 | 北京新唐思创教育科技有限公司 | 事件处理方法、装置、设备及介质 |
CN115079923B (zh) * | 2022-06-17 | 2023-11-07 | 北京新唐思创教育科技有限公司 | 事件处理方法、装置、设备及介质 |
CN116302579A (zh) * | 2023-05-25 | 2023-06-23 | 智成时空(西安)创新科技有限公司 | 面向Web端的时空大数据高效加载渲染方法及系统 |
CN116302579B (zh) * | 2023-05-25 | 2023-08-04 | 智成时空(西安)创新科技有限公司 | 面向Web端的时空大数据高效加载渲染方法及系统 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10534635B2 (en) | Personal digital assistant | |
WO2017124961A1 (zh) | 一种界面处理方法、装置和智能终端 | |
CN114238815A (zh) | 页面渲染方法、装置、计算机设备和存储介质 | |
CN103914205B (zh) | 一种智能终端的文件缩略图展示方法和装置 | |
US8490118B2 (en) | Wait on address synchronization interface | |
US10248581B2 (en) | Guarded memory access in a multi-thread safe system level modeling simulation | |
CN110020300B (zh) | 一种浏览器页面合成方法及终端 | |
US11151314B2 (en) | Extensible grid layout | |
US20150205633A1 (en) | Task management in single-threaded environments | |
US9075666B2 (en) | Deferred execution in a multi-thread safe system level modeling simulation | |
US9201708B2 (en) | Direct memory interface access in a multi-thread safe system level modeling simulation | |
CN108241689A (zh) | 页面资源获取方法、装置和客户端设备 | |
US9582340B2 (en) | File lock | |
US9612734B1 (en) | Random access browser scrolling for large pages | |
CN116910405A (zh) | 页面处理方法、装置、计算机设备和存储介质 | |
CN116701010A (zh) | 一种多线程共享变量的更新方法、系统、装置及介质 | |
KR20160019526A (ko) | 그래픽 동작들 통합 | |
KR102619117B1 (ko) | 전자 장치 및 전자 장치의 동작 방법 | |
US20210271728A1 (en) | Replaying user activity by capturing content and rebuilding the webpage at each web event | |
CN113961298A (zh) | 一种页面切换方法、装置、设备及介质 | |
US11360649B2 (en) | Custom preview interface for search results | |
US10366140B2 (en) | Method for replaying user activity by rebuilding a webpage capturing content at each web event | |
CN114238399A (zh) | 缓存刷新系统、方法、装置、计算机设备和存储介质 | |
CN111638927A (zh) | 一种皮肤切换方法及装置 | |
CN117331625A (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 |