signalR.js实现实时数据推送(WEB端)以及页面优化
数据看板作为一个直观性较强的实时数据展示平台,在各个行业项目中都极有可能使用到。而作为一个web的初生牛犊,第一次设计制作看板程序,在这个过程中算是踩了不少的坑。下面我将对自己的整个编程经历分两点进行总结。
第一点:实时数据请求
在进行看板项目编辑初期,由于想法太单纯,想着还是采用基本的ajax数据请求技术,每隔几秒钟请求一次获取到新数据,从而对页面进行数据渲染,所以,在没有跟后台开发人员进行更加合理的技术探讨情况下便开始了看板设计。页面布局设计完成之后,开始了实时数据请求渲染,然而,问题来了。一个看板分了七八个模块,每隔模块又是单独的接口,在面对每隔两三秒发出一次请求的情况下,终于,系统崩溃了。jquery的ajax请求技术,在每次请求的时候都会创建一个XMLHttpRequest对象,由于接口的堵塞,又导致了数据得不得更新。想着jquery的ajax数据请求有个complete回调函数,不管请求成功与否都会使用设个函数,于是,对代码进行了修改。demo方式如下:
function getMessage () {
$.ajax({
url: 'urlAddress',
type: 'get',
async: true,
cache: false,
dataType: 'json',
success: function(){},
error: function(){},
complete: function (XTR, TS) {
XTR = null; // 释放XMLHttpRequest对象
setTimeout(getMessage, 3000); // 使用setTimeout代替setInterval
}
})
}
经过请求代码的改进,本以为完事了,结果然并卵,经过一段时间之后,页面卡死,请求通道阻塞。于是度娘一下,了解到了问题的大郅所在。频繁的请求占用着带宽,页面渲染也需要时间,函数执行计算公式也占用着时间,虽然这些时间使用不多,但是数据无法获取更新,页面又出现假死状态。于是便跟后台商量着放弃ajax的实时请求,采用其他方法进行数据获取。最终,结合编程语言,了解到了signalR的实时数据推送服务。从原来的主动请求变成了被动获取数据,将前端压力移交给了后台。
signalR实时数据推送web端方法如下:
// 在离屏 canvas 上绘制
var offscreencanvas = document.createElement('canvas');
// 宽高赋值为想要的图片尺寸
offscreencanvas.width = dWidth;
offscreencanvas.height = dHeight;
// 裁剪
offscreencanvas.getContext('2d').drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// 在视图canvas中绘制
viewcontext.drawImage(canvas, x, y);
2、分层画布
多个相互重叠的canvas根据变化程度分开渲染,越复杂的场景越适合。
3、一次性绘制
绘制操作的性能开销较高,可以创建一个包含所有线条的路径,然后通过单个绘制路径调用进行绘制。
4、使用requestAnimationFrame执行动画
5、清空画布
6、减少使用canvas的API