有没有办法进一步简化这些javascript函数？

我在画布上创建了很多小点，在创建过程中会得到它们的x、y坐标和半径，以便稍后用于我创建的碰撞函数。这会导致页面变得无响应，即使我去掉了它的间隔。我认为在没有响应之前处理函数太长了。任何帮助都将不胜感激。这是与我的问题相关的代码

var foodX=[]；//点的x坐标的数组
var foodY=[]；//点的y坐标的数组
var foodR=[]；//点半径的数组
var点=[]//数组来存储用于创建点以供以后删除的变量
函数drawFood（）{//绘制画布上的所有点
（VaR食品＝0；食物我邀请您考虑更多地了解函数编程范例。
几年前我是一名游戏开发人员，我发现在FP中思考可以极大地清理我的代码，帮助我更好地概念化游戏对象

下面是用FP风格编写的代码问题的部分解决方案；我试图表达以下主要思想：

将您的食物对象视为属性集合，可以表示为单个JS对象
让行为（即绘制到屏幕）成为一个单独的功能，处理单个对象

分离行为和列表迭代（使用映射功能）
代码如下：


//假设ff：
//1.存在一个对象“ctx”，它知道如何绘制东西
//2.数组“colors”存在并包含您拥有的颜色
const ctx=document.createElement（'canvas'）.getContext（'2d'）
常量颜色=[‘蓝色’、‘红色’、‘黄色’、‘黑色’、‘银色’、‘灰色’、‘海军蓝’、‘水蓝’]
//函数“newRandomFood”返回一个食物对象，其属性是随机的
功能性食品（）{
返回{
x:randInt（010000），
y:randInt（010000），
r:randInt（3,5），
color:colors[randInt（0,7）]//使用我拥有的具有不同颜色的数组，因此我可以随机绘制不同的彩色点
}
}
//函数“drawFood”将给定的食物对象作为路径绘制到画布
功能食品（食品）{
ctx.beginPath（）；
ctx.arc（food.x，food.y，food.r，0，2*Math.PI）；//此变量将每个点绘制到画布上。方法不返回任何内容
ctx.fillStyle=food.color；
ctx.fill（）；
ctx.closePath（）；
}
//函数“randInt”在所选数字之间创建一个随机整数
函数randInt（min，max）{
min=数学单元（min）；
最大值=数学楼层（最大值）；
返回Math.floor（Math.random（）*（max-min））+min；
}
/*生产你的食物*/
const=Array（1000）//创建一个包含1000个元素的数组
.fill（“”）//用任何东西填充每个元素，这样迭代就不会跳过
.map（=>newRandomFood（））//用随机食物项填充每个元素
console.log（foods）//显示您拥有的所有食物对象
foods.map（food=>//对于每个食物项。。。
画食物（食物））/…画食物
当你画那么多点的时候，你需要对如何管理它们很聪明

绘制10000个圆弧并填充10000次是消耗性的。相反，尝试调用实际光栅化最小可能值的上下文方法，例如，将相同颜色的所有圆弧合并到一个子路径中。
就性能而言，最好的方法是按颜色对这些点进行排序，但通常看起来很奇怪

对于碰撞检测，您当前正在每次检查每个点。相反，请将您的点打包在网格中，每n个单元格中包含n个点。然后在checkCollision中，仅检查该单元格中的点（好的话，您还需要检查相邻的点）。
这样，可以避免每次检查时都检查场景中的所有点

这个网格的一个好处是，您还可以检查某些点是否被其他点隐藏，从而可以被绘图函数丢弃

这里是一个非常粗略的起点，在这里，图形将打包在一个子路径中共享相同颜色的连续圆弧中，并将它们打包到碰撞函数使用的网格中


var colors=generateColors（7）；
canvas.width=canvas.height=2000；
var ctx=canvas.getContext（'2d'）；
var栅格=发电机栅格（100100）；
var点=发电点（10000）；
var dirty=true；//用于知道何时需要重新绘制的标志
分数。forEach（putInGrid）；
//ToDo:标记隐藏点
addEventListener（'mousemove'，onmousemove）；
动漫（）；
函数生成器颜色（nb）{
var列表=[]；
对于（var i=0；iIt导致页面无响应我不完全确定它是否正常工作。为了使功能更加简化，页面不会无响应，该网站是否最好发布此消息？我一定错过了代码无法完全工作的部分。我删除了我的注释。您是否尝试过使用较小的循环和以一定的间隔分部分运行它以对抗页面无响应？我投票将这个问题作为离题题来结束，因为它属于这一点很好，但不会提高性能。而
ctx
是
document.createElement（'canvas'）.getContext（'2d'）
Hi@kaido，它帮助我优化了开发时间：（1）由于每个函数都有一个集中的作用域，所以概念化的速度更快，（2）由于更精细的代码，调试的速度更快，（3）单元测试能力，（4）多人协作更容易，因为依赖性更少。FP是表达坚实原则的一种好方法。是的，我同意，尽管我认为OOP也能满足所有这些要求，但这与问题无关。无论这段代码是以何种方式编写的，它总是会有原始海报所面临的性能问题现在的问题已经被问到了。@kaido-hmm既然你提到了，我明白你的意思了。这是一个开始