网页的渲染方法、装置、设备及存储介质制造方法及图纸

本公开公开了一种网页的渲染方法、装置、设备及存储介质。获取网页对应的布局程序代码；其中，布局程序代码通过指令式语法和/或声明式语法编写；对布局程序代码进行解析，获得树状组件结构；其中，树状组件结构由至少两种组件构成；根据树状组件结构计算网页的布局信息，并将布局信息添加至树状组件结构上；当触发了对网页的渲染操作时，对添加了布局信息的树状组件结构中的至少两种组件从上至下进行混合渲染。本公开实施例提供的网页的渲染方法，布局程序代码通过指令式语法和/或声明式语法编写，可以降低页面开发的成本，提高页面开发的效率，而且可以实现混合渲染。而且可以实现混合渲染。而且可以实现混合渲染。

【技术实现步骤摘要】
网页的渲染方法、装置、设备及存储介质


[0001]本公开实施例涉及互联网
，尤其涉及一种网页的渲染方法、装置、设备及存储介质。

技术介绍

[0002]随着Web技术的发展和HTML5标准的落地，HTML5开发越来越火热。HTML5开发具有跨平台、开发成本低、迭代快、易动态发布等优点，在移动App开发中占据的比重越来越大。元素作为HTML5的一个重要特性，在移动开发页面展示中，特别是图片处理、动画展示等场合，起了不可或缺的作用。
[0003]相关技术中，网页的渲染还面临着如下问题：采用指令方式实现页面的布局涉及，页面开发成本高且效率低；无法实现2D图形和普通页面元素混合渲染的问题等。

技术实现思路

