CN110377205A - 控制数据可视化大屏页面自动自适应频率的方法及装置 - Google Patents

Abstract

控制数据可视化大屏页面自动自适应频率的装置涉及信息技术领域。本发明由事件***，计时器，页面自适应信号触发器，时间窗口定义器组成。本发明的控制数据可视化大屏页面自动自适应频率的装置使用事件***监听onresize事件，使用时间窗口定义器定义触发页面刷新指令的时间窗口，使用计时器按照时间窗口的时常进行延时计时，使用页面自适应信号触发器来执行页面刷新指令，通过每次触发onresize事件计时器重新计时的方式达到有效控制大屏页面刷新次数的目的，通过时间窗口的设置兼顾了用户体验效果。

Description

控制数据可视化大屏页面自动自适应频率的方法及装置

技术领域

本发明涉及信息技术领域，尤其是软件开发领域。

背景技术

数据可视化页面有一个重要的分支即专门在一些专业设备上展示的页面，业内称之为大屏展示页面简称大屏页面。这类大屏页面展示的环境往往是高清的投影仪，或者是LED屏幕，或者是类似影院的巨幕环境下。

这种大屏页面在设计和开发中有着自身独有的特点，这些特点总结如下：

相关定义：浏览器的可视区间即浏览器展示内容的区间，可视区间不包含浏览器的地址栏、工具栏和滚动条这些元素。

特点1：浏览器展示大屏页面，大屏的内容往往会占满整个浏览器的可视区间，大屏页面不能出现垂直和水平的滚动条；

特点2：大屏页面需要自适应屏幕的功能，这样能保证大屏页面不同类型的展示介质下都能保证正确并且美观的展示效果。

由以上两个特点，大屏的技术实现上会有如下技术要求，具体如下：

要求1：大屏页面要禁止滚动条的出现；

要求2：大屏页面需要获取浏览器可视区间的宽度和高度，大屏的内容展示都以此可视区间的大小来进行排版布局以及相关内容展示的编排；

要求3：需要动态监测浏览器可视化区间宽高的方法，当发现浏览器可视化区间大小发生变化后，页面执行重排页面的方法，让页面的展示内容根据实际可视化区间的宽度和高度进行重新布局。

在业界解决浏览器固定可视化区间的方法基本都是统一的，即使用css技术对于页面的body元素进行样式控制。代码中Overflow属性值为hidden，这就让body元素在水平和垂直方向都禁止使用滚动条。有些场景下页面还会在body元素上设置width和height都为100%，这样就使得浏览器的可视区间进一步限制宽度和高度。

关于页面自适应页面可视化区间的技术手段，页面一般都是使用页面window下的onresize事件，onresize事件在浏览器的宽度和高度发生1px的变化都会被成功触发。

页面监测到浏览器宽度和高度变化后，页面就需要调用onresize的回调函数将页面的展示元素进行重新排版布局，页面重新排版技术是页面整个自适应的技术难点所在，本发明人收集业界的处理方法汇总下来大致有两种方案，具体如下：

方案1：当页面被通知要执行页面重新布局操作后，开发人员会将页面每一个需要重排的元素都进行重新的排版布局操作。该方案功能实现起来特别的繁琐和复杂，研发人员需要非常细致的梳理出页面每个需要重新排版布局的元素，大到页面里比较显眼的用于排版布局的容器，小到一个标题甚至一个小图标都要进行重新的排版布局，如果碰到页面使用不同类型的排版布局技术，那么页面重排还需要兼容排版布局的差异性，采用此方案会让页面里存在大量专门用于页面自适应的代码，这也导致整个页面的代码变得臃肿，代码的健壮性和可维护性都大大的降低。因此在实际生产应用中，该方案基本都是做有限的大屏自适应操作即保证重要的排版布局进行重排，细微的展示元素往往会被忽略。不过该方案有一个优势，这个优势就是页面的重新排版布局操作不需要重新刷新页面，这也是该方案虽然繁琐，但是任然被广泛使用的一个重要原因。

方案2：页面展示元素的排版布局跟浏览器的可视化区间的大小密切相关，页面展示元素自适应浏览器的可视化区间的大小，在业界一般有两种实现方案，第一种方案是页面展示元素的宽高以及位置通过比率来进行定位，例如：CSS的盒子模型里width或者height使用百分比，css的flex布局使用flex元素设置元素在可视化区间里的比例；第二种方案就是页面可视化元素都采用相对于body元素的绝对定位，在一个参考的可视化区间下动态计算展示元素的宽度、高度以及top和left的值。

