一种前端实时处理Web应用数据的方法、设备及介质与流程

本申请涉及数据处理，尤其涉及一种前端实时处理web应用数据的方法、设备及介质。

背景技术：

1、服务器端处理数据涉及到数据的读取、计算、转换等多个步骤，这些操作都需要消耗服务器的计算资源，如果服务器性能不足或负载过高，就会导致响应延迟增加，甚至引发服务崩溃；这样客户端与服务器端之间进行数据交互时，由于网络传输的延迟，客户端获取数据的速度会受到影响，特别是在地理位置较远或网络条件不佳的情况下，这种延迟会更加明显，这可能导致用户在等待数据加载时感到不耐烦，降低了用户体验。

2、随着互联网技术的快速发展和用户对实时信息需求的增长，传统的依赖服务器端处理并定时刷新的web表格数据统计方式已无法满足高效、低延迟的应用场景要求。

3、通过上述的分析，现有技术存在的问题及缺陷为：

4、现有技术中的web应用数据大都依赖于服务器端处理，这会导致响应延迟增加，效率低下。

技术实现思路

1、本申请实施例提供了一种前端实时处理web应用数据的方法、设备及介质，能够解决现有技术中web应用数据大都依赖于服务器端处理，导致响应延迟增加，效率低下的问题。

2、第一方面，本申请实施例提供了一种前端实时处理web应用数据的方法，方法包括：获取后端推送的实时数据，判断实时数据的类型，类型包括高精度数值类型和高频率数值类型；在实时数据为高精度数值类型的情况下，通过分布式计算模型和高精度数学库对实时数据进行精确计算，得到计算结果；将计算结果和实时数据存入前端数据库，并根据计算结果更新渲染页面。

3、在本申请的一种实现方式中，在获取后端推送的实时数据之前，方法还包括：提取前端数据库中出现频次高于预设阈值的实时数据和计算结果，分别得到高频数据、高频结果和高频计算模式；将高频数据、高频结果和高频计算模式存入预设的缓存区。

4、在本申请的一种实现方式中，在获取后端推送的实时数据之后，方法还包括：在实时数据为高频率数值类型的情况下，匹配缓存区中的高频结果；在没有匹配到高频结果的情况下，匹配高频计算模式进行计算；在没有匹配到高频计算模式的情况下，对实时数据进行计算，得到计算结果，并保存至缓存区。

5、在本申请的一种实现方式中，在获取后端推送的实时数据之前，方法还包括：在后端与前端之间建立全双工通信连接；预置数据库和缓存区，数据库为indexeddb数据库，缓存区为lru缓存区；引入高精度数学库，高精度数学库包括decimal.js库和big.js库；在前端构建响应式框架，绑定响应式框架中的ui组件和数据库、缓存区，ui组件以表格的形式呈现数据。

6、在本申请的一种实现方式中，通过分布式计算模型对实时数据进行精确计算，并汇总得到计算结果，具体包括：创建多个工作线程对实时数据进行精确计算；在工作线程中的一个线程计算完成后，当前线程向目标线程发送消息；监听目标线程接收到的消息，提取消息中的结果并汇总，得到计算结果。

7、在本申请的一种实现方式中，根据计算结果更新渲染页面，具体包括：基于窗口的滚动位置，动态加载ui组件的表格数据，并得到当前位于滚动位置的表格数据；位于滚动位置的表格数据根据计算结果自动更新和渲染。

8、在本申请的一种实现方式中，在位于滚动位置的表格数据根据计算结果自动更新和渲染之后，方法还包括：监听滚动的表格数据，判断表格数据是否到达临界点；在到达临界点时，调用分页api以触发下一页的表格数据加载；在分页api返回计算结果后，表格数据根据计算结果自动更新和渲染。

9、在本申请的一种实现方式中，在将计算结果和实时数据存入前端数据库和第一缓存区之后，方法还包括：对获取实时数据、计算实时数据和更新渲染页面的过程进行错误捕获；对捕获到的异常代码进行修复；若修复失败，通过回滚机制恢复到故障发生前的状态，并发送警报和开始监控。