[0004]本公开实施例提供一种网页的渲染方法、装置、设备及存储介质，可以降低页面开发的成本，提高页面开发的效率，而且可以实现混合渲染。
[0005]第一方面，本公开实施例提供了一种网页的渲染方法，包括：
[0006]获取网页对应的布局程序代码；其中，所述布局程序代码通过指令式语法和/或声明式语法编写；
[0007]对所述布局程序代码进行解析，获得树状组件结构；其中，所述树状组件结构由至少两种组件构成；
[0008]根据所述树状组件结构计算所述网页的布局信息，并将所述布局信息添加至所述树状组件结构上；
[0009]当触发了对所述网页的渲染操作时，对添加了布局信息的所述树状组件结构中的至少两种组件从上至下进行混合渲染。
[0010]第二方面，本公开实施例还提供了一种网页的渲染方法，包括：
[0011]布局程序代码获取模块，用于获取网页对应的布局程序代码；其中，所述布局程序代码通过指令式语法和/或声明式语法编写；
[0012]树状组件结构获取模块，用于对所述布局程序代码进行解析，获得树状组件结构；其中，所述树状组件结构由至少两种组件构成；
[0013]布局信息获取模块，用于根据所述树状组件结构计算所述网页的布局信息，并将所述布局信息添加至所述树状组件结构上；
[0014]渲染模块，用于当触发了对所述网页的渲染操作时，对添加了布局信息的所述树状组件结构中的至少两种组件从上至下进行混合渲染。
[0015]第三方面，本公开实施例还提供了一种电子设备，所述电子设备包括：
[0016]一个或多个处理装置；
[0017]存储装置，用于存储一个或多个程序；
[0018]当所述一个或多个程序被所述一个或多个处理装置执行，使得所述一个或多个处理装置实现如本公开实施例所述的网页的渲染方法。
[0019]第四方面，本公开实施例还提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理装置执行时实现如本公开实施例所述的网页的渲染方法。
[0020]本公开实施例公开了一种网页的渲染方法、装置、设备及存储介质。获取网页对应的布局程序代码；其中，布局程序代码通过指令式语法和/或声明式语法编写；对布局程序代码进行解析，获得树状组件结构；其中，树状组件结构由至少两种组件构成；根据树状组件结构计算网页的布局信息，并将布局信息添加至树状组件结构上；当触发了对网页的渲染操作时，对添加了布局信息的树状组件结构中的至少两种组件从上至下进行混合渲染。本公开实施例提供的网页的渲染方法，布局程序代码通过指令式语法和/或声明式语法编写，可以降低页面开发的成本，提高页面开发的效率，而且可以实现混合渲染。
附图说明
[0021]图1是本公开实施例中的一种网页的渲染方法的流程图；
[0022]图2是本公开实施例中的实现自绘组件的结构示意图；
[0023]图3是本公开实施例中的实现混合渲染的原理图；
[0024]图4是本公开实施例中的一种网页的渲染装置的结构示意图；
[0025]图5是本公开实施例中的一种电子设备的结构示意图。
具体实施方式
[0026]下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。
[0027]应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
[0028]本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
[0029]需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
[0030]需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。
[0031]本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
[0032]图1为本公开实施例提供的一种网页的渲染方法的流程图，本实施例可适用于对网页进行渲染的情况，该方法可以由网页的渲染装置来执行，该装置可由硬件和/或软件组
成，并一般可集成在具有网页的渲染功能的设备中，该设备可以是服务器、移动终端或服务器集群等电子设备。如图1所示，该方法具体包括如下步骤：
[0033]步骤110，获取网页对应的布局程序代码。
[0034]其中，布局程序代码通过指令式语法和/或声明式语法编写。布局程序代码开始页面开发人员根据开发需求编码的程序代码，既可以采用指令式语法(例如pixi.js语法)也可以采用声明式语法，或者两种语法同时使用。本实施例中，可以应用于Canvas网页的渲染，Canvas网页支持声明式语法，且声明式语法具有轻量的特性，因此，采用声明式语法编写布局程序代码来实现Canvas网页的渲染，解决了Canvas网页对于使用方开发者接入成本大的问题，降低了页面开发的空间成本。具体的，可以通过程序调用接口获取网页对应的布局程序代码。
[0035]步骤120，对布局程序代码进行解析，获得树状组件结构。
[0036]其中，树状组件结构由至少两种组件构成，至少两种组件包括：自绘组件、网页组件以及WebGL组件。自绘组件可以是用户通过自绘接口绘制的组件，可以对组件的属性进行自定义设置，其中组件的属性可以包括尺寸、颜色、形状等；网页组件还可以称为web组件，包含各种常见的界面组件，如表格、树、联动下拉框等；WebGL组件本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页的渲染方法，其特征在于，包括：获取网页对应的布局程序代码；其中，所述布局程序代码通过指令式语法和/或声明式语法编写；对所述布局程序代码进行解析，获得树状组件结构；其中，所述树状组件结构由至少两种组件构成；根据所述树状组件结构计算所述网页的布局信息，并将所述布局信息添加至所述树状组件结构上；当触发了对所述网页的渲染操作时，对添加了布局信息的所述树状组件结构中的至少两种组件从上至下进行混合渲染。2.根据权利要求1所述的方法，其特征在于，在根据所述树状组件结构计算所述网页的布局信息之后，还包括：若所述树状组件结构关联了布局中间件，则执行所述布局中间件，获得附加布局信息，并将所述附加布局信息添加至所述树状组件结构上。3.根据权利要求1所述的方法，其特征在于，在将添加了布局信息的树状组件结构保存至内存中之后，还包括：当触发了对所述网页的事件操作时，获取所述事件操作的第一位置信息；基于所述第一位置信息从所述树状组件结构中确定目标组件；控制所述目标组件执行所述事件操作。4.根据权利要求3所述的方法，其特征在于，基于所述第一位置信息从所述树状组件结构中确定目标组件，包括：从上到下遍历所述树状组件结构中的组件，将遍历到组件的位置信息和所述第一位置信息比对，若遍历到的组件的位置信息和所述第一位置信息匹配，则将遍历到的组件确定为目标组件，并停止遍历下一个组件。5.根据权利要求3所述的方法，其特征在于，基于所述第一位置信息从所述树状组件结构中确定目标组件，包括：将所述树状组件结构中各组件的位置信息分别与所述第一位置信息进行比对，将位置信息与所述第一位置信息匹配的组件确定目标组件。6.根据权利要求1所述的方法，其特征在于，所述至少两种组件包括：自绘组件、网页组件以及WebGL组件；对添加了布局信息的所述树状组件结构中的至少两种类型的组件从上至下进行混合渲...

【专利技术属性】
技术研发人员：唐伟豪，张敏，翟娜，熊典，周雪梅，李昳娴，
申请(专利权)人：北京字节跳动网络技术有限公司，
类型：发明
国别省市：