调整大小时的HTML画布性能

我设法将一个旧的OO处理草图翻译成HTML5画布：

我加了杜布先生的来记录画布上的表演

它在文档加载时按预期执行，但在尝试调整窗口大小时执行。帧率急剧下降

关于如何提高调整大小活动的性能，有什么建议吗

您还可以查看此实况演示：

（function（f，e）{“object”==typeof exports&“undefined”！==typeof module？module.exports=e（）：“function”==typeof define&&define.amd？define（e）：f.Stats=e（））（this，function（）{var f=function（）{function e（a）{c.appendChild（a.dom）；返回a}函数u（a）{for（var d=0；dg+1E3&（r.update（1E3*a/（c-g），100），g=c，a=0，t=t），var=d；内存性能更新（d.usedJSHeapSize）/
返回c}，更新：函数函数（k=这个.结束（）}，圆元素：c，集合模式：u}；f.pan=函数（e，f，f.pan，d.pan=函数（e，f，f.c，d.c，d.c，d.c，d.c，d.c，d.c，d.c，p=数学圆，数学圆，数学圆，a=g，a=g（窗口.设备设备设备设备设备设备设备设备设备设备设备设备的比例比率比率（比率）1）1，g（1），r=80*a，h=80*a，h=48*a，h=48*a，h=a，a，t=a，t=a，t=48*a，t，t=a，t=a，3*a，t=a，a，t=a，t=a，a，v=a，v=a，v=2*a，v=a，v=2，a，v=a，a，a，"var b=q.getContext（“2d”）；b.font=“bold”+9*a+“px Helvetica，Arial，无衬线”；b.textb基线=“top”；b.fillStyle=l；b.fillRect（0,0，r，h）；b.fillStyle=f；b.fillText（e，t，v）；
b、 （d，m，n，n，p）d，m，m，n，n，p；b.fills；b.fillRect（d，m，n，n，p）b.fillRect（d，m，m，n，n，n，n，p；b.fill风格=l；b.fill风格=l；b.fill形式=1；b.fill要么（0，0，0，0，r，r，r，r，m，n，n，n，n，n，n，p；b.风格=f；f；b.风格=f；f；f；f；b.f；b.f；填充文本（f）f；b.填充文本（g（g）（f）f）f）f）f；b.填充文本（g.填充文本（g（g（g（g（g）（g）（g）（g）（g）（g）（g）（h）（g）（g）（h）（g）（h）（g）（g）（h）（g）（h）（h）（d+n-a，m，a，p）；b.fillStyle=l；b.globalAlpha=0.9；b.fillRect（d+n-a，m，a，g（（1-h/w）*p））}}}；返回f}）；
var canvas=document.getElementById（“内部标题-canvas”）；
if（canvas.getContext）{
var context=canvas.getContext（“2d”）；
}
addEventListener（“加载”，init，false）；
window.addEventListener(
“调整大小”，
函数（）{
clearTimeout（初始化）；
setTimeout（init，500）；
},
假的
);
//初始化
函数init（）{
净风险值=未定义；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var nodesLength=Math.floor（canvas.width*canvas.height/2000）；
//节点
net=新net（）；
net.populate（nodesLength）；
window.requestAnimationFrame（渲染）；
函数render（）{
net.update（）；
net.draw（）；
net.connect（50）；
window.requestAnimationFrame（渲染）；
}
}
//网
班级网络{
构造函数（）{
this.nodes=[]；
this.length=未定义；
}
填充（长度）{
这个长度=长度；
对于（变量i=0；icanvas.width | | this.x<0）{
这个.x=0；
}
}
画（）{
var alpha=1-此深度；
context.beginPath（）；
弧（this.x，this.y，this.radius，0，2*Math.PI，false）；
context.fillStyle=“rgba（255255255，“+alpha+””）；
context.fill（）；
}
}
//助手
函数getRandom（最小值、最大值）{
返回Math.random（）*（max-min）+min；
}
//统计数据
var stats=newstats（）；
统计显示面板（0）；
document.body.appendChild（stats.dom）；
函数animate（）{
stats.begin（）；
stats.end（）；
请求动画帧（动画）；
}
请求动画帧（动画）；

正文{
保证金：0；
}

---

清除requestAnimationFrame后，最重要的提升是：

var rafID = null; //scoping requestAnimationFrame request-ID
//...
//inside resize-callback
window.cancelAnimationFrame(rafID);
...
//inside init() + inside render()
rafID = window.requestAnimationFrame(render); 

通过这种方式，我们确保浏览器不再试图更新旧实例

（function（f，e）{“object”==typeof exports&“undefined”！==typeof module？module.exports=e（）：“function”==typeof define&&define.amd？define（e）：f.Stats=e（））（this，function（）{var f=function（）{function e（a）{c.appendChild（a.dom）；返回a}函数u（a）{for（var d=0；dg+1E3&（r.update（1E3*a/（c-g），100），g=c，a=0，t=t），var=d；内存性能更新（d.usedJSHeapSize）/
返回c}，更新：函数函数（k=这个.结束（）}，圆元素：c，集合模式：u}；f.pan=函数（e，f，f.pan，d.pan=函数（e，f，f.c，d.c，d.c，d.c，d.c，d.c，d.c，d.c，p=数学圆，数学圆，数学圆，a=g，a=g（窗口.设备设备设备设备设备设备设备设备设备设备设备设备的比例比率比率（比率）1）1，g（1），r=80*a，h=80*a，h=48*a，h=48*a，h=a，a，t=a，t=a，t=48*a，t，t=a，t=a，3*a，t=a，a，t=a，t=a，a，v=a，v=a，v=2*a，v=a，v=2，a，v=a，a，a，"var b=q.getContext（“2d”）；b.font=“bold”+9*a+“px Helvetica，Arial，无衬线”；b.textb基线=“top”；b.fillStyle=l；b.fillRect（0,0，r，h）；b.fillStyle=f；b.fillText（e，t，v）；
b、 fillRect（d，m，n，p）；b.fillStyle=l；b.globalAlpha=.9；b.fillRect（d，m，n，p）；返回{dom:q，update:function（h，w）{c=Math.min（c，h）；k=Math.max（k，h）；b.fillStyle=