CN111783007B - 一种显示渲染方法、装置、电子设备及存储介质 - Google Patents

一种显示渲染方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN111783007B
CN111783007B CN202010765345.1A CN202010765345A CN111783007B CN 111783007 B CN111783007 B CN 111783007B CN 202010765345 A CN202010765345 A CN 202010765345A CN 111783007 B CN111783007 B CN 111783007B
Authority
CN
China
Prior art keywords
display area
display
rendering
buffer
area
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202010765345.1A
Other languages
English (en)
Other versions
CN111783007A (zh
Inventor
黄显梁
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Maipu Communication Technology Co Ltd
Original Assignee
Maipu Communication Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Maipu Communication Technology Co Ltd filed Critical Maipu Communication Technology Co Ltd
Priority to CN202010765345.1A priority Critical patent/CN111783007B/zh
Publication of CN111783007A publication Critical patent/CN111783007A/zh
Application granted granted Critical
Publication of CN111783007B publication Critical patent/CN111783007B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供一种显示渲染方法、装置、电子设备及存储介质,该方法包括:接收针对显示对象的输入操作,获得输入操作对应的偏移量;根据偏移量确定显示对象的激活显示区;根据激活显示区以及预设的缓冲显示区的大小确定出缓冲显示区的待渲染部分;渲染显示对象的激活显示区;渲染缓冲显示区的待渲染部分。在上述的实现过程中,激活显示区和缓冲显示区的待渲染部分均是预先确定后再进行渲染的,在渲染预先确定的激活显示区之后,直接将预先确定的缓冲显示区的待渲染部分进行渲染,从而有效地改善了输入操作过快时出现短暂空白闪屏的问题,同时,由于对缓冲显示区进行了渲染,在随后的输入操作过程中,可以缩短激活显示区的渲染时间。

Description

一种显示渲染方法、装置、电子设备及存储介质
技术领域
本申请涉及计算机数据处理和图像处理的技术领域,具体而言,涉及一种显示渲染方法、装置、电子设备及存储介质。
背景技术
浏览器是访问互联网的通用软件工具,常用的浏览器包括:Microsoft Edge浏览器、Google Chrome浏览器、Mozilla Firefox浏览器、Opera浏览器、Safari浏览器和Firefox浏览器等等,浏览器使用的引擎例如:Firefox Driver引擎、Internet ExplorerDriver引擎和Chrome Driver引擎等。
在具体的实践过程中发现,在浏览器对显示对象进行渲染的时候,存在输入操作过快时出现短暂空白闪屏的问题。
发明内容
本申请实施例的目的在于提供一种显示渲染方法、装置、电子设备及存储介质,用于改善输入操作过快时出现短暂空白闪屏的问题。
本申请实施例提供了一种显示渲染方法,包括:接收针对显示对象的输入操作,获得输入操作对应的偏移量;根据偏移量确定显示对象的激活显示区;根据激活显示区以及预设的缓冲显示区的大小确定出缓冲显示区的待渲染部分;渲染显示对象的激活显示区;渲染缓冲显示区的待渲染部分。在上述的实现过程中,激活显示区和缓冲显示区的待渲染部分均是预先确定后再进行渲染的,在根据输入操作对应的偏移量渲染显示对象的激活显示区之后,直接将预先确定的缓冲显示区的待渲染部分进行渲染,从而有效地改善了输入操作过快时出现短暂空白闪屏的问题,同时,由于在接收到一次输入操作后对缓冲显示区进行了渲染,在随后下一次的输入操作过程中,可以缩短激活显示区的渲染时间。
可选地,在本申请实施例中,根据激活显示区以及预设的缓冲显示区的大小确定出缓冲显示区的待渲染部分,包括:根据显示对象的显示单元尺寸、激活显示区的大小以及预设的缓冲显示区的大小,确定缓冲显示区的待渲染部分对应的区域。在上述的实现过程中,根据显示对象的显示单元尺寸来预先确定缓冲显示区的待渲染部分对应的区域,由于在接收到一次输入操作后对缓冲显示区对应的区域进行了渲染,在随后下一次的输入操作过程中,可以缩短激活显示区的渲染时间。
可选地,在本申请实施例中,在根据激活显示区以及预设的缓冲显示区的大小确定出缓冲显示区的待渲染部分之后,在渲染显示对象的激活显示区之前,方法还包括:根据激活显示区以及缓冲显示区确定空白填充区,渲染空白填充区。在上述的实现过程中,根据激活显示区以及缓冲显示区确定空白填充区,并渲染空白填充区,避免了缺乏过渡状态处理的情况,此处的过渡状态例如:当输入操作为拖动或者滚动到预设位置时,显示对象的顶部数据或者底部数据被部分遮挡的状态,通过设置空白填充区可以有效地使显示对象渲染的视觉效果更加平滑优雅。
可选地,在本申请实施例中,预设的缓冲显示区的大小根据显示对象不同进行调整。
本申请实施例还提供了一种显示渲染装置,包括:输入操作接收模块,用于接收针对显示对象的输入操作,获得输入操作对应的偏移量;显示对象确定模块,用于根据偏移量确定显示对象的激活显示区;渲染部分确定模块,用于根据激活显示区以及预设的缓冲显示区的大小确定出缓冲显示区的待渲染部分;显示对象渲染模块,用于渲染显示对象的激活显示区;缓冲部分渲染模块,用于渲染缓冲显示区的待渲染部分。
可选地,在本申请实施例中,渲染部分确定模块具体用于:根据显示对象的显示单元尺寸、激活显示区的大小以及预设的缓冲显示区的大小,确定缓冲显示区的待渲染部分对应的区域。
可选地,在本申请实施例中,显示渲染装置还包括:空白填充区渲染模块,用于根据激活显示区以及缓冲显示区确定空白填充区,渲染空白填充区。
本申请实施例还提供了一种电子设备,包括:处理器和存储器,存储器用于存储处理器可执行的机器可读指令,机器可读指令被处理器执行时执行如上面描述的方法。
可选地,在本申请实施例中,电子设备还包括通信接口;通信接口用于接收机器可读指令,并机器可读指令存储至存储器中。
本申请实施例还提供了一种存储介质,该存储介质上存储有计算机程序,该计算机程序被处理器运行时执行如上面描述的方法。
附图说明
为了更清楚地说明本申请实施例的技术方案,下面将对本申请实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本申请的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。
图1示出的本申请实施例提供的显示渲染方法的流程示意图;
图2示出的本申请实施例提供的获得输入操作对应的偏移量的示意图;
图3示出的本申请实施例提供的确定显示对象的激活显示区的过程示意图;
图4示出的本申请实施例提供的滚动场景中输入操作触发显示渲染的示意图;
图5示出的本申请实施例提供的滑动场景中输入操作触发显示渲染的示意图;
图6示出的本申请实施例提供的显示渲染装置的结构示意图;
图7示出的本申请实施例提供的电子设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整的描述。
在介绍本申请实施例提供的显示渲染方法之前,先介绍本申请实施例所涉及的一些概念:
可扩展标记语言(eXtensible Markup Language,XML)是指标准通用标记语言的子集,同时,XML也是一种用于标记电子文件使其具有结构性的标记语言。
文档对象模型(document object model,DOM),是指描述一个XML文档解析结果的树型结构的内部数据模型;一个XML文档包括根节点、内部节点、叶子节点、备注节点等。
超文本标记语言(Hyper Text Markup Language,HTML),是一种标准通用标记语言,包括一系列标签.HTML通过标签将网络上的文档格式统一,使分散的因特网(Internet)资源连接为一个逻辑整体,HTML通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。HTML5是HTML最新的修订版本,由万维网联盟完成标准制定。
输入操作,是指鼠标针对显示对象的上下滚动操作,或者鼠标针对显示对象的拖动操作,或者针对显示对象的滚动条的竖向拖动或/和横向的拖动操作,或者键盘针对显示对象的上下左右按键操作。当然在具体的实践过程中,输入操作还可以是指将竖向拖动和横向拖动同时进行的操作,具体例如向右下方向拖动。
canvas是HTML5中用于定义图形的标签,例如定义图表和图像,也可以使用脚本语言(例如JavaScript语言)来绘制图形,例如可以使用canvas画一个红色矩形、彩色矩形和几个彩色的文字等。
需要说明的是,本申请实施例提供的显示渲染方法可以被电子设备执行,这里的电子设备是指具有执行计算机程序功能的终端设备或者服务器,终端设备例如:智能手机、个人电脑(personal computer,PC)、平板电脑、个人数字助理(personal digitalassistant,PDA)、移动上网设备(mobile Internet device,MID)、网络交换机或网络路由器等。
在介绍本申请实施例提供的显示渲染方法之前,先介绍该显示渲染方法适用的应用场景,这里的应用场景包括但不限于:在不适合对大量数据进行分页的情况下,可以使用该显示渲染方法渲染需要渲染的数据,这里的需要渲染的数据具体例如:各种表格数据、图片图像数据和地图数据等等,以及使用该显示渲染方法优化显示效果,或者在渲染不适合分页的大量数据时,使用该显示渲染方法改善浏览器在渲染数据时出现的短暂空白或者短暂闪屏的现象。
请参见图1示出的本申请实施例提供的显示渲染方法的流程示意图;该显示渲染方法的总体思路是,激活显示区和缓冲显示区的待渲染部分均是预先确定后再进行渲染的,在根据输入操作对应的偏移量渲染显示对象的激活显示区之后,直接将预先确定的缓冲显示区的待渲染部分进行渲染,改善了输入操作过快时出现短暂空白闪屏的问题;上述的显示渲染方法可以包括:
步骤S110:接收针对显示对象的输入操作,获得输入操作对应的偏移量。
显示对象,是指需要在显示屏上显示的对象,这里的显示对象包括但不限于:数据表格、地图、图像数据、矩阵区域和图像矩阵等等,本实施例所称的显示对象的部分可以是显示对象的局部区域,这里的局部区域例如:圆形区域、椭圆形区域、多边形区域和其它形状的区域,这里的其它形状例如可以是由至少一个弧线段和至少一个直线段组成的形状,也可以是由多个曲率不相同的弧线段组成的形状,这里的多边形区域例如可以是矩形的矩阵区域。
请参见图2示出的本申请实施例提供的获得输入操作对应的偏移量的示意图;图2呈现的是显示对象在输入操作过程中的状态,输入操作之前,显示对象已经被渲染了其中的第一行至第三行数据,即这里的第一行至第三行数据包括:矩阵数据A1、矩阵数据A2、矩阵数据A3、矩阵数据B1、矩阵数据B2和矩阵数据B3等等,其中,矩阵区域的已经渲染的矩阵数据为:矩阵数据A1、矩阵数据A2、矩阵数据A3、矩阵数据B1、矩阵数据B2和矩阵数据B3;其中,矩阵区域用于以矩阵单元的方式填充数据,这里的矩阵单元即可以理解为容纳具体矩阵数据的容器。
上述步骤S110中的实施方式例如:接收用户触屏面板、鼠标或键盘的输入操作,获得输入操作对应的偏移量;输入操作是指用户通过输入设备执行的输入相关操作,输入设备可以是鼠标或键盘,输入操作的对象即显示对象包括但不限于:带滚动条(scroll bar)的表格组件或嵌入表格数据的子框架(iframe)标签等等;上述的输入相关操作包括:鼠标针对显示对象的上下滚动操作,或者鼠标针对显示对象的竖向拖动或/和横向拖动操作,或者针对滚动条的拖动操作,或者键盘针对显示对象的上下左右按键操作等等;可以理解的是,在触屏面板上获得输入操作对应的偏移量的实施原理与鼠标类似,因此,这里仅以鼠标为例进行说明,偏移量可以是由鼠标的不同操作产生的,具体例如:竖向拖动和横向拖动,以及竖向拖动和横向拖动同时进行的右下拖动操作。
在步骤S110之后,执行步骤S120:根据偏移量确定显示对象的激活显示区。
激活显示区,又被称为激活区(Active Area),是指当前显示对象被输入操作激活时刷新显示数据的区域,激活显示区的尺寸大小或者与屏幕的相对位置可以随着输入操作的变化而变化;这里描述激活显示区随着不同操作变化而变化的情况,以矩阵区域为例,不同操作包括:竖向拖动和横向拖动;在具体的实践过程中,也可以将竖向拖动和横向拖动同时进行,具体例如向右下拖动;为了便于说明和理解,下面均以竖向拖动为例进行说明。
上述步骤S120的实施方式包括:输入操作产生的偏移量导致激活显示区产生变化,具体地,在拖动操作前的激活显示区可以理解为图中包括矩阵数据的区域,在拖动操作后激活显示区可以理解为图中的虚线和实线所围成的并集区域,即“拖动前激活显示区为小矩形,拖动后为大矩形”;换句话说,可以根据偏移量和原来的激活显示区域,确定出输入操作后的激活显示区的大小和位置。当然在实施过程中,这里的激活显示区域的大小和位置也可以不产生变化,而是激活显示区中的数据产生变化。
请参见图3示出的本申请实施例提供的确定显示对象的激活显示区的过程示意图;为了便于理解和说明,这里以激活显示区用于显示屏的相对位置产生变化为例进行详细地说明,具体例如:输入操作对应的偏移量与激活显示区中的数据变化有预设比例关系,这里的预设比例可以根据具体情况进行设置,例如偏移量为一行数据的尺寸,则数据变化为滑动一页,当然也可以是滑动半页,或者是四分之一页等等。这里以滑动一页为例,在输入操作之前,激活显示区显示的数据为第一行至第三行数据,在输入操作之后,激活显示区显示的数据为第四行至第六行数据,那么输入操作产生数据变化后的激活显示区就是确定出的显示对象的激活显示区,即这里的第四行至第六行数据就可以理解为显示对象的激活显示区。
可以理解的是,本申请实施例中的激活显示区、空白填充区、矩阵区域和矩阵单元均可以是以文档对象模型DOM节点的形式存储在存储器中,这里的DOM节点例如可以是HTML或者HTML5中的节点标签,这些节点标签包括但不限于:div和span等等标签;其中,这里的HTML5是HTML最新的修订版本,由万维网联盟完成标准制定。
在步骤S120之后,执行步骤S130:根据激活显示区以及预设的缓冲显示区的大小确定出缓冲显示区的待渲染部分。
如图3所示,上述的预设的缓冲显示区的大小可以理解为预设的缓冲显示区的尺寸,这里的预设的缓冲显示区的大小可以根据具体情况进行设置,也就是说,预设的缓冲显示区的大小根据显示对象不同进行调整;具体例如:可以将预设的缓冲显示区的大小设置为一行数据尺寸或者两行数据尺寸等等;为了便于理解和说明,这里以缓冲显示区的大小设置为一行数据尺寸为例进行说明,若输入操作后的激活显示区显示的数据为第四行至第六行数据,那么第三行数据和第七行数据对应区域即为缓冲显示区的待渲染部分;也就是说,缓冲显示区可以是围绕激活显示区而设置的,当用户输入操作过快时,由于缓冲显示区的待渲染部分已经预先被确定,在渲染预先确定的激活显示区之后,直接将预先确定的缓冲显示区的待渲染部分进行渲染,从而有效地改善了输入操作过快时出现短暂空白闪屏的问题,同时,由于在接收到一次输入操作后对缓冲显示区进行了渲染,在随后对该同一显示对象的下一次的输入操作过程中,可以缩短激活显示区的渲染时间。
上述步骤S130的实施方式包括:
第一种实施方式,根据显示对象的显示单元尺寸、激活显示区的大小以及预设的缓冲显示区的大小,确定缓冲显示区的待渲染部分对应的区域,这里的显示对象的显示单元尺寸可以根据具体情况进行设置,显示对象的显示单元尺寸例如可以设置为10、20或者30个像素,也可以设置为1厘米或者2厘米等等;此处的第一种实施方式具体例如:为了便于理解和说明,假设显示对象的显示单元尺寸设置为一行数据的尺寸,激活显示区的大小为三行数据的尺寸,此处的三行数据包括第四行至第六行数据;若缓冲显示区的大小设置为一行数据的尺寸,那么确定出缓冲显示区的待渲染部分可以为第三行数据的区域,也可以是第七行数据的区域;若缓冲显示区的大小设置为两行数据的尺寸,那么确定出缓冲显示区的待渲染部分可以为第二行至第三行数据的区域,也可以是第七行至第八行数据的区域。
第二种实施方式,将矩阵区域表格行号或者表格列号一起渲染;具体地,上述步骤S130的实施方式可以包括如下步骤:
步骤S131:根据显示单元尺寸确定显示对象的待渲染部分对应的至少一个索引号,索引号表征显示对象的待渲染部分的行号和/或列号。
上述步骤S131的实施方式例如:根据矩阵单元的尺寸可以确定出矩阵区域的待渲染部分对应的至少一个索引号;其中,索引号表征矩阵区域的待渲染部分的行号和/或列号,即索引号包括:行号、列号、行号和列号三种情况,这三种情况分别例如:在鼠标针对激活显示区的竖向拖动时,这里的索引号可以是行号;在鼠标针对激活显示区的横向拖动时,这里的索引号可以是列号;在鼠标针对激活显示区的斜方向拖动时,例如向右下方拖动时,这里的索引号包括列号和行号;这里以鼠标针对激活显示区的竖向拖动为例进行说明,上述的至少一个索引号包括:第4行和第5行,矩阵区域的待渲染部分对应的矩阵数据包括:矩阵数据A4、矩阵数据A5、矩阵数据B4和矩阵数据B5。上面的步骤可以理解为,通过输入操作对应的偏移量来计算需要渲染的索引号的数量和索引号对应的矩阵数据,具体例如:通过鼠标滚动的偏移量高度来计算表格需要渲染的行号和行号对应的数据条目。
步骤S132:将至少一个索引号和至少一个索引号对应的显示数据填充至显示对象的待渲染部分。
可以理解的是,在一些可能的实现方式中,在步骤S132以及下面的步骤中,使用显示数据之前,还需要先获得显示数据,在下面的步骤中就不再赘述;获得显示数据的实施方式例如:获得显示数据,显示数据用于在激活显示区中渲染显示;这里获得矩阵数据的方式具体例如:获得多个矩阵数据,这里的多个矩阵数据包括:矩阵数据A1、矩阵数据A2、矩阵数据A3、矩阵数据A4、矩阵数据A5、矩阵数据B1、矩阵数据B2、矩阵数据B3、矩阵数据B4和矩阵数据B5等等,在一些可能的实现方式中,这里的矩阵数据也可以是海量DOM矩阵,这里的海量DOM矩阵是指大量的DOM节点,而这些DOM节点共同构成一个显示屏无法显示其全部的矩阵。获得矩阵数据的步骤可以在使用矩阵数据之前的任何时候执行都是可以使用该矩阵数据的,也就是说,在步骤S132之前的任何时候执行,该矩阵数据都是可以使用的。
上述步骤S132中的实施方式例如:将第4行的索引号、第4行的索引号对应的矩阵数据、第5行的索引号和第5行的索引号对应的矩阵数据以矩阵单元的方式填充至矩阵区域的待渲染部分;其中,第4行的索引号对应的矩阵数据包括:矩阵数据A4和矩阵数据B4,第5行的索引号对应的矩阵数据包括:矩阵数据A5和矩阵数据B5。
在步骤S130之后,执行步骤S140:渲染显示对象的激活显示区。
当然,在渲染显示对象的激活显示区之前,还应该先渲染空白填充区,那么在步骤S140之前,还包括:
步骤S141:根据激活显示区以及缓冲显示区确定空白填充区,渲染空白填充区。
空白填充区(Fill Area),是为了在矩阵数据显示时,使得矩阵数据显示得更加美观而设置的空白区域。
上述步骤S141的实施方式包括:在缓冲显示区的相邻位置设置空白填充区,预先设置的空白填充区进行渲染,空白填充区与缓冲显示区可以是相邻的;具体例如:可以在激活显示区的周围设置缓冲显示区,还可以在缓冲显示区或者激活显示区的周围设置空白填充区;并将预先设置的空白填充区进行渲染,空白填充区与缓冲显示区是相邻的。
在上述的实现过程中,通过预先设置空白填充区,将预先设置的空白填充区进行渲染,空白填充区与缓冲显示区是相邻的;从而有效地改善了缺乏对过渡状态导致在渲染的过程中视觉效果不够平滑优雅的问题,这里的缺乏对过渡状态具体例如:拖动或者滚动到某个位置,顶部的数据条目和底部的数据条目部分被遮挡的情况,即第一条数据和最后一条数据均被遮挡一半的情况。通过设置空白填充区和缓冲显示区,与激活显示区配合渲染,改善了顶部与底部条目部分被遮挡、拖动或者滚动等输入操作过快来不及渲染而出现短暂空白的问题,能够达到性能优异的同时视觉效果平滑优雅的效果。
在步骤S130之后,执行步骤S150:渲染缓冲显示区的待渲染部分。
其中,上述的步骤S140和步骤S150的执行顺序包括:可以步骤S140先执行且步骤S150后执行,也可以步骤S140和步骤S150同时执行,也就是说,步骤S140和步骤S150并行执行或者并发执行,并行执行是指通过多个中央处理器或者多个处理器核分别处理步骤S140和步骤S150,并发执行是指中央处理器通过时间分片的方式执行步骤S140和步骤S150。在一些可能的实现方式中,可以视实际情况对缓冲显示区的待渲染部分做简化渲染,具体例如:只渲染显示单元外层DOM及其背景色,不渲染显示单元的内部DOM,这样达到兼顾性能与视觉效果的技术效果。
上述步骤S140和步骤S150的实施方式例如:渲染显示对象的激活显示区外层DOM和外层DOM的背景色,以及内部DOM和内部DOM的数据;渲染缓冲显示区的待渲染部分的内部DOM和内部DOM的数据。
请参见图4示出的本申请实施例提供的滚动场景中输入操作触发显示渲染的示意图;为了便于理解和说明,这里以激活显示区中的数据产生变化为例进行详细地说明,图中的预设的缓冲显示区的大小设置为三行数据的尺寸,图中矩阵区域的第一部分是指在输入操作之前的被激活显示区显示的部分,或者是在输入操作之后不在激活显示区内显示,且在缓冲显示区已渲染的部分;图中矩阵区域的第二部分是指在输入操作之后被激活显示区显示的部分;图中矩阵区域的第三部分是指在输入操作之后被缓冲显示区预渲染的部分。
这里需要说明的是,上述步骤S134的执行是由于另一个输入操作触发的,这里的输入操作包括但不限于:鼠标滚轮的滚动操作、鼠标与鼠标垫的拖动或滑动操作、键盘上的按键(包括上下左右按键,也可以自定义按键,例如;将b按键定义为向上滑动页按键,将空格按键定义为下滑动页按键)被摁时的滑动页动作等,这里的操作对象包括但不限于:HTML中的特定标签来显示表格数据、矩阵数据或者地图等等,这里的特定标签可以是div标签或者span标签等。
请参见图5示出的本申请实施例提供的滑动场景中输入操作触发显示渲染的示意图;为了便于理解和说明,这里以激活显示区中的数据产生变化为例进行详细地说明,图中的预设的缓冲显示区的大小设置为三行数据的尺寸,图中矩阵区域的第一部分是指在输入操作之前的被激活显示区显示的部分,或者是在输入操作之后不在激活显示区内渲染,且在缓冲显示区已渲染的部分;图中矩阵区域的第二部分是指在输入操作之后被激活显示区显示的部分;图中矩阵区域的第三部分是指在输入操作之后被缓冲显示区预渲染的部分。
当然,在一些可能的实现方式中,上述的显示渲染方法还可以应用于滑动场景,滑动场景可以理解为用手或者触控笔滑动触控手机的场景,在滑动场景中,根据当前可见区域以及输入操作带来的偏移量,动态计算需要渲染的DOM节点元素,大幅地降低不必要的渲染开销,有效地节约了从输入操作到渲染完成的时间,从而提高了前端浏览器的显示性能。
请参见图6示出的本申请实施例提供的显示渲染装置的结构示意图;本申请实施例提供了一种显示渲染装置200,包括:输入操作接收模块210,用于接收针对显示对象的输入操作,获得输入操作对应的偏移量;
显示对象确定模块220,用于根据偏移量确定显示对象的激活显示区;
渲染部分确定模块230,用于根据激活显示区以及预设的缓冲显示区的大小确定出缓冲显示区的待渲染部分;
显示对象渲染模块240,用于渲染显示对象的激活显示区;
缓冲部分渲染模块250,用于渲染缓冲显示区的待渲染部分。
可选地,在本申请实施例中,渲染部分确定模块,具体用于:根据显示对象的显示单元尺寸、激活显示区的大小以及预设的缓冲显示区的大小,确定缓冲显示区的待渲染部分对应的区域。
可选地,在本申请实施例中,还包括:
空白填充区渲染模块,用于根据激活显示区以及缓冲显示区确定空白填充区,渲染空白填充区。
可选地,在本申请实施例中,上述的预设的缓冲显示区的大小根据显示对象不同进行调整。
应理解的是,该装置与上述的显示渲染方法实施例对应,能够执行上述方法实施例涉及的各个步骤,该装置具体的功能可以参见上文中的描述,为避免重复,此处适当省略详细描述。该装置包括至少一个能以软件或固件(firmware)的形式存储于存储器中或固化在装置的操作系统(operating system,OS)中的软件功能模块。
请参见图7示出的本申请实施例提供的电子设备的结构示意图。本申请实施例提供的一种电子设备300,包括:处理器310和存储器320,存储器320存储有处理器310可执行的机器可读指令,机器可读指令被处理器310执行时执行如上的方法。
可以理解的是,上述的机器可读指令可以是电子设备300预先存储在存储器320中的,也可以是电子设备300从其他设备获取的,其他设备可以是服务器,具体例如:电子设备300远程访问服务器,并从服务器上获取机器可读指令之后,加载机器可读指令至存储器中,由电子设备300的处理器310运行。
本申请实施例还提供了一种存储介质330,该存储介质330上存储有计算机程序,该计算机程序被处理器310运行时执行如上的方法。
其中,存储介质330可以由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(Static Random Access Memory,简称SRAM),电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory,简称EEPROM),可擦除可编程只读存储器(Erasable Programmable Read Only Memory,简称EPROM),可编程只读存储器(Programmable Red-Only Memory,简称PROM),只读存储器(Read-Only Memory,简称ROM),磁存储器,快闪存储器,磁盘或光盘。
本申请实施例所提供的几个实施例中,应该理解到,所揭露的装置和方法,也可以通过其他的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,附图中的流程图和框图显示了根据本申请实施例的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分,模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现方式中,方框中所标注的功能也可以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
另外,在本申请实施例各个实施例中的各功能模块可以集成在一起形成一个独立的部分,也可以是各个模块单独存在,也可以两个或两个以上模块集成形成一个独立的部分。
在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。
以上的描述,仅为本申请实施例的可选实施方式,但本申请实施例的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本申请实施例的保护范围之内。

