本发明专利技术提供了一种页面的预渲染方法、装置及电子设备，涉及计算机应用的技术领域，该方法包括：获取客户端的目标页面的组件列表；基于组件列表对目标页面进行预渲染，得到每个组件的属性文件；以及，提取每个组件的目标函数，执行目标函数，以将每个组件的属性文件存储到组件对应的数据仓库，使客户端能够基于数据仓库中的属性文件对目标页面进行渲染。本发明专利技术提供的页面的预渲染方法、装置及电子设备，能够使客户端能够基于数据仓库中的属性文件对目标页面进行渲染，以使客户端在渲染目标页面时能够保证首屏有内容进行显示，进而提高了渲染速度，极大地缩短了首页白屏时间，有效提升了用户的体验度。用户的体验度。用户的体验度。
【技术实现步骤摘要】
页面的预渲染方法、装置及电子设备
[0001]本专利技术涉及计算机应用的
，尤其是涉及一种页面的预渲染方法、装置及电子设备。
技术介绍
[0002]微前端是一种类似微服务的架构，微前端可以将微服务的理念应用于浏览器端，即将Web应用由单一的单体应用转变为多个小型前端微组件聚合为一的应用，目前市面上微组件绝大部分只实现了在客户端渲染，因页面初始化和加载的页面组件为并行执行关系，难以做到在服务端的预渲染，并且，客户端在渲染时，需要依赖服务器返回的数据，而服务器返回数据也需要一定的时间，就会导致在客户端渲染页面时由于拿不到服务器返回的数据而显示页面的首屏为白屏，降低了用户的体验度。
技术实现思路
[0003]有鉴于此，本专利技术的目的在于提供一种页面的预渲染方法、装置及电子设备，以缓解上述技术问题。
[0004]第一方面，本专利技术实施例提供了一种页面的预渲染方法，应用于服务端，所述方法包括：获取客户端的目标页面的组件列表，其中，所述组件列表包括所述目标页面的所有组件，以及每个所述组件的排列顺序和嵌套关系，且，每个所述组件预先定义有目标函数，所述目标函数用于提供所述组件的调用接口供所述服务端调用，以及，接收所述服务端传入的属性文件；基于所述组件列表对所述目标页面进行预渲染，得到每个所述组件的属性文件；以及，提取每个所述组件的所述目标函数，执行所述目标函数，以将每个所述组件的属性文件存储到所述组件对应的数据仓库，使客户端能够基于所述数据仓库中的所述属性文件对所述目标页面进行渲染。
[0005]结合第一方面，本专利技术实施例提供了第一方面的第一种可能的实施方式，其中，上述目标函数为asyncData()函数，所述目标函数通过promise对象供所述服务端调用。
[0006]结合第一方面第一种可能的实施方式，本专利技术实施例提供了第一方面的第二种可能的实施方式，其中，上述提取每个所述组件的所述目标函数，执行所述目标函数，以将每个所述组件的属性文件存储到所述组件对应的数据仓库的步骤，包括：提取所述组件列表包括的每个所述组件的排列顺序和嵌套关系；根据所述排列顺序和嵌套关系执行所述目标函数返回的promise对象，以获取每个所述组件的所述属性文件；将所述属性文件存储到所述组件的对应的数据仓库。
[0007]结合第一方面，本专利技术实施例提供了第一方面的第三种可能的实施方式，其中，上述获取客户端的目标页面的组件列表的步骤，包括：响应所述客户端发送的目标页面加载请求，基于所述目标页面加载请求获取所述目标页面的组件列表；或者，按照预设的时间间隔获取所述客户端的目标页面的组件列表。
[0008]第二方面，本专利技术实施例还提供一种页面的预渲染方法，应用于客户端，所述方法
包括：响应目标页面的加载请求，从数据仓库中调用所述目标页面的组件列表中每个组件的属性文件；基于所述属性文件对所述目标页面进行渲染。
[0009]结合第二方面，本专利技术实施例提供了第二方面的第一种可能的实施方式，其中，上述方法还包括：根据所述加载请求，在所述客户端执行渲染操作，得到所述客户端的渲染数据；判断所述客户端的渲染数据与所述属性文件对应的渲染数据是否一致；如果否，使用所述客户端的渲染数据对所述目标页面进行渲染。
[0010]第三方面，本专利技术实施例还提供一种页面的预渲染装置，应用于服务端，所述装置包括：获取模块，用于获取客户端的目标页面的组件列表，其中，所述组件列表包括所述目标页面的所有组件，以及每个所述组件的排列顺序和嵌套关系，且，每个所述组件预先定义有目标函数，所述目标函数用于提供所述组件的调用接口供所述服务端调用，以及，接收所述服务端传入的属性文件；预渲染模块，用于基于所述组件列表对所述目标页面进行预渲染，得到每个所述组件的属性文件；以及，执行模块，用于提取每个所述组件的所述目标函数，执行所述目标函数，以将每个所述组件的属性文件存储到所述组件对应的数据仓库，使客户端能够基于所述数据仓库中的所述属性文件对所述目标页面进行渲染。
[0011]第四方面，本专利技术实施例还提供一种页面的预渲染装置，应用于客户端，所述装置包括：调用模块，用于响应目标页面的加载请求，从数据仓库中调用所述目标页面的组件列表中每个组件的属性文件；渲染模块，用于基于所述属性文件对所述目标页面进行渲染。
[0012]第五方面，本专利技术实施例还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面和第二方面所述的方法的步骤。
[0013]第六方面，本专利技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述第一方面和第二方面所述的方法的步骤。
[0014]本专利技术实施例带来了以下有益效果：
[0015]本专利技术实施例提供的页面的预渲染方法、装置及电子设备，能够获取客户端的目标页面的组件列表，组件列表包括目标页面的所有组件，以及每个组件的排列顺序和嵌套关系，且，每个组件预先定义有目标函数，目标函数用于提供组件的调用接口供服务端调用，以及，接收服务端传入的属性文件；基于组件列表对目标页面进行预渲染，得到每个组件的属性文件；以及，提取每个组件的目标函数，执行目标函数，以将每个组件的属性文件存储到组件对应的数据仓库，使客户端能够基于数据仓库中的属性文件对目标页面进行渲染，以使客户端在渲染目标页面时能够保证首屏有内容进行显示，进而提高了渲染速度，极大地缩短了首页白屏时间，有效提升了用户的体验度。
[0016]本专利技术的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本专利技术而了解。本专利技术的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。
[0017]为使本专利技术的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
[0018]为了更清楚地说明本专利技术具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施方式，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0019]图1为本专利技术实施例提供的一种页面的预渲染方法的流程图；
[0020]图2为本专利技术实施例提供的另一种页面的预渲染方法的流程图；
[0021]图3为本专利技术实施例提供的一种页面的预渲染装置的结构示意图；
[0022]图4为本专利技术实施例提供的另一种页面的预渲染装置的结构示意图；
[0023]图5为本专利技术实施例提供的一种电子设备的结构示意图。
具体实施方式
[0024]为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合附图对本专利技术的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种页面的预渲染方法，其特征在于，应用于服务端，所述方法包括：获取客户端的目标页面的组件列表，其中，所述组件列表包括所述目标页面的所有组件，以及每个所述组件的排列顺序和嵌套关系，且，每个所述组件预先定义有目标函数，所述目标函数用于提供所述组件的调用接口供所述服务端调用，以及，接收所述服务端传入的属性文件；基于所述组件列表对所述目标页面进行预渲染，得到每个所述组件的属性文件；以及，提取每个所述组件的所述目标函数，执行所述目标函数，以将每个所述组件的属性文件存储到所述组件对应的数据仓库，使客户端能够基于所述数据仓库中的所述属性文件对所述目标页面进行渲染。2.根据权利要求1所述的方法，其特征在于，所述目标函数为asyncData()函数，所述目标函数通过promise对象供所述服务端调用。3.根据权利要求2所述的方法，其特征在于，提取每个所述组件的所述目标函数，执行所述目标函数，以将每个所述组件的属性文件存储到所述组件对应的数据仓库的步骤，包括：提取所述组件列表包括的每个所述组件的排列顺序和嵌套关系；根据所述排列顺序和嵌套关系执行所述目标函数返回的promise对象，以获取每个所述组件的所述属性文件；将所述属性文件存储到所述组件的对应的数据仓库。4.根据权利要求1所述的方法，其特征在于，获取客户端的目标页面的组件列表的步骤，包括：响应所述客户端发送的目标页面加载请求，基于所述目标页面加载请求获取所述目标页面的组件列表；或者，按照预设的时间间隔获取所述客户端的目标页面的组件列表。5.一种页面的预渲染方法，其特征在于，应用于客户端，所述方法包括：响应目标页面的加载请求，从数据仓库中调用所述目标页面的组件列表中每个组件的属性文件；基于所述属性文件对所述目标页面进行渲染。6...
【专利技术属性】
技术研发人员：吴景致，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。