页面渲染方法、装置、电子设备及可读存储介质制造方法及图纸

本公开提供一种页面渲染方法、装置、电子设备及可读存储介质，涉及互联网技术，尤其涉及页面渲染领域。具体实现方案包括：获取目标页面的页面数据，页面数据包括目标页面的主应用代码以及组件数据，组件数据涉及至少一个组件。获取组件数据中涉及的组件对应的组件代码。运行主应用代码，调用组件数据和组件代码，注册并渲染组件数据中涉及的组件，得到目标页面。可以避免目标页面中存在体积庞大的组件代码，使得页面加载时更快，性能更好。性能更好。性能更好。

【技术实现步骤摘要】
页面渲染方法、装置、电子设备及可读存储介质


[0001]本公开涉及互联网技术，尤其涉及页面渲染领域。

技术介绍

[0002]目前，在生成并渲染页面时，通常是将工程中开发的所有组件的逻辑都编译打包进一个脚本语言(JavaScript，js)文件中。渲染阶段根据预设的逻辑规则加载对应的组件，渲染每个组件进而得到页面。

技术实现思路

[0003]本公开提供了一种页面渲染方法、装置、电子设备及可读存储介质，可以避免网页中存在体积庞大的js文件，使得网页加载时更快，性能更好。
[0004]根据本公开的第一方面，提供了一种页面渲染方法，该方法包括：获取目标页面的页面数据，页面数据包括目标页面的主应用代码以及组件数据，组件数据涉及至少一个组件。获取组件数据中涉及的组件对应的组件代码。运行主应用代码，调用组件数据和组件代码，注册并渲染组件数据中涉及的组件，得到目标页面。
[0005]根据本公开的第二方面，提供了一种页面渲染装置，该装置包括：
[0006]获取模块，用于获取目标页面的页面数据，页面数据包括目标页面的主应用代码以及组件数据，组件数据涉及至少一个组件。获取模块，还用于获取组件数据中涉及的组件对应的组件代码。渲染模块，用于运行主应用代码，调用组件数据和组件代码，注册并渲染组件数据中涉及的组件，得到目标页面。
[0007]根据本公开的第三方面，提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行如第一方面提供的方法。
[0008]根据本公开的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，计算机指令用于使计算机执行根据第一方面提供的方法。
[0009]根据本公开的第五方面，提供了一种计算机程序产品，包括计算机程序，计算机程序在被处理器执行时实现根据第一方面提供的方法。
[0010]本公开通过获取目标页面的页面数据，页面数据包括目标页面的主应用代码以及组件数据，组件数据涉及至少一个组件。获取组件数据中涉及的组件对应的组件代码。运行主应用代码，调用组件数据和组件代码注册并渲染组件数据中涉及的组件，得到目标页面。由于本公开中只获取组件数据中涉及的组件对应的组件代码，所以获取到的组件代码总体积较小，可以避免目标页面中存在体积庞大的组件代码，使得页面加载时更快，性能更好。
[0011]应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。
附图说明
[0012]附图用于更好地理解本方案，不构成对本公开的限定。其中：
[0013]图1为本公开实施例提供的页面渲染方法的流程示意图；
[0014]图2为本公开实施例提供的页面渲染方法中S110的流程示意图；
[0015]图3为本公开实施例提供的一种接受用户操作的界面示意图；
[0016]图4为本公开实施例提供的页面渲染方法中S130的流程示意图；
[0017]图5为本公开实施例提供的页面渲染装置的组成示意图；
[0018]图6示出了可以用来实施本公开的实施例的示例电子设备400的示意性框图。
具体实施方式
[0019]以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
[0020]落地页也称：着陆页、引导页。一般来说，落地页会通过用户点击或搜索引擎跳转等方式展示给用户，其中往往会显示和所点击或搜索结果相关的扩展内容。落地页可以基于组件拼接生成。用户可以对落地页中的组件进行编辑以生成个性化的落地页。其中，组件可以包括多种类型，如图片组件、文字组件、表单组件、悬浮组件等。
[0021]目前，对于编辑好的落地页，在编译生成超文本标记语言(Hyper Text Markup Language，html)文件时，会将所有可能用到的组件写在一个js文件中，然后根据html文件中的特定规则确定用到的组件代码，然后再进行渲染。
[0022]但是，将所有组件都写在一个js中，会导致js文件体积庞大，引起网页加载变慢，性能变差。
[0023]对此，本申请提供了一种页面渲染方法，该方法包括：获取目标页面的页面数据，页面数据包括目标页面的主应用代码以及组件数据，组件数据涉及至少一个组件。获取组件数据中涉及的组件对应的组件代码。运行主应用代码，调用组件数据和组件代码注册并渲染组件数据中涉及的组件，得到目标页面。
[0024]由于本公开中只获取组件数据中涉及的组件对应的组件代码，所以获取到的组件代码总体积较小，可以避免目标页面中存在体积庞大的组件代码，使得页面加载时更快，性能更好。
[0025]一些实施方式中，本公开提供的页面渲染方法可以应用于电子设备，如个人计算机、笔记本电脑、智能手机、平板电脑等电子设备。这些设备的操作系统可以是安卓(Android)系统，窗口系统(Windows)，苹果移动操作系统(iOS)，苹果操作系统(Mac OS)或者鸿蒙系统(Harmony OS)、林纳斯系统(Linux)等，本公开对此不作限制。
[0026]图1为本公开实施例提供的页面渲染方法的流程示意图。该方法可以应用于上述电子设备，如图1所示，页面渲染方法包括：
[0027]S110、获取目标页面的页面数据。
[0028]其中，页面数据包括目标页面的主应用代码以及组件数据，组件数据涉及至少一个组件。
[0029]一些实施方式中，页面数据可以是预先编译好并存储在数据库中的html文件。当执行页面渲染方法的电子设备接收到用户操作，指示根据网址或网际互连协议(Internet Protocol，IP)地址访问目标页面时，可以根据网址或IP地址下载并获取目标页面的html文件，即获取到目标页面的页面数据。
[0030]S120、获取组件数据中涉及的组件对应的组件代码。
[0031]一些实施方式中，组件数据中可能会包括多个组件，每个组件对应一个组件代码(即该组件对应的js文件)。当组件代码被执行渲染后，可以在目标页面中生成对应的组件。
[0032]一些实施方式中，组件数据中包括组件的组件内容和组件代码的链接，页面数据中包括主应用代码的链接。获取目标页面的主应用代码，可以根据主应用代码的链接下载主应用代码。同样的，获取组件数据中涉及的组件对应的组件代码，可以根据组件代码的链接下载主应用代码。
[0033]S130、运行主应用代码，调用组件数据和组件代码注册并渲染组件数据中涉及的组件，得到目标页面。
[0034]一些实施方式中，主应用代码本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法，其特征在于，所述方法包括：获取目标页面的页面数据，所述页面数据包括所述目标页面的主应用代码以及组件数据，所述组件数据涉及至少一个组件；获取所述组件数据中涉及的组件对应的组件代码；运行所述主应用代码，调用所述组件数据和所述组件代码，注册并渲染所述组件数据中涉及的组件，得到所述目标页面。2.根据权利要求1所述的方法，其特征在于，所述组件数据中包括所述组件的组件内容和所述组件代码的链接，所述页面数据中包括所述主应用代码的链接；获取所述目标页面的主应用代码，包括：根据所述主应用代码的链接下载所述主应用代码；所述获取所述组件数据中涉及的组件对应的组件代码，包括:根据所述组件代码的链接下载所述主应用代码。3.根据权利要求1或2所述的方法，其特征在于，在所述获取所述目标页面的页面数据之前，还包括：将所述主应用和所述组件代码上传至内容分发网络，生成所述主应用代码的链接和所述组件代码的链接。4.根据权利要求1
‑
3任一项所述的方法，其特征在于，在所述获取目标页面中的组件数据之前，还包括：响应用户操作，确定所述目标页面中涉及的组件、每个所述组件的组件内容、组件代码的链接以及主应用的链接，所述用户操作用于编辑所述目标页面中的组件；编译所述每个所述组件的组件内容和组件代码的链接，得到目标页面的所述组件数据；编译所述主应用的链接、所述组件数据，得到所述目标页面的页面数据。5.根据权利要求4所述的方法，其特征在于，所述编译所述主应用的链接、所述组件数据，得到所述目标页面的页面数据，包括：解析所述组件数据，获取所述组件数据中每个组件对应的所述组件代码的链接；编译所述主应用的链接、所述组件数据以及所述获取到的所述组件数据中每个组件对应的所述组件代码的链接，得到所述目标页面的页面数据，其中，在所述页面数据中一个所述组件代码的链接对应一个或多个组件。6.根据权利要求5所述的方法，其特征在于，在得到所述目标页面的页面数据之后，还包括：将所述页面数据存储至远程字典服务和数据库中。7.根据权利要求4
‑
6任一项所述的方法，其特征在于，所述运行所述主应用代码，调用所述组件数据和所述组件代码注册并渲染所述组件数据中涉及的组件，得到所述目标页面，包括：通过所述主应用解析取所述组件数据，得到所述目标页面中包含的组件以及每个所述组件对应的组件内容；通过所述主应用在预设的软件框架中挂载所述组件代码，并根据每个所述组件对应的组件内容在所述预设的软件框架中注册每个所述组件；
通过所述主应用渲染注册的所述组件，生成每个所述组件对应的文档对象模型；通过所述主应用在所述每个所述组件对应的文档对象模型中，渲染所述组件的界面，得到所述目标页面。8.根据权利要求7所述的方法，其特征在于，所述组件内容包括所述组件的位置信息；所述通过所述主应用渲染注册的所述组件，生成每个所述组件对应的文档对象模型，包括：根据所述组件的位置信息，确定生成的所述文档对象模型在所述目标页面中的位置。9.一种页面渲染装置，其特征在于，所述装置包括：获取模块，用于获取目标页面的页面数据，所述页面数据包括所述目标页面的主应用代码以及组件数据，所述组件数据涉及至少一个组件；所述获...

【专利技术属性】
技术研发人员：黄诗铭，马海娜，
申请(专利权)人：北京百度网讯科技有限公司，
类型：发明
国别省市：