CN112068834A - 基于js的数据渲染方法及装置 - Google Patents

基于js的数据渲染方法及装置 Download PDF

Info

Publication number
CN112068834A
CN112068834A CN202010914892.1A CN202010914892A CN112068834A CN 112068834 A CN112068834 A CN 112068834A CN 202010914892 A CN202010914892 A CN 202010914892A CN 112068834 A CN112068834 A CN 112068834A
Authority
CN
China
Prior art keywords
data
value
setting
rendering
height
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
Application number
CN202010914892.1A
Other languages
English (en)
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.)
Hangzhou Tiankuan Technology Co ltd
Original Assignee
Hangzhou Tiankuan 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 Hangzhou Tiankuan Technology Co ltd filed Critical Hangzhou Tiankuan Technology Co ltd
Priority to CN202010914892.1A priority Critical patent/CN112068834A/zh
Publication of CN112068834A publication Critical patent/CN112068834A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/24—Querying
    • G06F16/248—Presentation of query results
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/25—Integrating or interfacing systems involving database management systems
    • G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
    • 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
    • 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)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Computational Linguistics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种基于JS的数据渲染方法及装置，该方法包含：获取需要展示的总数据；在web页面中生成一个盒子容器；在盒子容器内部设定一个可视区域和一个滚动条；设定盒子容器的高度以及滚动条的真实高度；设定可视区域的显示数据的开始值和终止值；设定可视区域的预保留值和预渲染值；根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据；对截取的数据进行渲染；通过可视区域显示渲染后的位于开始值和终止值之间的数据。本发明的基于JS的数据渲染方法及装置，解决了海量数据渲染时，页面结构中出现大量DOM节点对页面展示及滑动时造成的卡顿，减少了数据从请求到展示出的时间，优化了用户体验。

Description