Claims (8)

1.一种显示渲染方法,其特征在于,包括:
接收针对显示对象的输入操作,获得所述输入操作对应的偏移量;
根据所述偏移量确定所述显示对象的激活显示区;
根据所述激活显示区以及预设的缓冲显示区的大小确定出所述缓冲显示区的待渲染部分;
渲染所述显示对象的激活显示区;
渲染所述缓冲显示区的待渲染部分;
其中,所述根据所述激活显示区以及预设的缓冲显示区的大小确定出所述缓冲显示区的待渲染部分,包括:根据所述显示对象的显示单元尺寸、所述激活显示区的大小以及预设的缓冲显示区的大小,确定所述缓冲显示区的待渲染部分对应的区域。
2.根据权利要求1所述的方法,其特征在于,在所述根据所述激活显示区以及预设的缓冲显示区的大小确定出所述缓冲显示区的待渲染部分之后,在所述渲染所述显示对象的激活显示区之前,所述方法还包括:
根据所述激活显示区以及所述缓冲显示区确定空白填充区,渲染所述空白填充区。
3.根据权利要求1或2所述的方法,其特征在于,所述预设的缓冲显示区的大小根据显示对象不同进行调整。
4.一种显示渲染装置,其特征在于,包括:
输入操作接收模块,用于接收针对显示对象的输入操作,获得所述输入操作对应的偏移量;
显示对象确定模块,用于根据所述偏移量确定所述显示对象的激活显示区;
渲染部分确定模块,用于根据所述激活显示区以及预设的缓冲显示区的大小确定出所述缓冲显示区的待渲染部分;
显示对象渲染模块,用于渲染所述显示对象的激活显示区;
缓冲部分渲染模块,用于渲染所述缓冲显示区的待渲染部分;
其中,所述渲染部分确定模块具体用于:根据所述显示对象的显示单元尺寸、所述激活显示区的大小以及预设的缓冲显示区的大小,确定所述缓冲显示区的待渲染部分对应的区域。
5.根据权利要求4所述的装置,其特征在于,还包括:
空白填充区渲染模块,用于根据所述激活显示区以及所述缓冲显示区确定空白填充区,渲染所述空白填充区。
6.根据权利要求4或5所述的装置,其特征在于,所述预设的缓冲显示区的大小根据显示对象不同进行调整。
7.一种电子设备,其特征在于,包括:处理器和存储器,所述存储器存储有所述处理器可执行的机器可读指令,所述机器可读指令被所述处理器执行时执行如权利要求1至3任一项所述的方法。
8.一种存储介质,其特征在于,该存储介质上存储有计算机程序,该计算机程序被处理器运行时执行如权利要求1至3任一项所述的方法。
CN202010765345.1A 2020-07-31 2020-07-31 一种显示渲染方法、装置、电子设备及存储介质 Active CN111783007B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010765345.1A CN111783007B (zh) 2020-07-31 2020-07-31 一种显示渲染方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010765345.1A CN111783007B (zh) 2020-07-31 2020-07-31 一种显示渲染方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN111783007A CN111783007A (zh) 2020-10-16
CN111783007B true CN111783007B (zh) 2022-05-24

