Есть ли пути повышения производительности JavaScript-приложения, имеющегго связь с CSS?
Я написал приложение, которое рисует композицию из кубов с разукрашенными гранями, которые висят в трёхмерном пространстве. Так же есть возмоожность управлять движением этой композиции в шести направлениях учитывая трёхмерную перспективу. При этом как бы чувствуешь себя летящим на корабле в трёхмерном пространстве между кубами. Проблема в том, что во время такого полёта, когда кубы слишком близко, картинка не успевает сменяться с установленным периодом 100 мс, бывает,что даже секунды не хватает. Плюс, при этом греется процессор или может появиться сообщение, что не хватает оперативной памяти. Хочу спросить, существуют ли какие-то программные приёмы, которые помогли бы решить эту проблему?
*{
margin: 0; padding: 0; box-sizing: border-box;
perspective-origin: center;
transform-style: preserve-3d;
}
body{
perspective: 100vh;
}
#mycontayner{
overflow: hidden;
position:absolute;
top:80px;
width: 100%;
height: 700px;
border-width: 3px;
border-style: solid;
}
#contayner{
position:absolute;
top:300px;
left: 500px;
width:500;
height:300px;
}
.alldiv{
position:absolute;
width:50px;
height:50px;
z-index: 0;
border-radius: 15px;
}
.mydiv {
background: url('https://i.imgur.com/Rk0Grqv.gif');
}
.mydiv1 {
background: url('https://i.imgur.com/a7FKzEo.gif');
}
.mydiv2 {
background: url('https://i.imgur.com/Wbzg8nO.gif');
}<html><body>
<br />
Управление движениием:
<br /><br />
<button onclick="zap(1)"> влево </button>
<button onclick="zap(0)"> вправо </button>
<button onclick="zap(3)"> ввверх </button>
<button onclick="zap(2)"> вниз </button>
<button onclick="zap(5)"> вперёд </button>
<button onclick="zap(4)"> назад </button> |
<button onclick="clearInterval(b)"> стоп </button>
<div id=mycontayner><div id=contayner></div></div>
<script>
var step = 60, stx = 0, sty = 0, stz = 0, tgx = true, tgy = true, tgz = true, stx1 = 15, sty1 = 15, b;
function promotion(){contayner.style.transform = "rotateX(-" + stx1 + "deg) rotateY(-" + sty1 + "deg) translateX(" + stx + "px) translateY(" + sty + "px) translateZ(" + stz + "px)"};
promotion();
function zap(e){
clearInterval(b);
b = setInterval(function(){
promotion();
switch(e){
case 0: stx ++; break;
case 1: stx --; break;
case 2: sty ++; break;
case 3: sty --; break;
case 4: stz ++; break;
case 5: stz --; break;
case 8: stx1 ++; break;
case 9: stx1 --; break;
case 10: sty1 ++; break;
case 11: sty1 --;
}
}, 100);
}
let x = 1; let y = 1; let z = 1;
for(l = 0; l < 5; l ++){
for(j = 0; j < 5; j ++){
for(i = 0; i < 5; i ++){
if(Math.random() > 0.7){
for(h = 0; h < 2; h ++){
let kv = document.createElement("div");
kv.classList.add("alldiv");
kv.classList.add("mydiv");
kv.style.transform = "rotateY(90deg) translateX(" + (l * step) + "px) translateZ(" + (h * 50 - 25) + "px)";
kv.style.left = (i * step) + "px";
kv.style.top = (j * step) + "px";
contayner.appendChild(kv);
}
for(h = 0; h < 2; h ++){
let kv = document.createElement("div");
kv.classList.add("alldiv");
kv.classList.add("mydiv1");
kv.style.transform = "translateZ(-" + (h * 50 - 25 + l * step) + "px)";
kv.style.left = (i * step) + "px";
kv.style.top = (j * step) + "px";
contayner.appendChild(kv);
}
for(h = 0; h < 2; h ++){
let kv = document.createElement("div");
kv.classList.add("alldiv");
kv.classList.add("mydiv2");
kv.style.transform = "rotateX(90deg) translateY(" + -l * step + "px) translateZ(" + (h * 50 - 25) + "px)";
kv.style.left = (i * step) + "px";
kv.style.top = (j * step) + "px";
contayner.appendChild(kv);
}
}
}
}
}
</script>
</body></html>Посмотреть в действии можно тут