基于JS的数据渲染方法及装置
技术领域
本发明涉及一种基于JS的数据渲染方法及装置。
背景技术
在PC或移动设备的web页面中，经常会出现一种获取的数据条数很多，并且需要展示到对应的表格或列表中的需求。目前现有市场上的解决方案为通过对数据进行循环处理后统一渲染到页面中，对应的现象为渲染及等待时间过长，滑动的时候不顺畅，在页面结构中添加了大量的DOM节点，造成页面运行不畅，极度影响用户感官和体验。
发明内容
本发明提供了一种基于JS的数据渲染方法及装置，采用如下的技术方案：
一种基于JS的数据渲染方法，包含以下步骤：
从数据库中获取需要展示的总数据；
在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；
在盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条；
设定盒子容器的高度以及滚动条的真实高度；
设定可视区域的显示数据的开始值和终止值；
设定可视区域的预保留值和预渲染值；
根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据；
对截取的数据进行渲染；
通过可视区域显示渲染后的位于开始值和终止值之间的数据。
进一步地，设定盒子容器的高度以及滚动条的真实高度的具体方法为：
获取总数据的总条数；
设定每条数据的高度和可视区域需要显示的数据的条数；
计算每条数据的高度和可视区域需要显示的数据的条数的乘积，并将计算结果设定为盒子容器的高度；
计算总数据的总条数与每条数据的高度的乘积，并将计算结果设定滚动条的真实高度。
进一步地，预保留值小于等于预保留值。
进一步地，预保留值等于预保留值。
进一步地，预保留值和预渲染值大于等于可视区域需要显示的数据的条数。
进一步地，开始值的默认值为0；
终止值的默认值等于可视区域需要显示的数据的条数。
进一步地，基于JS的数据渲染方法还包括：
将可视区域和盒子容器进行相对定位。
一种基于JS的数据渲染装置，包括：
数据库，用于存储数据；
数据获取模块，用于从数据库中获取需要展示的总数据；
生成模块，用于在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；
第一设定模块，用于在盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条；
第二设定模块，用于设定盒子容器的高度以及滚动条的真实高度；
第三设定模块，用于设定可视区域的显示数据的开始值和终止值；
第四设定模块，用于设定可视区域的预保留值和预渲染值；
数据截取模块，用于根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据；
数据渲染模块，用于对截取的数据进行渲染；
可视区域显示渲染后的位于开始值和终止值之间的数据。
进一步地，第二设定模块包括：
获取子模块，用于获取总数据的总条数；
第一设定子模块，用于设定每条数据的高度和可视区域需要显示的数据的条数；
第一计算子模块，用于计算每条数据的高度和可视区域需要显示的数据的条数的乘积；
第二设定子模块，用于将第一计算子模块计算得到的结果设定为盒子容器的高度；
第二计算子模块，用于计算总数据的总条数与每条数据的高度的乘积；
第三设定子模块，用于将第二计算子模块计算得到的结果设定为滚动条的真实高度。
进一步地，基于JS的提高海量数据表格渲染性能的装置还包括:
定位模块，用于将可视区域和盒子容器进行相对定位。
本发明的有益之处在于所提供的基于JS的数据渲染方法及装置，解决了海量数据渲染时，页面结构中出现大量DOM节点对页面展示及滑动时造成的卡顿，减少了数据从请求到展示出的时间，优化了用户体验。
附图说明
图1为本发明的一种基于JS的数据渲染方法的示意图；
图2为本发明的一种基于JS的数据渲染装置的示意图。
基于JS的数据渲染装置100，数据库11，数据获取模块12，生成模块13，第一设定模块14，第二设定模块15，获取子模块151，第一设定子模块152，第一计算子模块153，第二设定子模块154，第二计算子模块155，第三设定子模块156，第三设定模块16，第四设定模块17，数据截取模块18，数据渲染模块19，定位模块20。
具体实施方式
以下结合附图和具体实施例对本发明作具体的介绍。
如图1所示为本发明的一种基于JS(JavaScript)的数据渲染方法，主要包含以下步骤：S1：从数据库中获取需要展示的总数据。S2：在web页面中生成一个用于存放渲染表格的固定大小的盒子容器。S3：在盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条。S4：设定盒子容器的高度以及滚动条的真实高度。S5：设定可视区域的显示数据的开始值和终止值。S6：设定可视区域的预保留值和预渲染值。S7：根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据。S8：对截取的数据进行渲染。S9：通过可视区域显示渲染后的位于开始值和终止值之间的数据。通过上述步骤，解决了海量数据渲染时，页面结构中出现大量DOM节点对页面展示及滑动时造成的卡顿，减少了数据从请求到展示出的时间，优化了用户体验。以下具体介绍上述步骤。
首先，从数据库中获取需要展示的总数据用于后续步骤使用。在web页面中生成一个用于存放渲染表格的固定大小的盒子容器，在盒子容器中设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条，并且设定盒子容器的高度以及滚动条的真实高度。
具体而的，设定盒子容器的高度以及滚动条的真实高度的具体方法为：获取总数据的总条数。设定每条数据的高度和可视区域需要显示的数据的条数。计算每条数据的高度和可视区域需要显示的数据的条数的乘积，并将计算结果设定为盒子容器的高度。计算总数据的总条数与每条数据的高度的乘积，并将计算结果设定滚动条的真实高度。
盒子容器的高度与可视区域需要显示的数据的条数相匹配，确保可视区域能够完整显示待显示的区域。同时，滚动条的真实高度与总数据的条数相关联，确保滚动条能够指示当前显示的数据占据总数据的位置。可以理解的是，在本发明中，对于总数据的处理并非是对总数据进行循环处理后统一渲染，而是根据当前可视区域需要显示的内容从总数据中进行截取对应的数据进行渲染，倘若滚动条的真实高度与截取的数据相对应，则无法指示当前可视区域显示的数据位于总数据的大概位置。
设定可视区域的显示数据的开始值和终止值，同时，设定可视区域的预保留值和预渲染值。根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据。对截取的数据进行渲染。通过可视区域显示渲染后的位于开始值和终止值之间的数据。
具体而言，可视区域的显示数据的开始值和终止值为当前显示在可视区域的数据在总数据中的位置。同时，为了防止用户滑动时出现白屏卡顿，设置预保留值和预渲染值。根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据，并且对截取的数据进行个渲染，通过可视区域显示渲染后的位于开始值和终止值之间的数据。开始值的默认值为0。终止值的默认值等于可视区域需要显示的数据的条数。
举例说明，在本发明中，总数据的总条数为1000，可视区域显示的数据条数为20，设定预保留值为20，预渲染值为30。则终止值的初始值为0，结束值为20。WEB页面运行时，首先,从总数据中截取0到50条数据并进行渲染，渲染后将0至20条的数据在可视区域中展示出来。当拖动滚动条往下滚动20条数据时，保留0至20条已经渲染完成的数据，同时，将预渲染好的21至40条数据展示在可视区域中，同时，从总数据中截取51至70条数据进行预渲染。在此基础上，当拖动滚动条继续往下滚动100条数据时，则从总数据中截取91至170条数据进行渲染，并且通过可视区域展示121至140条数据。
作为一种可选的实施方式，基于JS的数据渲染方法还包括：将可视区域和盒子容器进行相对定位。将可视区域与盒子容器进行相对定位以保证数据正常显示在可视区域内。
如图2所示，本发明还揭示一种基于JS的数据渲染装置，包括：数据库11、数据获取模块12、生成模块13、第一设定模块14、第二设定模块15、第三设定模块16、第四设定模块17、数据截取模块18和数据渲染模块19。具体而言，数据库11用于存储数据。数据获取模块12用于从数据库11中获取需要展示的总数据。生成模块13用于在web页面中生成一个用于存放渲染表格的固定大小的盒子容器。第一设定模块14用于在盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条。第二设定模块15用于设定盒子容器的高度以及滚动条的真实高度。第三设定模块16用于设定可视区域的显示数据的开始值和终止值。第四设定模块17用于设定可视区域的预保留值和预渲染值。数据截取模块18用于根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据。数据渲染模块19用于对截取的数据进行渲染，可视区域显示渲染后的位于开始值和终止值之间的数据。
作为一种优选的实施方式，第二设定模块15包括：获取子模块151、第一设定子模块152、第一计算子模块153、第二设定子模块154、第二计算子模块155和第三设定子模块156。
具体而言，获取子模块151用于获取总数据的总条数。第一设定子模块152用于设定每条数据的高度和可视区域需要显示的数据的条数。第一计算子模块153用于计算每条数据的高度和可视区域需要显示的数据的条数的乘积。第二设定子模块154用于将第一计算子模块153计算得到的结果设定为盒子容器的高度。第二计算子模块155用于计算总数据的总条数与每条数据的高度的乘积。第三设定子模块156用于将第二计算子模块155计算得到的结果设定为滚动条的真实高度。
作为一种优选的实施方式，基于JS的提高海量数据表格渲染性能的装置还包括:定位模块20。定位模块20用于将可视区域和盒子容器进行相对定位。
以上显示和描述了本发明的基本原理、主要特征和优点。本行业的技术人员应该了解，上述实施例不以任何形式限制本发明，凡采用等同替换或等效变换的方式所获得的技术方案，均落在本发明的保护范围内。

