Javascript 如何加快画布应用程序的速度？如何提高内存使用率？

我尝试学习HTML5Canvas已经有一段时间了，我制作了一个简短的脚本，允许将字符串传递到对象中，然后将其显示到画布上。但是，它的性能非常不一致，我有一些想法

使用fillRect时，使用beginPath和endPath是否有利于性能？据我所知，它们实际上只适用于线路

更重要的是，它看起来有一些严重的内存泄漏问题，我猜当垃圾收集开始时，程序就会发出嘎嘎声。我试着阅读javascript是如何处理内存分配的，但老实说，这完全超出了我的理解范围。我在循环中没有任何变量声明（除了for循环开始时，但我尝试了更改，但没有看到任何改进），但是我在画布上绘制的对象位于函数内部，所以每次调用该对象时，它可能会生成一组新的变量

简而言之，我不知道如何让javascript工作得更快，处理内存更智能

指向应用程序本身的链接

下面是获取字符串并将其显示到画布的代码，后面是创建对象并将显示信息传递到其中的html和js：

/*screen.js*/
功能屏幕（id、pSize、w、h）{
像素大小；
屏幕宽度；
屏幕高度；
var帆布；
var语境；
变量调色板=新数组（16）；
调色板=[
"#000000", "#111111", "#222222", "#333333", "#444444", "#555555", "#666666", "#777777",
“#8888888”、“#999999”、“#AAAAA”、“#BBBBBB”、“#CCCCCC”、“#DDDDDD”、“#EEEEEE”、“#FFFF”
];
this.setScreenAttributes=函数（pSize，w，h）{
像素大小=pSize；
屏幕宽度=w；
屏幕高度=h；
canvas.setAttribute（“宽度”，屏幕宽度*像素大小）；
canvas.setAttribute（“高度”，屏幕高度*像素大小）；
log（“将屏幕属性设置为“+屏幕宽度*像素大小+”x“+屏幕高度*像素大小”）；
};
this.buildScreen=函数（id、pSize、w、h）{
canvas=document.getElementById（id）；
context=canvas.getContext（“2d”）；
本节设置了筛选属性（pSize、w、h）；
控制台日志（“构建屏幕”+id）；
};
this.setPalette=函数（pal）{
如果（pal.length==16）{
对于（变量i=0；i<16；i++）
调色板[i]=pal[i]；
}否则
log（“错误，调色板必须包含16种颜色”）；
};
this.returnWidth=函数（）{
返回屏幕宽度；
};
this.returnHeight=函数（）{
返回屏幕高度；
};
this.draw16=函数（str）{
如果（str.length==屏幕宽度*屏幕高度）{
clearRect（0，0，屏幕宽度*像素大小，屏幕高度*像素大小）；
对于（变量y=0；y<屏幕高度；y++）{
对于（变量x=0；x