Family

ID=72766695

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010765345.1A Active CN111783007B (zh) 2020-07-31 2020-07-31 一种显示渲染方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN111783007B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113742612A (zh) * 2021-01-18 2021-12-03 北京京东拓先科技有限公司 一种数据渲染方法、装置、电子设备及存储介质
CN114579031B (zh) * 2022-03-08 2023-11-21 中国农业银行股份有限公司 滑动操作的响应方法、装置、服务器及存储介质
CN116880740B (zh) * 2023-09-06 2024-01-02 深圳硬之城信息技术有限公司 表格滚动的渲染方法、设备及存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102708585A (zh) * 2012-05-09 2012-10-03 北京像素软件科技股份有限公司 一种渲染模型轮廓边缘的方法
CN103019557A (zh) * 2012-11-26 2013-04-03 北京奇虎科技有限公司 页面切换方法和装置
CN103268628A (zh) * 2012-05-31 2013-08-28 微软公司 虚拟表面渲染
CN103577104A (zh) * 2013-09-27 2014-02-12 苏州佳世达电通有限公司 一种虚拟键盘的显示方法、控制装置及触摸设备
CN103988164A (zh) * 2011-12-09 2014-08-13 索尼电脑娱乐公司 图像处理设备和图像处理方法
CN105989166A (zh) * 2015-03-04 2016-10-05 阿里巴巴集团控股有限公司 瀑布流式显示对象的方法、装置、系统及电子设备
CN111191580A (zh) * 2019-12-27 2020-05-22 支付宝(杭州)信息技术有限公司 合成渲染方法、装置、电子设备及介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP3761085B2 (ja) * 2001-11-27 2006-03-29 株式会社ソニー・コンピュータエンタテインメント 画像処理装置及びその構成部品、レンダリング処理方法
US10504272B2 (en) * 2017-06-13 2019-12-10 Intel Corporation Apparatus and method for optimizing time/space warp for virtual reality using dynamic tiling and dirty tile marking
GB201716768D0 (en) * 2017-10-13 2017-11-29 Nokia Technologies Oy An apparatus a method and a computer program for coding and rendering volumetric video
CN110641478B (zh) * 2019-10-15 2021-02-19 英博超算(南京)科技有限公司 汽车域控制器显示方法、装置、汽车以及可读存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103988164A (zh) * 2011-12-09 2014-08-13 索尼电脑娱乐公司 图像处理设备和图像处理方法
CN102708585A (zh) * 2012-05-09 2012-10-03 北京像素软件科技股份有限公司 一种渲染模型轮廓边缘的方法
CN103268628A (zh) * 2012-05-31 2013-08-28 微软公司 虚拟表面渲染
CN103019557A (zh) * 2012-11-26 2013-04-03 北京奇虎科技有限公司 页面切换方法和装置
CN103577104A (zh) * 2013-09-27 2014-02-12 苏州佳世达电通有限公司 一种虚拟键盘的显示方法、控制装置及触摸设备
CN105989166A (zh) * 2015-03-04 2016-10-05 阿里巴巴集团控股有限公司 瀑布流式显示对象的方法、装置、系统及电子设备
CN111191580A (zh) * 2019-12-27 2020-05-22 支付宝(杭州)信息技术有限公司 合成渲染方法、装置、电子设备及介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
渲染器与Web服务器耦合实现远程体渲染的交互优化;高瞻等;《中国图象图形学报》;20170316;第385-394页 *

