-
现象
windows 和 linux 系统网页挂载svg文件，出现cpu占比逐步增加的情况，时间过长后会发现页面浏览操作变得卡顿，鼠标事件响应变得很慢。最后可能导致系统崩溃。
-
原因
因为代码是由外包人员编写，因此找错的过程变得比较复杂，最终定位到以下的代码：
const timeLine = sureMinTime(); timeLine > 0 && setInterval(() => { lineChartT(); }, timeLine * 1000); function sureMinTime() { let node = document.rootElement || document.getElementsByTagName("svg")[0]; let nodeAction = node.querySelectorAll("g[TypeName = 'chartT']"); let arr = []; nodeAction.forEach(e => { //... arr.push(((end - start) / Math.max(...arrMiddle)).toFixed(3) - 0); }) return Math.min(...arr) || 0; }问题出在
return Math.min(...arr) || 0;这句代码上。当arr的数组长度为0时，Math.min(...[])返回的结果是Infinity。而Infinity || 0返回的也是Infinity。Infinity > 0返回true, 且Infinity * 1000依旧是Infinity(正无穷大)。setTimeout/setInterval delay数值过大问题,如果 delay 是 Infinity 值，非数字（NaN）值或负值，则将超时设置为零，因此导致上面的定时器无延迟立即执行（这个是问题的根本原因）。
-
修改
function sureMinTime() { let node = document.rootElement || document.getElementsByTagName("svg")[0]; let nodeAction = node.querySelectorAll("g[TypeName = 'chartT']"); let arr = []; nodeAction.forEach(e => { //... arr.push(((end - start) / Math.max(...arrMiddle)).toFixed(3) - 0); }) if (arr.length && Math.min(...arr) > 0) { return Math.min(...arr) || 0; } else { return 0; } }
