我有一个“弹跳球”项目，我在 Canvas 上绘制 150 个粒子，每次重绘时，它都会重新计算粒子位置，并验证是否有任何粒子位于 Angular 落，以反转其迭代器。
但事实是，这个项目有一个并非所有“弹跳球”项目都有的因素。球需要在 map 范围内弹跳。
因此，当我创建 Canvas 时，我还使用 SVG 来迭代像素并创建 x 轴(左右)每个边界的数组，这样我的粒子就会准确地知道它们需要反弹的位置。
非常好，非常好，效果很好，但是我的 Canvas 500px 高，因此需要迭代 500 次，并使用很多条件来防止奇怪的行为，这乘以 150粒子，以及每次重绘。
它已经变得非常贪婪，我需要提高性能，所以，这是我的碰撞系统代码
const colisionSystem = state => {
for (var b=0, hs=state.bounds.length; b<hs; b++) {
if(
state.bounds[b][0]
&& state.x - state.radius < state.bounds[b][0].x
&& state.y + state.radius > state.bounds[b][0].y
&& state.y - state.radius < state.bounds[b][0].y
) {
if (
state.bounds[b][0].x > 0
&& state.bounds[b][0].x < (state.widgetSize.width * 0.33)
&& state.bounds[b][0].y > (state.widgetSize.height * 0.33)
&& state.bounds[b][0].y < (state.widgetSize.width * 0.45)
) {
// middle left bottom corner at acre
state.x = state.radius + state.bounds[b][0].x;
state.vy *= -1;
} else if (
state.bounds[b][0].x > 0
&& state.bounds[b][0].x < (state.widgetSize.width * 0.098)
&& state.bounds[b][0].y > (state.widgetSize.height * 0.167)
&& state.bounds[b][0].y < (state.widgetSize.width * 0.206)
) {
// middle left top corner at acre
state.y = state.radius + state.bounds[b][0].y + 1;
state.vx *= -1;
state.vy *= -1;
} else {
state.x = state.radius + state.bounds[b][0].x;
state.vx *= -1;
}
if(state.oldAxis === state.x) {
state.y = state.y - 1;
} else {
state.oldAxis = state.x;
}
state.antiRebounce = false;
}
if(
state.bounds[b][1]
&& state.x + state.radius > state.bounds[b][1].x
&& state.y + state.radius > state.bounds[b][1].y
&& state.y - state.radius < state.bounds[b][1].y
) {
if (
state.bounds[b][1].x > (state.widgetSize.width * 0.555)
&& state.bounds[b][1].x < (state.widgetSize.width * 0.983)
&& state.bounds[b][1].y > 0
&& state.bounds[b][1].y < (state.widgetSize.width * 0.2098)
) {
// Top right corner
if(state.antiRebounce) {
state.vy *= -1;
state.antiRebounce = false;
} else {
state.antiRebounce = true;
}
state.y = state.bounds[b][1].y + state.radius + 1;
state.vy *= -1;
}
if (
state.bounds[b][1].x > (state.widgetSize.width * 0.604)
&& state.bounds[b][1].x < (state.widgetSize.width * 0.827)
&& state.bounds[b][1].y > (state.widgetSize.width * 0.665)
&& state.bounds[b][1].y < (state.widgetSize.width * 0.778)
) {
// bottom right corner
state.vy *= -1;
} else {
state.vx *= -1;
state.x = state.bounds[b][1].x - state.radius;
}
if(state.oldAxis === state.x) {
state.y = state.y - 1;
} else {
state.oldAxis = state.x;
}
}
}
if (state.y + state.radius > state.widgetSize.height) {
state.vy *= -1;
state.y = state.widgetSize.height - state.radius;
}
if (state.y - state.radius < 0) {
state.vy *= -1;
state.y = state.radius;
}
return state;
}
export default colisionSystem;
那么，问题是，有什么实用的建议来改进这段代码本身吗？
最佳答案
您有 500 * 150 个粒子 (750000)，对于 JS 应用程序来说，这数量太大了，坦率地说，太多了。 (但是你说 150 个粒子，所以我对你在做什么有点困惑)
要提高函数的性能，您可以使用一些简单的经验法则。
数组查找比直接引用慢。
即
// a compound referance
state.bounds[b][1].x // find state, then bounds, then index b, then 1,then x
// if you have the common parts used frequently
var b1 = state.bounds[b][1]; // does all the lookups
b1.x; // but now only needs one lookup to get x
对于项目属性也是如此。每个 . 意味着一次额外的查找。通过创建临时变量来保存所有查找的结果，您可以获得很多额外的性能。
将其应用到您的代码中，您将得到
const colisionSystem = state => {
var w = state.widgetSize.width; // used many times in the loop
var h = state.widgetSize.height;
var x = state.x;
var y = state.y;
var r = state.radius;
for (var b = 0, hs = state.bounds.length; b < hs; b++) {
var bounds = state.bounds[b];
if (bounds[0]){
var b0 = bounds[0];
if( x - r < b0.x && y + r > b0.y && y - r < b0.y) {
if ( b0.x > 0 && b0.x < (w * 0.33) && b0.y > (h * 0.33) && b0.y < (w * 0.45)) {
x = r + b0.x; // middle left bottom corner at acre
state.vy *= -1;
} else if ( b0.x > 0 && b0.x < (w * 0.098) && b0.y > (h * 0.167) && b0.y < (w * 0.206)) {
y = r + b0.y + 1; // middle left top corner at acre
state.vx *= -1;
state.vy *= -1;
} else {
x = r + b0.x;
state.vx *= -1;
}
if (state.oldAxis === x) {
y -= 1;
} else {
state.oldAxis = x;
}
state.antiRebounce = false;
}
}
if (bounds[1]){
var b1 = bounds[1];
if( x + r > b1.x && y + r > b1.y && y - r < b1.y) {
if ( b1.x > (w * 0.555) && b1.x < (w * 0.983) && b1.y > 0 && b1.y < (w * 0.2098)) {
if (state.antiRebounce) { // Top right corner
state.vy *= -1;
state.antiRebounce = false;
} else {
state.antiRebounce = true;
}
y = b1.y + r + 1;
state.vy *= -1;
}
if (b1.x > (w * 0.604) && b1.x < (w * 0.827) && b1.y > (w * 0.665) && b1.y < (w * 0.778)) {
state.vy *= -1; // bottom right corner
} else {
state.vx *= -1;
x = b1.x - r;
}
if (state.oldAxis === x) {
y = y - 1;
} else {
state.oldAxis = x;
}
}
}
}
if (y + r > h) {
state.vy *= -1;
y = h - r;
} else if (y - r < 0) { // added else. Cant both happen at the same time?????
state.vy *= -1;
y = r;
}
state.y = y; // set state x,y to reflect any changes.
state.x = x;
return state;
}
通过用直接引用替换许多复合引用，您可以释放大量 CPU 时间，但这取决于数据。如果上面的代码花费更多时间尽早拒绝条件语句，您将不会获得太多好处，并且如果仅在调用 colisionSystem 一次时传递bounds[1],bounds[0]条件，您将不会获得太多好处。不会获得任何好处，并且性能可能会略有下降。对于循环中的项目数也是如此，如果循环迭代许多项目，您会看到改进，如果循环只有 1 或 2 个项目，您将看不到任何好处，而对于一个项目，您会看到性能下降.
注意，我没有仔细重构，上面的代码可能有一些错别字，只是一个例子。
你说你用SVG来迭代？？？
I also use a SVG to iterate over the pixels
经验法则#2。 DOM 很慢，SVG 是 DOM 的一部分，在我的书中，SVG 实际上是 VSG(非常慢的图形)，我想说，速度变慢的主要部分在于您使用 SVG 所做的任何事情。
关于javascript - 如何提高该功能的性能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40032461/