Also Published As

Publication number Publication date
CN111783007A (zh) 2020-10-16

Similar Documents

Publication Publication Date Title
CN111783007B (zh) 一种显示渲染方法、装置、电子设备及存储介质
US9043698B2 (en) Method for users to create and edit web page layouts
US8453051B1 (en) Dynamic display dependent markup language interface
KR20150079867A (ko) Html5-프로토콜 기반 웹페이지 표시 방법 및 장치
CN104820589B (zh) 一种动态适配网页的方法及其装置
CN109254818B (zh) 针对浏览器不同分辨率的像素级定位方法和装置
US20150169520A1 (en) Techniques for programmatic magnification of visible content elements of markup language documents
KR102574306B1 (ko) 동적 조판
CN111291533B (zh) 待显示句段的显示方法、装置、计算机设备和存储介质
US20120236004A1 (en) Information output apparatus and information output method and recording medium
CN109933751B (zh) 图文绘制方法、装置、计算机可读存储介质和计算机设备
CN110633437A (zh) 一种多行省略显示的方法及装置
US20240143898A1 (en) Content typesetting method and apparatus, computer device, and storage medium
CN110599899A (zh) 标签显示方法、装置、电子设备以及存储介质
CN105205077A (zh) 页面排版方法、装置及系统
KR102087274B1 (ko) 개체를 렌더링하는 웹 전자 문서 편집 장치 및 이의 동작 방법
US8788965B2 (en) Method and device for displaying data by adjusting the size of controls
CN105389308B (zh) 网页的显示处理方法及装置
CN115268904A (zh) 一种用户界面设计文件生成方法、装置、设备及介质
CN111475248A (zh) 一种rtl处理方法、系统、存储介质及电子设备
CN111143749A (zh) 一种网页展示方法、装置、设备及存储介质
CN103309878A (zh) 用于网页显示中的排版的方法和装置
US20160342570A1 (en) Document presentation qualified by conditions evaluated on rendering
US11847405B1 (en) Encoding hyperlink data in a printed document
CN110020318B (zh) 关键词与扩展阅读行为的处理方法、浏览器及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant