3.31 日 开发问题的记录
好久没有写博客了,之前也没有养成这种好的习惯。现在开始每天记录一下,增加自己的文字梳理和总结能力吧。
今天说一说开发上的遇到的问题,我之前做了一个矩阵状态功能的显示页面。其方式为相应的通道和信号的连线展示关系。我是用canvas实现的,但是此页面如果一直运行的话会导致 浏览器的内存不断升高,产生内存泄漏问题,导致浏览器性能的紊乱,出现连线不显示的情况。查了一些资料,说是canvas自身就是比较消耗性能,因为我要做的是实时监控的,所以每隔10秒,我就会过更新并且重新绘制一下画布。
![矩阵连线页面](https://img-blog.csdnimg.cn/20200331182346459.png?x-oss-
process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4MTUzMw==,size_16,color_FFFFFF,t_70)
解决方法:
看了有关canvas的优化问题,首先在代码上进行合理的调用,去除无关的重复调用消耗性能,如过存在其静态背景的话可以采用隔屏操作,我这变需要的就是判断每次请求的数据是否一致,一致的话不需要做重绘处理,不一致或者数据发生变化的话做重绘处理,用这种最简单基本的方法来做优化。
总结:下次,学习到的问题及时总结。
ct.width=width; ct.height=height; //重新赋值长宽清空画布 ctx.lineWidth=5; // 线宽 ctx.lineCap="rou