JavaScript数组优化以提高性能
JavaScript array optimization to improve performance
Im使用WebGL创建将落在平面上的球体。这些球体存储在一个名为ballArray的数组中,并在计时器上连续创建。如果任何球体超过某个-y值,它们将从场景和数组中移除。我遇到的问题是,当我对每一帧调用render()时,所以如果ball0已经被删除,我的循环仍然在寻找它,但程序运行的方式是,无论球在数组中的位置如何,任何球都可能掉落。我的做法是:
var ballArray =[];
var i = 0;
var temp;
function createBall()
{
temp = Math.random() * (4 - 1) + 1; //creates the size of the ball
ball = new Physijs.SphereMesh(
new THREE.SphereGeometry(temp,16,16),
Physijs.createMaterial(new THREE.MeshLambertMaterial(
{
color: 0xff0000,
reflectivity: 0.8
}),0.4,0.6),1 ); //generates the ball with Physijs (this uses three.js)
var r =
{
x: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12,
y: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12,
z: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12
};
//sets all the attributes associated with the ball
ball.rotation.set(r.x, r.y, r.z);
ball.position.y = 40;
ball.castShadow = true;
ball.receiveShadow = true;
ball.name = "ball"+i; //sets the name to 'ball' + whatever iteration its on
//Gather all the ball information
var json = {Name: "ball"+i, X: ball.position.x, Y: ball.position.y, Z: ball.position.z, Size: temp, Ball: ball};
console.log(JSON.stringify(json));
ballArray.push(json); // Push it to the array
delete temp, json, ball; // clear the variables used
}
var timer = setInterval(function() { addBall() }, 1000); // Call add ball using a timer
function addBall()
{
if(i >= 0) // just to be used while testing the balls will fall continuously
{
createBall();
scene.add(ballArray[i].Ball); //add the ball to the scene
i++; // increment i
}
else
{
//console.log("Finished");
clearInterval(timer);
}
}
render();
scene.simulate();
function render()
{
for (var i = 0; i < ballArray.length; i++) //Loop through the array
{
object = scene.getObjectByName( "ball"+i, true ); //get the reference to the ball
if(object) //if there is a ball
{
if (object.position.y <= -50) //if the balls position has gone below -50
{
scene.remove(object); //remove the object from the scene
ballArray.splice(i,1); //remove the object from the array
console.log(" ball"+i+" removed"); //print out
}
}
else //if there is not a ball in the scene
{
console.log("ball gone is ball"+i);
}
delete object;
}
renderer.render(scene, camera); //render
requestAnimationFrame(render);
}
我知道object = scene.getObjectByName( "ball"+i, true );
线是它寻找它的原因,但有没有一种更优化的方法来使用阵列搜索场景,这样当它进入后期时,它就不必搜索100个已删除的球,然后才能更新屏幕上的当前球。
******这个问题已经过编辑,包括了关于我如何创建球并使用它们的所有必要信息
会这样做:
//empty ball array
var ballArray = [];
//add any ball you want
ballArray.push("ball1");
ballArray.push("ball2");
ballArray.push("ball3");
//It will keep in note the index to delete AFTER the forEach loop
var indexToDelete = [];
//For each ball that are still in the table
ballArray.forEach(function(entry) {
object = scene.getObjectByName(entry, true);
//That IF statement can be removed if you want
//Maybe you can use now a try catch
if (object) {
if (object.position.y <= -50) //if the balls position has gone below -50
{
scene.remove(object); //remove the object from the scene
console.log(entry + " removed"); //print out
indexToDelete.push(ballArray.indexOf(entry)) //add the index to delete
}
}
delete object;
});
//Loop to remove the balls
for (var i = 0; i < indexToDelete.length; i++)
{
ballArray.splice(indexToDelete[i], 1);
}
编辑:没有表副本的代码
相关文章:
- 以可优化的方式使用requirejs加载模板
- 使用优化器在慢速连接上加载main.js时需要js超时
- JavaScript数组优化以提高性能
- React+Redux性能优化与组件ShouldUpdate
- JavaScript尾部调用中的函数是否经过优化
- javascript中的快捷方式融合优化
- 如何优化循环以插入到数据库中
- Css优化谷歌页面速度洞察
- 什么's在javascript'的优化上下文
- JavaScript代码优化-创建可重用类
- Javascript图形可视化工具包,具有高性能(500-1000个节点)
- 如何优化jquery动画代码
- 颗粒-JavaScript/CSS缩小SIMPLE/ADVANCED优化不起作用
- requirejs优化器错误:未定义窗口
- 如何优化这个jquery循环的执行时间
- 如何在AJAX驱动的应用程序中优化元素绑定
- 优化J$plus组合3<脚本>转换为1
- 使用公共JS文档优化静态网站的CSS/JS导入
- Node.js上的高性能算法
- 优化JavaScript代码