CN115203603A - 表格页面渲染方法、装置、电子装置和存储介质 - Google Patents
表格页面渲染方法、装置、电子装置和存储介质 Download PDFInfo
- Publication number
- CN115203603A CN115203603A CN202210747769.4A CN202210747769A CN115203603A CN 115203603 A CN115203603 A CN 115203603A CN 202210747769 A CN202210747769 A CN 202210747769A CN 115203603 A CN115203603 A CN 115203603A
- Authority
- CN
- China
- Prior art keywords
- page
- rendering
- data
- virtual list
- list 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation 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)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请涉及一种表格页面渲染方法、装置、电子装置和存储介质,其中,该表格页面渲染方法包括:获取表格参数、可视区域以及虚拟列表区域,根据所述表格参数,获取第一渲染数据以及生成表格总范围;根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面;检测所述虚拟列表区域的数据是否全部有值;若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。通过本申请,解决了页面滚动渲染慢的问题,实现表格数据的按需加载和分片渲染,极大的提高了浏览器对大型表格数据的渲染性能,对类似需求场景下的开发工作具有很好的普适性。
Description
技术领域
本申请涉及互联网技术领域,特别是涉及表格页面渲染方法、装置、电子装置和存储介质。
背景技术
随着互联网行业的迅猛发展,web前端技术也处于高速发展阶段。Web项目的数量和规模在不断扩大,项目的复杂度在不断提升。
Web前端发展的初期阶段,前端开发主要是实现后台数据的简单排版,以及数据展示。这种方式主要通过后台来实现数据的维护和表格参数的整体刷新,加之初期受浏览器性能限制,页面资源消耗很大。
web前端发展到2.0阶段后,出现了Ajax通信与页面局部更新机制,有限缓解了整体页面刷新导致的性能瓶颈。这种方案的主流实现方案为模板引擎技术,将数据通过模板引擎渲染到视图,再将旧视图进行替换,从而实现页面的局部更新。但是随着项目复杂度越来越高,加载的数据量越来越大,会引发潜在的性能问题:如果海量数据要加载渲染,导致页面渲染的DOM节点也很多,这样视图在更新时,要对大量的DOM节点进行替换操作,而DOM节点的操作是浏览器的性能瓶颈,所以造成的性能开销很大,容易造成页面白屏或卡顿现象。
通过表格对表格参数进行展示,是很多web项目中常见的应用场景。而表格中的行和列都对应一个DOM节点,如果不做任何优化,直接渲染大量的DOM节点,即使框架本身用了虚拟DOM,但是在首次渲染的时候,仍然生成了大量的真实DOM,进入页面后,需要渲染这批节点,就会花费很长的时间,从而出现白屏现象。此外,如果在页面触发了滚动时间,则会使得内存使用率增加,出现页面卡顿的操作感受。如果同时渲染大批量的DOM节点,仍会造成以下几个问题:1.浏览器失帧。因为渲染较慢,所以无法维持浏览器的帧率,用户主观感受为严重的卡顿。2.页面失去响应或者其他时间无法及时被触发。
针对相关技术中存在页面滚动渲染慢的问题,目前还没有提出有效的解决方案。
发明内容
在本实施例中提供了一种表格页面渲染方法、装置、电子装置和存储介质,以解决相关技术中页面滚动渲染慢的问题。
第一个方面,在本实施例中提供了一种表格页面渲染方法,包括:
获取表格参数、可视区域以及虚拟列表区域,其中,所述表格页面显示在屏幕上的区域为可视区域,所述虚拟列表区域包含所述可视区域;
根据所述表格参数,获取第一渲染数据以及生成表格总范围;
根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面;
检测所述虚拟列表区域的数据是否全部有值;
若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。
在其中的一些实施例中,所述获取表格参数、可视区域以及虚拟列表区域包括:
获取所述可视区域的位置参数;
根据所述位置参数,更新所述虚拟列表区域。
在其中的一些实施例中,所述根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面包括:
接收客户端发送的刷新页面请求;
根据所述刷新页面请求,更新所述虚拟列表区域的表格内容。
在其中的一些实施例中,所述接收客户端发送的刷新页面请求之前包括:
其中,所述变量新操作请求中包括变量的输入信息;
获取变量新操作请求,判断所述变量新操作请求的输入信息是否合法;
若所述变量新操作请求合法,则提示操作成功;
若所述变量新操作请求不合法,则提示操作不成功。
在其中的一些实施例中,所述根据所述刷新页面请求,更新所述表格页面包括:
接收预设时间间隔中的所有刷新页面请求;
根据最后一次的刷新页面请求,更新所述表格页面。
在其中的一些实施例中,所述根据所述刷新页面请求,更新所述表格页面包括:
接收所述刷新页面请求;
检测接收该刷新页面请求后,在之后的预设刷新时间段中未接收到新的刷新页面请求,则根据该刷新页面请求,更新所述表格页面。
在其中的一些实施例中,所述根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面包括:
获取滚动操作指令;
根据所述滚动操作指令,调整所述可视区域中显示的内容。
第二个方面,在本实施例中提供了一种表格页面渲染装置,其特征在于,包括:
参数获取模块,用于获取表格参数、可视区域以及虚拟列表区域,其中,所述表格页面显示在屏幕上的区域为可视区域,所述虚拟列表区域包含所述可视区域;
表格生成模块,用于根据所述表格参数,获取第一渲染数据以及生成表格总范围;
页面渲染模块,用于根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面;
数据检测模块,用于检测所述虚拟列表区域的数据是否全部有值;
二次渲染模块,用于若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。
第三个方面,在本实施例中提供了一种电子装置,包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述第一个方面所述的表格页面渲染方法。
第四个方面,在本实施例中提供了一种存储介质,其上存储有计算机程序,该程序被处理器执行时实现上述第一个方面所述的表格页面渲染方法。
与相关技术相比,在本实施例中提供的表格页面渲染方法,通过虚拟表格结合防抖动机制,解决了页面滚动渲染慢的问题,实现表格数据的按需加载和分片渲染,极大的提高了浏览器对大型表格数据的渲染性能,对类似需求场景下的开发工作具有很好的普适性。
本申请的一个或多个实施例的细节在以下附图和描述中提出,以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
此处所说明的附图用来提供对本申请的进一步理解,构成本申请的一部分,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是本实施例的表格页面渲染方法的终端的硬件结构框图;
图2是本实施例的表格页面渲染方法的流程图;
图3是本实施例的另一种表格页面渲染方法的流程图;
图4是本实施例的表格页面渲染装置的结构框图。
具体实施方式
为更清楚地理解本申请的目的、技术方案和优点,下面结合附图和实施例,对本申请进行了描述和说明。
除另作定义外,本申请所涉及的技术术语或者科学术语应具有本申请所属技术领域具备一般技能的人所理解的一般含义。在本申请中的“一”、“一个”、“一种”、“该”、“这些”等类似的词并不表示数量上的限制,它们可以是单数或者复数。在本申请中所涉及的术语“包括”、“包含”、“具有”及其任何变体,其目的是涵盖不排他的包含;例如,包含一系列步骤或模块(单元)的过程、方法和系统、产品或设备并未限定于列出的步骤或模块(单元),而可包括未列出的步骤或模块(单元),或者可包括这些过程、方法、产品或设备固有的其他步骤或模块(单元)。在本申请中所涉及的“连接”、“相连”、“耦接”等类似的词语并不限定于物理的或机械连接,而可以包括电气连接,无论是直接连接还是间接连接。在本申请中所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系,表示可以存在三种关系,例如,“A和/或B”可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。通常情况下,字符“/”表示前后关联的对象是一种“或”的关系。在本申请中所涉及的术语“第一”、“第二”、“第三”等,只是对相似对象进行区分,并不代表针对对象的特定排序。
在本实施例中提供的方法实施例可以在终端、计算机或者类似的运算装置中执行。比如在终端上运行,图1是本实施例的表格页面渲染方法的终端的硬件结构框图。如图1所示,终端可以包括一个或多个(图1中仅示出一个)处理器102和用于存储数据的存储器104,其中,处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置。上述终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解,图1所示的结构仅为示意,其并不对上述终端的结构造成限制。例如,终端还可包括比图1中所示更多或者更少的组件,或者具有与图1所示出的不同配置。
存储器104可用于存储计算机程序,例如,应用软件的软件程序以及模块,如在本实施例中的表格页面渲染方法对应的计算机程序,处理器102通过运行存储在存储器104内的计算机程序,从而执行各种功能应用以及数据处理,即实现上述的方法。存储器104可包括高速随机存储器,还可包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器104可进一步包括相对于处理器102远程设置的存储器,这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
传输设备106用于经由一个网络接收或者发送数据。上述的网络包括终端的通信供应商提供的无线网络。在一个实例中,传输设备106包括一个网络适配器(NetworkInterface Controller,简称为NIC),其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中,传输设备106可以为射频(Radio Frequency,简称为RF)模块,其用于通过无线方式与互联网进行通讯。
在本实施例中提供了一种表格页面渲染方法,图2是本实施例的表格页面渲染方法的流程图,如图2所示,该流程包括如下步骤:
步骤S201,获取表格参数、可视区域以及虚拟列表区域。
其中,所述表格页面显示在屏幕上的区域为可视区域,所述虚拟列表区域包含所述可视区域。
具体地,获取表格参数,通过表格参数确定可滚动区域,在所述可滚动区域中划分出可视区域和虚拟列表区域,所述可视区域可以纵向或者横向的在可滚动区域中进行移动。更具体地,可以通过获取客户端发出的滚动操作指令将页面移动,从而调整所述可视区域中显示的内容。
其中,所述虚拟列表是对传统长列表的一种优化方案。在前端开发中,会碰到一些不能使用分页方式来加载列表数据的业务形态,我们称这种列表叫做长列表。虚拟列表是按需显示思路的一种实现,即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。
简而言之,虚拟列表指的就是可视区域渲染的列表。其中,有三个概念需要进行说明:
滚动容器元素:滚动容器元素是window对象,可以通过布局的方式,在某个页面中任意指定一个或者多个滚动容器元素。只要某个元素能在内部产生横向或者纵向的滚动,那这个元素就是滚动容器元素。
可滚动区域:滚动容器元素的内部内容区域。假设有100条数据,每个列表项的高度是50,那么可滚动区域的高度就是100*50。可滚动区域当前的具体高度值一般可以通过滚动容器元素的scrollHeight属性获取。用户可以通过滚动来改变表格页面在可视区域的显示部分。
可视区域:滚动容器元素的视觉可见的区域。如果容器元素是window对象,可视区域就是浏览器的视口大小(即视觉视口);如果容器元素是某个div元素,其高度是300,有纵向滚动条可以滚动,那么视觉可见的区域就是可视区域。
进一步地,所述获取表格参数、可视区域以及虚拟列表区域包括:获取所述可视区域的位置参数;根据所述位置参数,更新所述虚拟列表区域。
具体地,获取所述可视区域的位置参数,确定所述可视区域的区域边界,按预设的边界增加值对该区域边界进行扩展,根据扩展后的区域更新所述虚拟列表区域。
步骤S202,根据所述表格参数,获取第一渲染数据以及生成表格总范围。
具体地,进入页面后首先会获取表格参数,并获取第一渲染数据,根据表格总范围生成等长的表格。
步骤S203,根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面。
在一个实施例中,可视区域可显示100条数据,进入页面后,获取表格前300条数据,将300条数据放入所述虚拟列表区域的页面进行渲染,生成表格页面。所述虚拟列表区域为可视区域显示范围外的100条数据,可以理解,所述虚拟列表区域较之可视区域的前后左右的滚动方向多渲染100条数据,当然根据表格参数的不同,对数量以及方向进行调整。
进一步地,所述根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面包括:接收客户端发送的刷新页面请求;根据所述刷新页面请求,更新所述虚拟列表区域的表格内容。
具体地,当用户操作表格页面进行滚动,调整所述可视区域中的显示内容,客户端则发出刷新页面请求。根据所述刷新页面请求,对所述虚拟列表区域的表格内容进行更新。
更具体地,所述根据所述刷新页面请求,更新所述表格页面包括:接收预设时间间隔中的所有刷新页面请求;根据最后一次的刷新页面请求,更新所述表格页面。
在一个实施例中,服务器预设有时间间隔,在该时间间隔中只完成一次表格页面的渲染,通过接收该预设的时间间隔中所有的刷新页面请求,并识别出最后一次接收到的刷新页面请求,根据该刷新页面请求中所对应的虚拟列表区域的范围,更新所述表格页面。
更进一步地,所述根据所述刷新页面请求,更新所述表格页面包括:接收所述刷新页面请求;检测接收该刷新页面请求后,在之后的预设刷新时间段中未接收到新的刷新页面请求,则根据该刷新页面请求,更新所述表格页面。
在另一个实施例中,服务器预设有刷新时间段,接收到刷新页面请求后。判断在后续的刷新时间段中是否有新的刷新页面请求;若有新的刷新页面请求,则重置刷新时间段,重新进行判断。若没有新的刷新页面请求,则根据该刷新页面请求中所对应的虚拟列表区域的范围,更新所述表格页面。
在还有一个实施例中,所述接收客户端发送的刷新页面请求之前包括:获取变量新操作请求,判断所述变量新操作请求的输入信息是否合法;若所述变量新操作请求合法,则提示操作成功;若所述变量新操作请求不合法,则提示操作不成功。
其中,所述变量新操作请求中包括变量的输入信息。
具体地,获取变量新操作请求,判断所述变量新操作请求是否合法。若所述变量新操作请求中的输入信息能够添加至表格页面中,则该变量新操作请求合法,提示操作成功;若所述变量新操作请求中的输入信息不能够添加至表格页面中,则该变量新操作请求不合法,提示操作不成功。
步骤S204,检测所述虚拟列表区域的数据是否全部有值。
步骤S205,若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。
具体地,在更新所述虚拟列表区域的数据时,先检测所述虚拟列表区域的数据是否全部有值,若所述虚拟列表区域的数据全部有值,则不对表格页面进行更新;若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。通过检测检测所述虚拟列表区域的数据,防止对表格页面进行重复渲染,减少性能浪费。
通过上述步骤,采用虚拟表格结合防抖动机制,解决了页面滚动渲染慢的问题,实现表格数据的按需加载和分片渲染,极大的提高了浏览器对大型表格数据的渲染性能,对类似需求场景下的开发工作具有很好的普适性。
在本实施例中还提供了一种表格页面渲染方法。图3是本实施例的另一种表格页面渲染方法的流程图,如图3所示,该流程包括如下步骤:
步骤1,获取当前页面数据。
具体地,获取表格参数、可视区域以及虚拟列表区域。
步骤2,获取响应数据。
具体地,根据表格参数,生成等长的表格页面。在一个实施例中,所述表格参数为表格总长度,根据表格总长度,生成对应的表格页面。
步骤3,变量新操作请求。
具体地,获取变量新操作请求,判断所述变量新操作请求是否合法。
步骤4,输入不合法。
步骤5,提示操作不成功。
具体地,若所述变量新操作请求中的输入信息能够添加至表格页面中,则该变量新操作请求合法。
步骤6,输入合法。
步骤7,提示操作成功。
具体地,若所述变量新操作请求中的输入信息不能够添加至表格页面中,则该变量新操作请求不合法,提示操作不成功。
步骤8,发起刷新页面请求。
步骤9,获取响应数据。
具体地,获取表格前300条数据,将300条数据放入所述虚拟列表区域的页面进行渲染,生成表格页面。
步骤10,加载制定索引值数据。
步骤11,获取响应数据。
具体地,在更新所述虚拟列表区域的数据时,先检测所述虚拟列表区域的300条数据是否全部有值,若所述虚拟列表区域的300条数据全部有值,则不对表格页面进行更新;若所述虚拟列表区域的300条数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。
通过以上步骤,本方案在大型表格数据的实现中,利用按需加载的设计原理,极大地缩短了页面数据的请求时间。通过分片渲染的方法将数据进行逻辑分页,有效提高了可视区域的页面数据渲染速度,并结合防抖动机制,过滤无效请求。通过实验分析在通信时间和页面渲染时间方面均有较明显的技术优势。
需要说明的是,在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
在本实施例中还提供了一种表格页面渲染装置,该装置用于实现上述实施例及优选实施方式,已经进行过说明的不再赘述。以下所使用的术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管在以下实施例中所描述的装置较佳地以软件来实现,但是硬件,或者软件和硬件的组合的实现也是可能并被构想的。
图4是本实施例的表格页面渲染装置的结构框图,如图4所示,该装置包括:参数获取模块410、表格生成模块420、页面渲染模块430、数据检测模块440以及二次渲染模块450。
所述参数获取模块410用于获取表格参数、可视区域以及虚拟列表区域。
所述表格生成模块420用于根据所述表格参数,获取第一渲染数据以及生成表格总范围。
所述页面渲染模块430用于根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面。
所述数据检测模块440用于检测所述虚拟列表区域的数据是否全部有值。
所述二次渲染模块450用于若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。
所述参数获取模块410还用于获取所述可视区域的位置参数;
根据所述位置参数,更新所述虚拟列表区域。
所述页面渲染模块430还用于接收客户端发送的刷新页面请求;
根据所述刷新页面请求,更新所述虚拟列表区域的表格内容。
所述页面渲染模块430还用于获取变量新操作请求,判断所述变量新操作请求的输入信息是否合法;若所述变量新操作请求合法,则提示操作成功;若所述变量新操作请求不合法,则提示操作不成功。
所述页面渲染模块430还用于接收预设时间间隔中的所有刷新页面请求;根据最后一次的刷新页面请求,更新所述表格页面。
所述页面渲染模块430还用于接收所述刷新页面请求;检测接收该刷新页面请求后,在之后的预设刷新时间段中未接收到新的刷新页面请求,则根据该刷新页面请求,更新所述表格页面。
所述页面渲染模块430还用于获取滚动操作指令;根据所述滚动操作指令,调整所述可视区域中显示的内容。
需要说明的是,上述各个模块可以是功能模块也可以是程序模块,既可以通过软件来实现,也可以通过硬件来实现。对于通过硬件来实现的模块而言,上述各个模块可以位于同一处理器中;或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。
在本实施例中还提供了一种电子装置,包括存储器和处理器,该存储器中存储有计算机程序,该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
可选地,上述电子装置还可以包括传输设备以及输入输出设备,其中,该传输设备和上述处理器连接,该输入输出设备和上述处理器连接。
可选地,在本实施例中,上述处理器可以被设置为通过计算机程序执行以下步骤:
S1,获取表格参数、可视区域以及虚拟列表区域。
S2,根据所述表格参数,获取第一渲染数据以及生成表格总范围。
S3,根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面。
S4,检测所述虚拟列表区域的数据是否全部有值。
S5,若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。
需要说明的是,在本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例,在本实施例中不再赘述。
此外,结合上述实施例中提供的表格页面渲染方法,在本实施例中还可以提供一种存储介质来实现。该存储介质上存储有计算机程序;该计算机程序被处理器执行时实现上述实施例中的任意一种表格页面渲染方法。
应该明白的是,这里描述的具体实施例只是用来解释这个应用,而不是用来对它进行限定。根据本申请提供的实施例,本领域普通技术人员在不进行创造性劳动的情况下得到的所有其它实施例,均属本申请保护范围。
显然,附图只是本申请的一些例子或实施例,对本领域的普通技术人员来说,也可以根据这些附图将本申请适用于其他类似情况,但无需付出创造性劳动。另外,可以理解的是,尽管在此开发过程中所做的工作可能是复杂和漫长的,但是,对于本领域的普通技术人员来说,根据本申请披露的技术内容进行的某些设计、制造或生产等更改仅是常规的技术手段,不应被视为本申请公开的内容不足。
“实施例”一词在本申请中指的是结合实施例描述的具体特征、结构或特性可以包括在本申请的至少一个实施例中。该短语出现在说明书中的各个位置并不一定意味着相同的实施例,也不意味着与其它实施例相互排斥而具有独立性或可供选择。本领域的普通技术人员能够清楚或隐含地理解的是,本申请中描述的实施例在没有冲突的情况下,可以与其它实施例结合。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对专利保护范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请的保护范围应以所附权利要求为准。
Claims (10)
1.一种表格页面渲染方法,其特征在于,包括:
获取表格参数、可视区域以及虚拟列表区域,其中,所述表格页面显示在屏幕上的区域为可视区域,所述虚拟列表区域包含所述可视区域;
根据所述表格参数,获取第一渲染数据以及生成表格总范围;
根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面;
检测所述虚拟列表区域的数据是否全部有值;
若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。
2.根据权利要求1所述的表格页面渲染方法,其特征在于,所述获取表格参数、可视区域以及虚拟列表区域包括:
获取所述可视区域的位置参数;
根据所述位置参数,更新所述虚拟列表区域。
3.根据权利要求1所述的表格页面渲染方法,其特征在于,所述根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面包括:
接收客户端发送的刷新页面请求;
根据所述刷新页面请求,更新所述虚拟列表区域的表格内容。
4.根据权利要求3所述的表格页面渲染方法,其特征在于,所述接收客户端发送的刷新页面请求之前包括:
其中,所述变量新操作请求中包括变量的输入信息;
获取变量新操作请求,判断所述变量新操作请求的输入信息是否合法;
若所述变量新操作请求合法,则提示操作成功;
若所述变量新操作请求不合法,则提示操作不成功。
5.根据权利要求3所述的表格页面渲染方法,其特征在于,所述根据所述刷新页面请求,更新所述表格页面包括:
接收预设时间间隔中的所有刷新页面请求;
根据最后一次的刷新页面请求,更新所述表格页面。
6.根据权利要求3所述的表格页面渲染方法,其特征在于,所述根据所述刷新页面请求,更新所述表格页面包括:
接收所述刷新页面请求;
检测接收该刷新页面请求后,在之后的预设刷新时间段中未接收到新的刷新页面请求,则根据该刷新页面请求,更新所述表格页面。
7.根据权利要求1所述的表格页面渲染方法,其特征在于,所述根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面包括:
获取滚动操作指令;
根据所述滚动操作指令,调整所述可视区域中显示的内容。
8.一种表格页面渲染装置,其特征在于,包括:
参数获取模块,用于获取表格参数、可视区域以及虚拟列表区域,其中,所述表格页面显示在屏幕上的区域为可视区域,所述虚拟列表区域包含所述可视区域;
表格生成模块,用于根据所述表格参数,获取第一渲染数据以及生成表格总范围;
页面渲染模块,用于根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染,生成表格页面;
数据检测模块,用于检测所述虚拟列表区域的数据是否全部有值;
二次渲染模块,用于若所述虚拟列表区域的数据不是全部有值,则获取虚拟列表区域的第二渲染数据,对所述虚拟列表区域的页面进行渲染更新所述表格页面。
9.一种电子装置,包括存储器和处理器,其特征在于,所述存储器中存储有计算机程序,所述处理器被设置为运行所述计算机程序以执行权利要求1至7中任一项所述的表格页面渲染方法。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的表格页面渲染方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210747769.4A CN115203603A (zh) | 2022-06-29 | 2022-06-29 | 表格页面渲染方法、装置、电子装置和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210747769.4A CN115203603A (zh) | 2022-06-29 | 2022-06-29 | 表格页面渲染方法、装置、电子装置和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN115203603A true CN115203603A (zh) | 2022-10-18 |
Family
ID=83578670
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210747769.4A Pending CN115203603A (zh) | 2022-06-29 | 2022-06-29 | 表格页面渲染方法、装置、电子装置和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115203603A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116521629A (zh) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | 文件可视化方法、装置及设备 |
-
2022
- 2022-06-29 CN CN202210747769.4A patent/CN115203603A/zh active Pending
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116521629A (zh) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | 文件可视化方法、装置及设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9619275B2 (en) | Data processing method, apparatus and mobile terminal | |
CN106021421B (zh) | 一种加速网页渲染的方法及装置 | |
US20120060083A1 (en) | Method for Use in Association With A Multi-Tab Interpretation and Rendering Function | |
CN102884526B (zh) | 在应用窗口中显示项目 | |
US10666758B2 (en) | Browser resource pre-pulling method, terminal and storage medium | |
CN106941567A (zh) | 显示网络图片的方法、装置以及用户终端 | |
CN104111847B (zh) | 一种提高游戏运行速度的方法及装置 | |
CN109361947A (zh) | 网络资源批量加载方法、智能电视、存储介质及装置 | |
CN112182444B (zh) | 数据渲染系统、方法及电子设备 | |
CN105335410B (zh) | 一种基于合成渲染加速的网页更新方法和装置 | |
CN115203603A (zh) | 表格页面渲染方法、装置、电子装置和存储介质 | |
CN114071047A (zh) | 帧率控制方法及相关装置 | |
CN109840195A (zh) | 网页性能分析方法、终端设备及计算机可读存储介质 | |
CN105808307B (zh) | 一种页面显示方法和装置 | |
CN108958612B (zh) | 控制页面滑动的方法、控制页面方法、系统、终端设备及介质 | |
CN110737532A (zh) | 一种Android电视浏览器内存优化的方法 | |
CN111435937A (zh) | 一种监控平台的刷新方法及装置 | |
JP5635672B1 (ja) | 画像処理装置及び画像処理プログラム | |
JP5563703B2 (ja) | コンテンツ配信装置、コンテンツ配信方法、コンテンツ配信プログラム及び端末用プログラム | |
CN110609718A (zh) | 图片加载方法、装置、电子设备及可读存储介质 | |
CN105677678A (zh) | 网页的首屏位置确定、网页信息显示方法和系统 | |
CN110209447A (zh) | 一种列表页数据显示方法以及列表页数据显示装置 | |
US8788965B2 (en) | Method and device for displaying data by adjusting the size of controls | |
CN117271014A (zh) | 基于web worker的数据处理方法和客户端 | |
US20110066935A1 (en) | Data file and rule driven synchronous or asynchronous document generation |
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 |