一种javascript高性能渲染大量数据的方法技术

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

【技术实现步骤摘要】
一种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参数可选默认为浏览器视口，本文档来自技高网...

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

【技术特征摘要】
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对象的...

【专利技术属性】
技术研发人员：郭艳芳，冯凯，王元卓，
申请(专利权)人：中科院计算技术研究所大数据研究院，
类型：发明
国别省市：河南;41