[发明专利]页面的渲染方法、装置、电子设备及存储介质

说明书

本申请实施例公开一种页面的渲染方法、装置、电子设备及存储介质。页面的渲染方法，包括：接收页面的缩放指令，页面包括多个区域；根据缩放指令，判断多个区域中每一目标区域对应的渲染指令数是否大于预设值，目标区域为包括待渲染的页面元素的区域；如果目标区域对应的渲染指令数大于预设值，则细分目标区域，直至细分的目标区域对应的渲染指令数小于或等于预设值；根据目标区域对应的渲染指令数，确定每一帧页面待渲染的页面元素，并根据每一帧页面待渲染的页面元素依次渲染每一帧页面。本申请的实施例，能够降低每一帧的渲染耗时，使用户在缩放设计页面时帧率保持稳定，消除卡顿并避免掉帧，由此，显著提升了用户的操作体验。

技术领域

本申请实施例涉及页面的渲染技术领域，具体而言，涉及一种页面的渲染方法、装置、电子设备及存储介质。

背景技术

用户界面UI(User Interface)设计软件的核心功能是将设计师的构想渲染到屏幕上以呈现给用户。而渲染性能是用户体验的核心指标，其中，帧率是用来衡量渲染性能的关键指标，通常来说，帧率越高越流畅，体验越好。缩放是设计师的高频操作，由于UI设计软件的缩放倍率跨度很大(如：0.01-256)，一般来说不能通过3D渲染中修改摄像机位置的方式实现画面的缩放。因此，缩放意味着屏幕中的所有内容都要渲染一遍。显然，不论采用何种底层渲染接口，其渲染能力都是有限的，当设计稿越庞大，渲染一帧所需要的时间可能越长，导致在帧率下降到一定程度之后，观感将会变得卡顿。

相关技术中，一些设计软件采用缓存+视口分区的策略进行渲染。起主要原理是把屏幕按照固定的大小切分为多个区域，缩放过程中先用一个固定清晰度的缓存底图放大或缩小到当前缩放比，随后的每一帧按顺序渲染固定数量的区域，这样，可以通过控制每一帧绘制内容数量的方式压缩每一帧的耗时来提升帧率，降低用户感受到的卡顿，然而，存在以下技术缺陷：

随着视口的缩放的越来越小，单个区域中的图形数量会越来越多，进而，造成渲染时的掉帧现象。此外，如果视口内的图形分布不均匀，或者说扎堆出现在某几个区域，那么缩放过程中掉帧现象通常也会出现，进而影响用户的使用体验。

发明内容

针对上述现有技术中存在的问题，本申请实施例提供了一种页面的渲染方法、装置、电子设备及存储介质，能够降低每一帧的渲染耗时，使用户在缩放设计页面时帧率保持稳定，消除卡顿并避免掉帧，由此，显著提升了用户的操作体验。

第一方面，本申请实施例提供了一种页面的渲染方法，包括：

接收页面的缩放指令，其中，所述页面包括多个区域，所述多个区域的大小随所述缩放指令的改变而变化；

根据所述缩放指令，判断所述多个区域中每一目标区域对应的渲染指令数是否大于预设值，其中，所述目标区域为包括待渲染的页面元素的区域；

如果所述目标区域对应的渲染指令数大于所述预设值，则细分所述目标区域，直至细分的目标区域对应的渲染指令数小于或等于所述预设值；

根据所述目标区域对应的渲染指令数，确定每一帧页面待渲染的页面元素，并根据每一帧页面待渲染的页面元素依次渲染每一帧页面。

进一步地，所述根据所述缩放指令，判断所述多个区域中每一目标区域对应的渲染指令数是否大于预设值，包括：

获得所述多个区域中任意一个目标区域中包括的页面元素的数量；

根据任意一个目标区域中包括的页面元素的数量，得到所述任意一个目标区域对应的渲染指令数；

比较所述任意一个目标区域对应的渲染指令数和所述预设值，并根据比较结果确定所述任意一个目标区域对应的渲染指令数是否大于所述预设值。