10、第二方面，本申请实施例还提供了一种前端实时处理web应用数据的设备，设备包括至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：获取后端推送的实时数据，判断实时数据的类型，类型包括高精度数值类型和高频率数值类型；在实时数据为高精度数值类型的情况下，通过分布式计算模型和高精度数学库对实时数据进行精确计算，得到计算结果；将计算结果和实时数据存入前端数据库，并根据计算结果更新渲染页面。

11、第三方面，本申请实施例还提供了一种前端实时处理web应用数据的非易失性计算机存储介质，存储有计算机可执行指令，计算机可执行指令设置为：获取后端推送的实时数据，判断实时数据的类型，类型包括高精度数值类型和高频率数值类型；在实时数据为高精度数值类型的情况下，通过分布式计算模型和高精度数学库对实时数据进行精确计算，得到计算结果；将计算结果和实时数据存入前端数据库，并根据计算结果更新渲染页面。

12、本申请实施例提供的一种前端实时处理web应用数据的方法、设备及介质，采用lru缓存策略以及预计算技术，有效避免了重复计算，降低了系统的运算负载，提高了系统响应速度；同时，对高频访问的中间结果进行存储，优化了资源利用效率。这种优化策略不仅保证了系统的高效运行，还提升了用户体验；通过高精度数学库的集成，系统能够准确处理金融、科学计算等领域的复杂计算任务，确保数据的精确性和可靠性；前端实时计算引擎的设计和实现，充分利用了多核cpu的优势，提高了大规模、复杂的高精度计算任务的处理速度，从而提升了系统的整体性能和效率。

技术特征：

1.一种前端实时处理web应用数据的方法，其特征在于，所述方法包括：

2.根据权利要求1所述的一种前端实时处理web应用数据的方法，其特征在于，在获取后端推送的实时数据之前，所述方法还包括：

3.根据权利要求2所述的一种前端实时处理web应用数据的方法，其特征在于，在获取后端推送的实时数据之后，所述方法还包括：

4.根据权利要求1所述的一种前端实时处理web应用数据的方法，其特征在于，在获取后端推送的实时数据之前，所述方法还包括：

5.根据权利要求1所述的一种前端实时处理web应用数据的方法，其特征在于，通过分布式计算模型对所述实时数据进行精确计算，并汇总得到计算结果，具体包括：

6.根据权利要求4所述的一种前端实时处理web应用数据的方法，其特征在于，根据所述计算结果更新渲染页面，具体包括：

7.根据权利要求6所述的一种前端实时处理web应用数据的方法，其特征在于，在所述位于滚动位置的表格数据根据所述计算结果自动更新和渲染之后，所述方法还包括：

8.根据权利要求1所述的一种前端实时处理web应用数据的方法，其特征在于，在将所述计算结果和实时数据存入前端数据库和第一缓存区之后，所述方法还包括：

9.一种前端实时处理web应用数据的设备，其特征在于，所述设备包括：

10.一种前端实时处理web应用数据的非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：

技术总结本申请公开了一种前端实时处理Web应用数据的方法、设备及介质，涉及数据处理技术领域。方法包括：获取后端推送的实时数据，判断实时数据的类型，类型包括高精度数值类型和高频率数值类型；在实时数据为高精度数值类型的情况下，通过分布式计算模型和高精度数学库对实时数据进行精确计算，得到计算结果；将计算结果和实时数据存入前端数据库，并根据计算结果更新渲染页面。本申请通过上述方法实现了系统的高效运行，有效避免了重复计算，降低了系统的运算负载，提高了系统响应速度，对高频访问的中间结果进行存储，优化了资源利用效率。技术研发人员：王少华,李建刚,齐光鹏,武红强受保护的技术使用者：浪潮工创（山东）供应链科技有限公司技术研发日：技术公布日：2024/9/26