方案2触发页面展示元素重排的方法就是让页面重新刷新，如下代码所示：

window.onresize=function(){

window.location.reload()

}。

方案2操作简单，代码也很容易在不同大屏页面里进行复用，因此它是比方案1更加常见和通用的展示元素自适应解决方案。

所有屏幕自适应方案，页面都会调用window的onresize方法，该方法只要浏览器的宽度或者高度发生了1px的变化都会被触发。这样的事件所带来的问题就是每次大屏页面的自动自适应都会被调用多次，如果自适应方案按方案2执行，那么每次自适应就会多次请求服务端数据，这就导致页面加载更慢，在一些极端场景下，甚至会导致页面很长时间都无法正常显示甚至导致浏览器的奔溃；就算页面加载性能没有问题，短时间快速的触发屏幕自适应功能，页面会产生严重的抖动现象，这样大屏页面的可视化效果大打折扣。

如何有效的控制页面自动自适应的次数也是优化大屏页面自适应的一个重要问题，本发明的控制数据可视化大屏页面自动自适应频率的装置使用事件***监听onresize事件，使用时间窗口定义器定义触发页面刷新指令的时间窗口，使用计时器按照时间窗口的时常进行延时计时，使用页面自适应信号触发器来执行页面刷新指令，通过每次触发onresize事件计时器重新计时的方式达到有效控制大屏页面刷新次数的目的，通过时间窗口的设置兼顾了用户体验效果。

介绍一个常见的解决频繁触发自动更新页面操作的方案，这也是本发明产生之前的解决页面频繁触犯自动刷新的一种方案，具体内容如下：

该方案方式是让页面的自动刷新操作触发定义一个固定的时间间隔，例如1000毫秒（1秒）。也就是不管用户调整页面大小的时间有多长，每隔一个固定时间就触发一次页面自适应功能，该方法在实际生产中有如下问题：

问题1：如果间隔时间太短了，虽然页面减少了自动刷新的次数，但是页面抖动和频繁加载的情况任然比较严重

问题2：如果间隔时间过长，用户会明显感觉到页面加载的延迟，这时候用户会认为***的性能有问题

问题3：如何确定一个适中的时间间隔，这又是一个非常困难的事情，最主要的原因是服务端相应的时间问题，服务端相应浏览器端的时间也影响到时间间隔值的设定，例如如果服务端响应很快，间隔时间的合理值应该设定短一些，服务端响应时间过长那么间隔时间应该设定长点，但是谁都无法保证这个时间什么时候会长什么时候会短，因此适中的时间间隔都是随机动态根本无法控制。

共有技术描述

onresize 事件

定义和用法：

onresize 事件会在窗口或框架被调整大小时发生；

语法：

onresize="SomeJavaScriptCode"。

发明内容

控制数据可视化大屏页面自动自适应频率的装置，由事件***，计时器，页面自适应信号触发器，时间窗口定义器组成；

由事件***加入onresize事件，onresize指向计时器，将事件***加入到大屏展示页面的语句中，完成大屏展示页面在改变页面大小时触发事件***的onresize事件，并指向计时器；

由时间窗口定义器定义计时器的计时时长，由计时器加载时间窗口定义器所定义的计时时长，将计时器加入到大屏展示页面的语句中，完成onresize事件发生后直接指向计时器并开始计时的功能；

由页面自适应信号触发器完成发出页面自适应的指令，并将页面自适应信号触发器加载到大屏展示页面中计时器语句之后；达到计时器完成计时时长后触发页面自适应信号触发器的功能；

时间窗口定义器定义计时器的计时时长的取值范围在200毫秒到500毫秒之间。

有益效果

Onresize会在极其短的时间，不到0.01毫秒反复被触发，这个值是远小于时间窗口时间delay的时间，当onresize第一次被触发时候，计时器setTimeout就按照时间窗口时间延时调用页面自适应信号触发器触发屏幕自适应，这时候如果onresize再次被触发，将清除原来定义的计时器setTimeout延时执行的操作，然后将新的自适应操作使用计时器setTimeout和时间窗口时间delay重新定义一遍，这样的重复操作会不断的重复进行，这样设计可以得到如下的操作结果：

