一种毫秒级可视化页面、数据渲染展示的实现方式

目录

一、通用实现方式

二、解决方案

三、方案详情

页面元素渲染

元素数据获取

---

一、通用实现方式

        数据可视化技术目前在应用中越来越受到重视，通过可视化表示来传达数据见解。其主要目标是将大型数据集提取为可视化图形，以便轻松了解数据中的复杂关系。它经常与信息图形、统计图形和信息可视化等术语互换使用。可视化页面通过配置管理平台选择对应的图形样式，各个图形元素组合形成整个完整的页面，页面通根据组件调用频率获取数据，完成整体流程，实现实时数据更新

        可视化页面元素通过配置化平台配置，页面是通过各个组件组合而成，获取页面模板整体元素，目前主要采用的技术是根据请求URL，查询配置信息，组装输出页面模版，在从客户端页面中渲染展示页面元素，按照请求频率，查询接口获取数据信息。但是传统结构在页面响应速度欠缺

（1）、页面元素通过后台服务获取，页面元素渲染响应耗时，影响用户体验

（2）、页面元素组件的数据根据一定频率定期获取数据，当多个页面同时请求时，会造成请求量骤增，对服务造成压力

（3）、数据获取整个链路获取时间长，当高并发请求时，同一个组件数据都打到应用服务器，增加应用服务负载，影响使用率

二、解决方案

主要采用nginx+lua模板引起+redis以及调度任务技术，使用双层维度缓存模式获取数据。客户端根据请求快速响应页面元素展示，系统整体架构图如下所示：

三、方案详情

客户端页面获取整体分为两个维度：页面元素渲染、元素数据获取展示

1. 页面元素渲染

   1. 用户浏览的页面元素通过可视化配置管理系统配置，完成自动化组件配置，生成页面访问url
   2. 用户访问页面url，请求到nginx服务，在nginx服务中通过lua-resty-template模板引擎，获取模版信息，在通过lua调用redis服务获取页面元素详情，用来动态渲染lua模板，通过redis获取数据时，有两个情况
      1. 缓存中存在：
         1. 从redis缓存中，根据当前最新版本，获取该页面组件组合数据，动态渲染lua模版，最终通过nginx api输出页面信息，整个流程完成
         2. 实现如下：

         3. 

      2. 缓存中不存在：
         1. 缓存不存在直接调用可视化管理平台，获取当前版本下页面元素组合数据，并将结果存储在Redis中
         2. 获取数据后渲染页面模版，页面展示
      3. Redis缓存采用hash结构存储，用来保存不同的版本信息，当页面元素修改时，根据版本信息，调用新的数据，存储在Redis中，使用hash数据结构存储，完成版本验证、灰度发布测试

2. 元素数据获取

   1. 页面中每个图形元素均有对应的数据展示，不同的数据来源不同，当页面元素请求获取数据时，通过nginx服务，从redis缓存中获取，此时也存在两种情况：
      1. 数据缓存中存在
         1. 对应页面元素数据存在时，直接返回数据，结束本次请求，最终页面展示数据信息，后续每一次请求直接在缓存中获取
         2. 具体流程如下：

         3. 

      2. 数据缓存中不存在
         1. 通过nginx负载均衡，调用到可视化管理平台，通过mysql数据库，查询该组件需要调用的服务，同步判断该页面元素组件元素展示的频率，如果是按照频率调用展示的数据，通知调度系统，调度系统按照数据请求频率，将最新的数据更新到redis缓存中，后续请求直接从redis中获取最新数据

         2. 

   2. 调度系统按照页面元素配置的数据请求频率，定期去请求应用服务，为了防止当页面无访问时，调度任务还在定时调度应用服务，需要判断元素数据缓存key是否存在，当不存在时，停止调度业务应用获取数据，元素数据缓存key在用户访问时，会按照请求频率时间间隔设置redis的缓存时间，这样当没有用户访问时，缓存就失效，防止资源浪费