[发明专利]一种获取组件高度的方法、页面渲染方法及相关装置

说明书

本申请提供了一种获取组件高度的方法、页面渲染方法及相关装置，其中，该方法包括：统计超文本字符串中用于声明高度属性的各类预设字符的数量；根据各类所述预设字符的数量及每一类所述预设字符的预设高度值，确定所述超文本字符串对应的组件在页面中的占用高度。本申请实施例通过直接从超文本字符串中统计用于声明高度属性的各类预设字符的数量，并基于各类预设字符的数量及每一类预设字符的预设高度值，确定超文本字符串对应的组件在页面中的占用高度。无需渲染即可获取组件在页面中的占用高度，避免出现阻塞问题，提高用户的使用体验。

技术领域

本申请涉及计算机技术领域，具体而言，涉及一种获取组件高度的方法、页面渲染方法及相关装置。

背景技术

目前，在进行页面绘制前需要预先获取各(list item)列表项的高度。进行页面绘制时，根据各list item的高度，只绘制屏幕能容纳的list item，从而改善对海量listitem同时绘制造成的阻塞问题。

然而，列表项所属的业务不同时，高度各异。常规的获取列表项高度的方式为：先基于所有list item构建渲染树，然后利用DOM API获取各list item的高度。但是，实际执行过程中，基于大量list item构建渲染树的过程中也会出现阻塞，影响用户体验。

发明内容

有鉴于此，本申请实施例的目的在于提供一种获取组件高度的方法、页面渲染方法及相关装置，能够通过超文本字符串中声明高度属性的各类预设字符，获取对应组件的高度信息，避免出现阻塞问题，提高用户体验。

根据本申请的一个方面，提供一种获取组件高度的方法可以包括以下操作中的一个或多个：

统计超文本字符串中用于声明高度属性的各类预设字符的数量；

根据各类所述预设字符的数量及每一类所述预设字符的预设高度值，确定所述超文本字符串对应的组件在页面中的占用高度。

在一些实施例中，为了缩短高度获取时长，提高组件高度获取效率，上述统计超文本字符串中用于声明高度属性的各类预设字符的数量的步骤，包括：

利用处理器遍历所述超文本字符串，分别统计每一类所述预设字符的数量。

在一些实施例中，所述方法还包括：

获取React组件；

利用指定的React转换函数，将所述React组件转换为所述超文本字符串。

在一些实施例中，所述React转换函数包括renderToStaticMarkup函数。

在一些实施例中，所述React转换函数包括renderToString函数。

在一些实施例中，所述根据各类所述预设字符的数量及每一类所述预设字符的预设高度值，确定所述超文本字符串对应的组件在页面中的占用高度的步骤之前，所述方法还包括：

基于预设的样式契约，获取每一类所述预设字符的预设高度值。

根据本申请的另一个方面，提供一种页面渲染方法可以包括前述获取组件高度的方法的步骤以及：

依据页面尺寸信息及确定的每一所述组件的占用高度，从所述组件中确定待渲染组件，以进行页面渲染。

在一些实施例中，所述依据页面尺寸信息及确定的每一所述组件的占用高度，从所述组件中确定待渲染组件的步骤包括：

依据页面尺寸信息及每一所述组件的占用高度，结合所述组件的排列顺序，动态地从所述组件中确定待渲染组件。