结果1：如果用户频繁调整浏览器的大小，这个时间很长那怕是达到了几十秒，那么用户在调整浏览器的过程中，页面也不会触发页面自适应的功能；

结果2：如果用户调整完了浏览器大小，我们可以在一个合理的时间间隔内马上触发页面自动刷新操作，按照本发明人的实践经验，300毫秒作用的延时操作，用户基本会感到页面反应时间很快，此外用户如果有间隔的调整浏览器大小，300毫秒左右时间是人力很难完成一个连续的操作。

页面自适应的功能是数据可视化大屏页面的一个最基础的功能，为了自适应频繁的刷新页面或者是频繁的重绘页面，都会让影响到页面的展示效果，如果频繁的调用页面自适应功能延时了页面加载效率，这往往是大屏客户经常反馈至页面的重要问题之一，本发明的方案充分的解决了用户体验的问题，让大屏不在被频繁刷新而影响其展示的效果。

如果页面的自适应采取reload的重新刷新页面方式，我们看到上文中onresize每隔0.01毫秒就会被触发，这就让一个简单的屏幕自适应过程产生数以百计的和服务端交互的请求，这是一种严重的资源浪费，而且本发明人在生产实践中，这样的短时间发送大量的前端http请求也是某些页面加载缓慢，页面奔溃的重要原因，因此本发明优化了项目的资源使用，同时还提升了***的稳定性和健壮性。

附图说明

图1是本发明的***流程图；

图2是计时器的代码示例图。

具体实施方式

实施例一

参看图1控制数据可视化大屏页面自动自适应频率的装置，由事件***1，计时器2，页面自适应信号触发器3，时间窗口定义器4组成；

由事件***1加入onresize事件，onresize指向计时器2，将事件***1加入到大屏展示页面的语句中，完成大屏展示页面在改变页面大小时触发事件***1的onresize事件，并指向计时器2；

由时间窗口定义器4定义计时器2的计时时长，由计时器2加载时间窗口定义器4所定义的计时时长，将计时器2加入到大屏展示页面的语句中，完成onresize事件发生后直接指向计时器2并开始计时的功能；

由页面自适应信号触发器3发出页面自适应的指令，并将页面自适应信号触发器3加载到大屏展示页面中计时器2语句之后；达到计时器2完成计时时长后触发页面自适应信号触发器3的功能；

时间窗口定义器4定义计时器2的计时时长的取值范围在200毫秒到500毫秒之间。

实施例二

本发明人调研了onresize被触发的时间频率，发现onresize的调用频繁度的极限不会超过0.01毫秒。

一般而言人眼对于300毫秒以下的刷新页面操作都会感觉页面明显的加载延时，结合这两个参考数据，本发明采取如下方法来解决所论述的技术难题，方法如下：

本发明规定一个自动刷新页面的时间间隔，这个时间间隔合理值在200毫秒和500毫秒之间，这个时间间隔就是计时时长，在本发明里由时间窗口定义器4定义。

计时器2是按照时间窗口定义器4定义的计时时长通过回调函数的方式调用页面自适应信号触发器3的功能，图2所示是计时器2的实现代码。

图2的fn参数是调用页面自适应信号触发器3的方法，delay是时间窗口定义器4定义的计时器2的计时时长。

Claims (1)

1.控制数据可视化大屏页面自动自适应频率的装置，其特征在于由事件***，计时器，页面自适应信号触发器，时间窗口定义器组成；

由事件***加入onresize事件，onresize指向计时器，将事件***加入到大屏展示页面的语句中，完成大屏展示页面在改变页面大小时触发事件***的onresize事件，并指向计时器；

由时间窗口定义器定义计时器的计时时长，由计时器加载时间窗口定义器所定义的计时时长，将计时器加入到大屏展示页面的语句中，完成onresize事件发生后直接指向计时器并开始计时的功能；

由页面自适应信号触发器完成发出页面自适应的指令，并将页面自适应信号触发器加载到大屏展示页面中计时器语句之后；达到计时器完成计时时长后触发页面自适应信号触发器的功能；

时间窗口定义器定义计时器的计时时长的取值范围在200毫秒到500毫秒之间。