CN112612457A - 一种javascript高性能渲染大量数据的方法 - Google Patents

一种javascript高性能渲染大量数据的方法 Download PDF

Info

Publication number
CN112612457A
CN112612457A CN202011576693.0A CN202011576693A CN112612457A CN 112612457 A CN112612457 A CN 112612457A CN 202011576693 A CN202011576693 A CN 202011576693A CN 112612457 A CN112612457 A CN 112612457A
Authority
CN
China
Prior art keywords
data
screen
viewport
large amount
displayed
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
CN202011576693.0A
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.)
Big Data Research Institute Institute Of Computing Technology Chinese Academy Of Sciences
Original Assignee
Big Data Research Institute Institute Of Computing Technology Chinese Academy Of Sciences
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 Big Data Research Institute Institute Of Computing Technology Chinese Academy Of Sciences filed Critical Big Data Research Institute Institute Of Computing Technology Chinese Academy Of Sciences
Priority to CN202011576693.0A priority Critical patent/CN112612457A/zh
Publication of CN112612457A publication Critical patent/CN112612457A/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/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • 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/34—Graphical or visual programming

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明属于大数据处理技术领域，具体涉及一种javascript高性能渲染大量数据的方法；通过监听窗口视图的可见区域，在页面滑动的过程中，当数据将要进入视图时开始加载，将已经滑走的数据进行删除，每次展示指定数量的的数据，既避免了一次性加载大量数据或着通过计时器间歇性加载造成的页面卡顿，同时又无需通过频繁计算来判断监听元素是否进入设备的可视区域，从而提升了数据处理的性能，大大的提高数据渲染的效率。

Description