Claims (10)

1.一种基于JS的数据渲染方法，其特征在于，包含以下步骤：
从数据库中获取需要展示的总数据；
在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；
在所述盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条；
设定所述盒子容器的高度以及所述滚动条的真实高度；
设定所述可视区域的显示数据的开始值和终止值；
设定所述可视区域的预保留值和预渲染值；
根据所述开始值、所述终止值、所述预保留至和所述预渲染值从总数据中截取对应的数据；
对截取的数据进行渲染；
通过所述可视区域显示渲染后的位于所述开始值和所述终止值之间的数据。
2.根据权利要求1所述的基于JS的数据渲染方法，其特征在于，
所述设定所述盒子容器的高度以及所述滚动条的真实高度的具体方法为：
获取总数据的总条数；
设定每条数据的高度和所述可视区域需要显示的数据的条数；
计算每条数据的高度和所述可视区域需要显示的数据的条数的乘积，并将计算结果设定为所述盒子容器的高度；
计算总数据的总条数与每条数据的高度的乘积，并将计算结果设定所述滚动条的真实高度。
3.根据权利要求2所述的基于JS的数据渲染方法，其特征在于，
所述预保留值小于等于所述预保留值。
4.根据权利要求3所述的基于JS的数据渲染方法，其特征在于，
所述预保留值等于所述预保留值。
5.根据权利要求4所述的基于JS的数据渲染方法，其特征在于，
所述预保留值和所述预渲染值大于等于所述可视区域需要显示的数据的条数。
6.根据权利要求1所述的基于JS的数据渲染方法，其特征在于，
所述开始值的默认值为0；
所述终止值的默认值等于所述可视区域需要显示的数据的条数。
7.根据权利要求1所述的基于JS的数据渲染方法，其特征在于，
所述基于JS的数据渲染方法还包括：
将所述可视区域和所述盒子容器进行相对定位。
8.一种基于JS的数据渲染装置，其特征在于，包括：
数据库，用于存储数据；
数据获取模块，用于从所述数据库中获取需要展示的总数据；
生成模块，用于在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；
第一设定模块，用于在所述盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条；
第二设定模块，用于设定所述盒子容器的高度以及所述滚动条的真实高度；
第三设定模块，用于设定所述可视区域的显示数据的开始值和终止值；
第四设定模块，用于设定所述可视区域的预保留值和预渲染值；
数据截取模块，用于根据所述开始值、所述终止值、所述预保留至和所述预渲染值从总数据中截取对应的数据；
数据渲染模块，用于对截取的数据进行渲染；
所述可视区域显示渲染后的位于所述开始值和所述终止值之间的数据。
9.根据权利要求8所述的基于JS的数据渲染装置，其特征在于，
所述第二设定模块包括：
获取子模块，用于获取总数据的总条数；
第一设定子模块，用于设定每条数据的高度和所述可视区域需要显示的数据的条数；
第一计算子模块，用于计算每条数据的高度和所述可视区域需要显示的数据的条数的乘积；
第二设定子模块，用于将所述第一计算子模块计算得到的结果设定为所述盒子容器的高度；
第二计算子模块，用于计算总数据的总条数与每条数据的高度的乘积；
第三设定子模块，用于将所述第二计算子模块计算得到的结果设定为所述滚动条的真实高度。
10.根据权利要求9所述的基于JS的数据渲染装置，其特征在于，
所述基于JS的提高海量数据表格渲染性能的装置还包括:
定位模块，用于将所述可视区域和所述盒子容器进行相对定位。
CN202010914892.1A 2020-09-03 2020-09-03 基于js的数据渲染方法及装置 Pending CN112068834A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010914892.1A CN112068834A (zh) 2020-09-03 2020-09-03 基于js的数据渲染方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010914892.1A CN112068834A (zh) 2020-09-03 2020-09-03 基于js的数据渲染方法及装置

