大屏Web可视化缓存渲染与动态交互研究

Echarts大屏通信渲染机制

大屏可视化目的是为了对复杂数据进行直观清晰的展示。但由于大屏内的组件较稳固、相互进行动态交互的能力较弱，因此必须要基于可交互通信机制，来设计个性化大屏，用户才能更加明白数据间的潜在关系。大屏可视化通过大屏组件来协调通信，进而渲染整个页面，展示在用户眼中

数据缓存机制与方法研究

基于强缓存和协商缓存的渲染机制

数据缓存机制适用于在用户加载页面时，可直接从本地缓存获取，而不必因为过多的请求浪费网络带宽资源。从而加快浏览器呈现网页的速度，减少信道大量数据频繁传输

浏览器缓存原理是将第一次获取的数据存放在浏览器本地。当下次向服务器发送相同的请求，浏览器则会判断本地是否有缓存资源、是否过期等信息。若本地缓存内有相应资源，则率先使用本地缓存的资源，减少网络资源浪费

浏览器缓存主要分为强缓存和协商缓存。当浏览器第二次发起相同url的时候，强缓存会直接在浏览器本地缓存中判断相应资源是否过期。若未到期，则从本地中请求资源。若资源已经到期，则向服务器发送 URL。强缓存标志为 Expires、Cachecontrol

协商缓存是当浏览器发起相同的请求时候，会向后端发起一次申请，询问Web 服务器资源是否到期。Web 服务器若表示资源未到期，则从本地中拿到资源。若 Web 服务器表示资源到期，则向服务器再次发起 URL 申请

基于WebStorage的存储机制

Cookie 适用于判断用户登录网站信息，记住用户密码，以便下次自动登录等
LocalStorage 适用于本地数据需要长期保存的情况
SessionStorage 适用于比较敏感、机密的账号一次性登录

缓存机制下的大屏渲染优化

现今对于Web端性能优化主要方式聚焦于在如何降低HTTP请求，优化网络协议弱势以及通过负载均衡技术分析和处理高并发请求等方面。Yan等人提出了加载外部CDN数据、重新优化组件打包流程、以及路由延迟加载的方法优化页面渲染时间

组件化动态交互机制研究

组件化分离复用与协同机制

在可视化大屏展示中，由于页面逻辑复杂，每一种图表都有不同的定位、数据以及样式。但大多数分衍出来的图表又有相同之处，可视化图表之间复用性低，可衍生形式差，且难以维护
通过对组件化思想的深层挖掘和对分离复用模式的深入研究，设计了以组件化思想为基础的分离复用方法

组件化分离复用思想以一种抽象树的形式，将复杂的业务组件分离为一个个独立可复用的小组件。通过组件通信的方式协同所有小组件，形成以小组件为核心的复杂关系方位网，进而实现“难啃的骨头”的复杂业务逻辑

组件化触发通信与更新机制

在大屏可视化场景中，由于组件之间是通过分离复用的协同机制设计的，因此组件之间需要利用通信来进行交互。组件通信方式主要为父子通信和兄弟通信。为实现高效可靠的组件间数据通信，所设计的组件化数据流向模型如下图所示

组件间联动协同交互更新设计

在组件化的基础之上，将页面展示大屏组件定义为可视化组件。每个可视化组件包含样式配置、事件监听、数据绑定以及其他配置。进行事件触发并执行回调函数的组件定义为交互组件。将交互组件模型化为依赖关系节点，负责组件之间交互事件的处理。可视化组件与交互组件之间通过绑定 id 以实现动态交互。当 DOM 挂载完成，用户可在可视化页面通过点击按钮、键盘事件、鼠标事件等实现动态交互。当组件监听到用户事件触发，对每个节点进行解析，并逐渐形成一张以关系节点为基础的节点关系网。各节点与组件之间通过关系组网以数据流的方式进行事件处理和回调执行，将回调信息由关系节点传递给每个组件。进而可视化组件得到数据信息，重新渲染更新大屏页面,如下图所示

基于Websocket的动态实时化交互设计