一种javascript高性能渲染大量数据的方法
技术领域
本发明属于大数据处理技术领域，具体涉及一种javascript高性能渲染大量数据的方法。
背景技术
在前端页面插入大量的数据，最简单粗暴的做法是一次性渲染，对十万条数据进行循环操作，每条数据仅仅只有图片和文字的简单组合，就要花费17s的时间，显然这种长时间的页面卡顿对于用户来说极其不友好。
现有的处理大数据的做法也有使用setTimeout进行分批渲染，将分批任务放在回调函数中执行，虽然解决了页面卡顿问题，但是快速滚动页面时，会出现闪屏或白屏现象。在setTimeout中对dom进行操作，必须要等到屏幕下次绘制时才能更新到屏幕上，如果两者步调不一致，就可能导致其中某一帧的操作被跨越过去，而直接更新到下一帧的元素，从而导致丢帧现象。与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定执行时机。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象。
但是上述的时间分片方法是在加载大量简单dom的前提下，只是解决了如何渲染不卡顿的问题。在实际业务中，对于复杂的数据，每次修改dom都会引起十万条数据的重排重绘，这样性能方面肯定也会有问题。
发明内容
针对现有设备存在的缺陷和问题，本发明提供一种，有效的解决了现有设备中存在的一次性加载大量数据或着通过计时器间歇性加载造成的页面卡顿、处理效率低的问题。
本发明解决其技术问题所采用的方案是：一种javascript高性能渲染大量数据的方法，包括如下步骤：
步骤1：设置页面内容的存储容器，在程序执行过程中，把将要加载的数据存入存储容器中显示；
步骤2：定义变量S
获取数据的总数据源，并总数据源赋值给变量S；
步骤3：计算一屏内可以展示的数据量
定义变量H用来表示视口高度，定义变量h来表示一条数据的高度，在数据充满屏幕的条件下，计算一屏可以展示的数据量S1，S1=H/h；
步骤4：制定页面内容存储规则：
计算展示总数据源所需的屏数N，即N=S/S1；将监听区域设置在距离视口1屏的位置；
步骤5：按照步骤4中的规则，在总数据源中取Q屏的数据展示到页面容器中；
步骤6：定义IntersectionObserver实例，指定浏览器视口为观察的viewport，添加实例的observe方法并指定要观察的dom节点区域；
步骤7：被观察区域进入视口时会触发回调函数，在回调函数中判断IntersectionObserverEntry对象的intersectionRatio值，当intersectionRatio大于0%时，新增一屏数据到内容容器中，并通过实例的observe方法观察新增的区域；
步骤8：当目标被观察区域完全移出视口时，会再次触发回调函数，在回调函数中将观察区域前一屏的数据从内容容器中删除。避免每次渲染大量数据引起的重排重绘造成的页面卡顿问题；
步骤9：判断数据是否加载到底部，如果是，则不再新增，如果否则跳到步骤7中循环操作。
进一步的，步骤4中，监听区域还可以为距离视口2屏的位置。
进一步的，在步骤5中，初始设置页面内容的存储容器中展示2屏，并提取相应的数据展示到页面容器中。
进一步的，步骤1所述数据为图片、文字或者两者的组合文本。
本发明的有益效果：本发明提供一种异步观察目标元素与其祖先元素或顶级文档视图（viewport）交叉状态的方法，通过监听窗口视图的可见区域，在页面滑动的过程中，当数据将要进入视图时开始加载，将已经滑走的数据进行删除，每次展示指定数量的的数据，既避免了一次性加载大量数据或着通过计时器间歇性加载造成的页面卡顿，同时又无需通过频繁计算来判断监听元素是否进入设备的可视区域，从而提升了数据处理的性能，大大的提高数据渲染的效率。
同时，本发明中进在视口的上下设置一个观察区域，当屏幕从底部滑动到底部或者上部的观察区域内时，屏幕与观察区域形成交叉时开始进行加载，即能够对数据进行预加载，防止滑动过快时页面出现卡顿，进而提高数据渲染的效率。
附图说明
图1为本发明的工作逻辑流程图。
图2为初始设置下视口展示数据的示意图。
图3为被观察区域进入视口时的示意图
具体实施方式
下面结合附图和实施例对本发明进一步说明。
实施例1：本实施例旨在提供一种javascript高性能渲染大量数据的方法，主要针对数据量庞大的数据进行渲染，针对现有的数据渲染存在的一次性加载大量数据或着通过计时器间歇性加载造成的页面卡顿、处理效率低的问题，本实施例提供了一种异步观察目标元素与其祖先元素或顶级文档视图（viewport）交叉状态的方法。
本实施例中具体包括如下步骤：
步骤1：设置页面内容的存储容器，在程序执行过程中，把将要加载的数据存入存储容器中显示。
步骤2：定义变量S
获取数据的总数据源，并总数据源赋值给变量S。
步骤3：计算一屏内可以展示的数据量
定义变量H用来表示视口高度，定义变量h来表示一条数据的高度，在数据充满屏幕的条件下，计算一屏可以展示的数据量S1，S1=H/h。
步骤4：制定页面内容存储规则：
计算展示总数据源所需的屏数N，即N=S/S1；将监听区域设置在距离视口1屏的位置。
步骤5：按照步骤4中的规则，在总数据源中取Q屏的数据展示到页面容器中。
步骤6：定义IntersectionObserver实例，指定浏览器视口为观察的viewport，添加实例的observe方法并指定要观察的dom节点区域。
步骤7：被观察区域进入视口时会触发回调函数，在回调函数中判断IntersectionObserverEntry对象的intersectionRatio值，当intersectionRatio大于0%时，新增一屏数据到内容容器中，并通过实例的observe方法观察新增的区域。
步骤8：当目标被观察区域完全移出视口时，会再次触发回调函数，在回调函数中将观察区域前一屏的数据从内容容器中删除。避免每次渲染大量数据引起的重排重绘造成的页面卡顿问题。
步骤9：判断数据是否加载到底部，如果是，则不再新增，如果否则跳到步骤7中循环操作。
本实施例提供了一种异步观察目标元素与其祖先元素或顶级文档视窗交叉状态的方法，祖先元素与视窗被称为根，当一个IntersectionObserver对象被创建时，其被配置监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察着只能用来监听可见区域的特定变化值。
Viewport为用户网页的可视区域，也就是视口。
IntersectionObserver实例：在具体实施过程中，IntersectionObserver是浏览器原生提供的构造函数，接受两个参数callback和option，其中option参数可选默认为浏览器视口，也可指定，Callback：目标元素的可见性变化时，就会调用观察器的回调函数callback.callback一般会触发两次。一次是目标元素刚刚进入视口，另一次是完全离开视口。
构造函数的返回值是一个观察器实例，实例的observe方法可以观察指定的dom节点，当该dom节点观察结束，可以使用unobserve方法停止观察该节点。图2-3中的观察区域被创建时会通过observe方法开始观察，删除时通过unobserve方法停止观察。
IntersectionObserverEntry：callback函数的参数是个数组，如果有两个被观察区域的可见性发生变化时，参数数组中就会有两个成员。每个成员都是一个IntersectionObserverEntry对象。IntersectionObserverEntry对象提供目标元素信息，共有6个属性，每个属性含义如下：
time为可见性发生变化的时间，是一个高精度时间戳，单位为毫秒。
target：被观察的目标元素，是一个 DOM 节点对象；
rootBounds：根元素的矩形区域的信息；
getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null；
boundingClientRect：目标元素的矩形区域的信息；intersectionRect：目标元素与视口（或根元素）的交叉区域的信息；
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0。
如图1-3中的示例就是通过判断IntersectionObserverEntry对象的返回值来查看交叉状态。下面结合附图对本实施例进一步说明；本实施例中步骤5中，假设共有10万条数据，每条数据为图片、文字或者两者的组合文本，定义每条数据占用的高度为200px，将这些数据展示在1920px*1200px的屏幕上，则一屏展示的数据量为60条，则共需展示1667屏。并定义步骤5中，Q=2，这里初始设置页面内容的存储容器中展示2屏，即存储容器中存储120条数据，监听区域为距离视口1屏的位置，即距离视口1200px位置处。
由此，本实施例通过监听窗口视图的可见区域，在页面滑动的过程中，当数据将要进入视图时开始加载，将已经滑走的数据进行删除，每次展示指定数量的数据，既避免了一次性加载大量数据或着通过计时器间歇性加载造成的页面卡顿，同时又无需通过频繁计算来判断监听元素是否进入设备的可视区域，从而提升了数据处理的性能，大大的提高数据渲染的效率。
实施例2：本实施例与实施例1基本相同，其不同在于：本实施例对步骤4中，监听区域还可以为距离视口2屏的位置。
在步骤5中，假设共有10万条数据，一屏展示的数据量为10条，则共需展示1万屏。这里设置页面内容的存储容器中展示10屏，监听区域为距离视口2屏的位置，在步骤7中内容交叉时会触发回调函数，假设加载的10屏数据中，滑动到第7屏时会触发回调函数，在回调函数中从页面容器中将11-15屏的数据加载显示，并删除1-5屏的数据。
本实施例无需反复计算交叉距离，会自动监听交叉状态，提升了系统性能，且步骤8中，中保证了内容容器中每次只有10屏数据，这样避免了每次渲染大量数据引起的重排重绘造成的页面卡顿问题，实现了高性能渲染。

