3.31 日 开发使用canvas性能优化问题的记录和解决

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