Publications (1)

Publication Number Publication Date
CN112068834A true CN112068834A (zh) 2020-12-11

Family

ID=73665360

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010914892.1A Pending CN112068834A (zh) 2020-09-03 2020-09-03 基于js的数据渲染方法及装置

Country Status (1)

Country Link
CN (1) CN112068834A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113297830A (zh) * 2021-07-22 2021-08-24 北京达佳互联信息技术有限公司 表格数据处理方法、装置、电子设备和存储介质
CN113467869A (zh) * 2021-06-22 2021-10-01 中科曙光国际信息产业有限公司 数据渲染方法、装置、计算机设备和存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130007590A1 (en) * 2011-06-30 2013-01-03 Apple Inc. List view optimization
CN103399866A (zh) * 2013-07-05 2013-11-20 北京小米科技有限责任公司 一种网络页面的渲染方法、装置及设备
CN108959206A (zh) * 2018-07-02 2018-12-07 浪潮软件股份有限公司 一种优化Vue前端表格组件渲染性能的方法及系统
CN110244993A (zh) * 2018-12-25 2019-09-17 蔚来汽车有限公司 前端页面加载方法、装置、控制器及介质
CN111381823A (zh) * 2020-03-11 2020-07-07 四川长虹电器股份有限公司 Web端长列表渲染方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130007590A1 (en) * 2011-06-30 2013-01-03 Apple Inc. List view optimization
CN103399866A (zh) * 2013-07-05 2013-11-20 北京小米科技有限责任公司 一种网络页面的渲染方法、装置及设备
CN108959206A (zh) * 2018-07-02 2018-12-07 浪潮软件股份有限公司 一种优化Vue前端表格组件渲染性能的方法及系统
CN110244993A (zh) * 2018-12-25 2019-09-17 蔚来汽车有限公司 前端页面加载方法、装置、控制器及介质
CN111381823A (zh) * 2020-03-11 2020-07-07 四川长虹电器股份有限公司 Web端长列表渲染方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113467869A (zh) * 2021-06-22 2021-10-01 中科曙光国际信息产业有限公司 数据渲染方法、装置、计算机设备和存储介质
CN113297830A (zh) * 2021-07-22 2021-08-24 北京达佳互联信息技术有限公司 表格数据处理方法、装置、电子设备和存储介质

Similar Documents

Publication Publication Date Title
US8570347B2 (en) Electronic device and method for image editing
CA2922060C (en) Swipe toolbar to switch tabs
US10339209B2 (en) Webpage display method and device
CN110032701B (zh) 图像展示控制方法、装置、存储介质及电子设备
CN107204023B (zh) 避免绘制在canvas画布中的图形失真的方法和装置
CN112068834A (zh) 基于js的数据渲染方法及装置
JP7318016B2 (ja) テーブル情報の表示方法、装置、機器および記憶媒体
CN108961165B (zh) 用于加载图像的方法和装置
CN107656911B (zh) 表格处理方法及其系统
US11551392B2 (en) Graphic drawing method and apparatus, device, and storage medium
WO2017096854A1 (zh) 智能终端的图片预览方法及装置
EP3408752B1 (en) Object management and visualization using a computing device
CN105701107A (zh) 一种电子地图的文字渲染方法及装置
CN109597956A (zh) 页面显示方法和装置
CN112099886A (zh) 移动零终端的桌面显示控制方法及装置
CN104918073A (zh) 一种图像的显示方法及终端
CN112286603A (zh) 一种表格展示方法、装置、电子设备及存储介质
CN112506508A (zh) 一种图文展示装置及其展示方法
CN108346126B (zh) 基于内存拷贝方式绘制手机图片的方法及装置
CN108519844B (zh) 菜单显示方法和装置、存储介质、处理器及终端
CN117850730B (zh) 一种智能笔盒显示图片的方法与系统
CN111724195B (zh) 台位布局生成、展示方法及装置
CN117036532B (zh) 晶圆图生成方法、装置、电子设备和存储介质
CN109710355B (zh) 基于web交互的tip显示内容处理方法、装置及电子设备
CN115203437A (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