Claims (4)

1.一种javascript高性能渲染大量数据的方法，其特征在于：包括如下步骤：
步骤1：设置页面内容的存储容器，在程序执行过程中，把将要加载的数据存入存储容器中显示；
步骤2：定义变量S
获取数据的总数据源，并总数据源赋值给变量S；
步骤3：计算一屏内可以展示的数据量
定义变量H用来表示视口高度，定义变量h来表示一条数据的高度，在数据充满屏幕的条件下，计算一屏可以展示的数据量S1，S1=H/h；
步骤4：制定页面内容存储规则：
计算展示总数据源所需的屏数N，即N=S/S1；将监听区域设置在距离视口1屏的位置；
步骤5：按照步骤4中的规则，在总数据源中取Q屏的数据展示到页面容器中；
步骤6：定义IntersectionObserver实例，指定浏览器视口为观察的viewport，添加实例的observe方法并指定要观察的dom节点区域;
步骤7：被观察区域进入视口时触发回调函数，在回调函数中判断IntersectionObserverEntry对象的intersectionRatio值，当intersectionRatio大于0%时，新增一屏数据到存储容器中，并通过实例的observe方法观察新增的区域；
步骤8：当目标被观察区域完全移出视口时，再次触发回调函数，在回调函数中将观察区域前一屏的数据从内容容器中删除,避免每次渲染大量数据引起的重排重绘造成的页面卡顿问题；
步骤9：判断数据是否加载到底部，如果是，则不再新增，如果否，则跳到步骤7中循环操作。
2.根据权利要求1中所述的javascript高性能渲染大量数据的方法，其特征在于：步骤4中，监听区域还可以为距离视口2屏的位置。
3.根据权利要求1中所述的javascript高性能渲染大量数据的方法，其特征在于：在步骤5中，初始设置页面内容的存储容器中展示2屏，并提取相应的数据展示到页面容器中。
4.根据权利要求1中所述的javascript高性能渲染大量数据的方法，其特征在于：步骤1所述数据为图片、文字或者两者的组合文本。
CN202011576693.0A 2020-12-28 2020-12-28 一种javascript高性能渲染大量数据的方法 Pending CN112612457A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011576693.0A CN112612457A (zh) 2020-12-28 2020-12-28 一种javascript高性能渲染大量数据的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011576693.0A CN112612457A (zh) 2020-12-28 2020-12-28 一种javascript高性能渲染大量数据的方法

Publications (1)

Publication Number Publication Date
CN112612457A true CN112612457A (zh) 2021-04-06

Family

ID=75248191

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011576693.0A Pending CN112612457A (zh) 2020-12-28 2020-12-28 一种javascript高性能渲染大量数据的方法

Country Status (1)

Country Link
CN (1) CN112612457A (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170140063A1 (en) * 2015-11-18 2017-05-18 Samsung Electronics Co., Ltd. Method and apparatus for navigation in webpage
CN111159600A (zh) * 2019-12-27 2020-05-15 北京达佳互联信息技术有限公司 页面上元素的信息上报方法、装置、电子设备及存储介质
CN111258682A (zh) * 2020-02-20 2020-06-09 四川长虹电器股份有限公司 一种优化WebApp内存和节点的方法
CN111381823A (zh) * 2020-03-11 2020-07-07 四川长虹电器股份有限公司 Web端长列表渲染方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170140063A1 (en) * 2015-11-18 2017-05-18 Samsung Electronics Co., Ltd. Method and apparatus for navigation in webpage
CN111159600A (zh) * 2019-12-27 2020-05-15 北京达佳互联信息技术有限公司 页面上元素的信息上报方法、装置、电子设备及存储介质
CN111258682A (zh) * 2020-02-20 2020-06-09 四川长虹电器股份有限公司 一种优化WebApp内存和节点的方法
CN111381823A (zh) * 2020-03-11 2020-07-07 四川长虹电器股份有限公司 Web端长列表渲染方法

Non-Patent Citations (6)

* Cited by examiner, † Cited by third party
Title
LEIY: "性能优化小册 - 渲染十万条数据：基于 IntersectionObserver 的虚拟列表", 《HTTPS://CLOUD.TENCENT.COM/DEVELOPER/ARTICLE/1667754》 *
WEIXIN_39687814: "1万条数据大概占多大空间_Vue-Table表格渲染上千数据优化", 《HTTPS://BLOG.CSDN.NET/WEIXIN_39687814/ARTICLE/DETAILS/110111114》 *
YUXIN_LIU: "IntersectionObserver", 《HTTPS://WWW.JIANSHU.COM/P/70EDA30D3C44》 *
佚名: "Intersection Observer实现滚动到相应区域执行动画及图片懒", 《HTTPS://WWW.XINRAN001.COM/FRONTEND/42.HTML》 *
苍青浪: "谈谈IntersectionObserver懒加载", 《HTTPS://WWW.CNBLOGS.COM/CANGQINGLANG/P/12053246.HTML》 *
阮一峰: "IntersectionObserver API 使用教程", 《HTTPS://WWW.RUANYIFENG.COM/BLOG/2016/11/INTERSECTIONOBSERVER_API.HTML》 *

Similar Documents

Publication Publication Date Title
CN107135427B (zh) 一种显示弹幕信息的方法和系统
RU2014136806A (ru) Иерархически организованные галереи управляющих элементов
CN106294301B (zh) 报表生成方法和装置
US20150187095A1 (en) Method and device for implementing page mask
US10705710B2 (en) Web page content insertion based on scroll operation
CN113467871A (zh) H5页面展示方法、装置、设备及存储介质
CN103389968A (zh) 一种富文本显示实现方法及系统
CN109714627B (zh) 一种评论信息的渲染方法、装置及设备
CN109710686A (zh) 可视化构建图表的分析系统
CN112333240A (zh) 消息推送显示方法、装置、可读存储介质和计算机设备
CN104090755A (zh) Android Launcher界面中长应用名称的垂直滚动显示方法
CN107230241B (zh) 图文混排实现方法及装置
CN111832271A (zh) 数据呈现方法、装置、电子设备和存储介质
CN113434138B (zh) 信息显示方法、装置和电子设备
CN109298819B (zh) 选择对象的方法、装置、终端及存储介质
CN114282135A (zh) 数据轮播方法、装置、电子设备及存储介质
CN110990431A (zh) 一种实现中国地图和折线图数据同步联动轮播的方法
CN106874387B (zh) 一种自适应html滚屏展示实时信息的方法
CN112612457A (zh) 一种javascript高性能渲染大量数据的方法
CN111142984A (zh) 可视化数据显示方法、系统、设备及计算机可读存储介质
CN115421691A (zh) 一种基于虚拟列表的数据滚动方法、装置及计算机设备
CN115170695A (zh) 图表图片的生成方法、装置、电子设备和存储介质
CN113407183A (zh) 界面生成方法、装置、设备及存储介质
CN114168130A (zh) 埋点数据上报方法、装置、电子设备及存储介质
US10115219B2 (en) Grid and table animations to provide context during sort operations

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20210406

RJ01 Rejection of invention patent application after publication