Почему, почему это так медленно? Я сделал изометрическую сетку кубов с css3, которая наматывается вверх и вниз на мыши. Он отлично работает на Firefox с размером сетки менее 12, а Chrome работает довольно хорошо около 18 лет. У меня есть приличная видеокарта и процессор, и то, что меня подталкивает, - это то, почему так медленно анимация только одной анимации куба если я убеждаюсь, что я только навешиваю один куб. Нужен ли мой JavaScript для оптимизации или этого можно ожидать от текущей реализации браузеров CSS3 и JavaScript? Полный тестовый пример ниже включает ползунок для изменения размера сетки на лету, может либо загрузить для себя, либо посетить эту версию jsfiddle, любезно предоставленную Дугом.
<html>
<head>
<style type="text/css">
body
{
background: black;
}
.cube
{
position: relative;
}
.cube .rightFace, .cube .leftFace
{
height: 25px; width: 10px; padding: 5px;
}
.leftFace
{
position: absolute;
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
-o-transform: skew(0deg, 30deg);
-moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
-o-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
border: 1px solid black;
}
.rightFace
{
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
position: absolute;
left: 19.5px;
border: 1px solid black;
}
.topFace div
{
width: 19px;
height: 19px;
border: 1px solid black;
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
-o-transform: skew(0deg, -30deg) scale(1, 1.16);
}
.topFace
{
position: absolute;
left: 10.25px;
top: -16.5px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#slider
{
width: 200px;
margin: 0 auto;
}
</style>
<link type="text/css" rel="stylesheet" href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css'; return false;" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
function refreshCubes()
{
$('.box').empty();
var x = $("#slider").slider("value");
var initialTop = 50;
var initialLeft = 450;
for(var i = 1; i < x; i++)
{
for(var j = 1; j < x; j++)
{
var cube = $('<div class="cube"><div class="topFace"><div></div></div><div class="leftFace"></div><div class="rightFace"></div></div>');
cube.css(
{
left : initialLeft + (20 * i) + (-19 * j) + 'px',
top : initialTop + (11 * i) + (11 * j) + 'px'
});
cube.find('.topFace div').css('background', 'rgb(100,' + Math.ceil(255 - 16 * i) + ',' + Math.ceil(255 - 16 * j) + ')');
cube.find('.rightFace').css('background', 'rgb(35,' + Math.ceil(190 - 16 * i) + ',' + Math.ceil(190 - 16 * j) + ')');
cube.find('.leftFace').css('background', 'rgb(35,' + Math.ceil(190 - 16 * i) + ',' + Math.ceil(190 - 16 * j) + ')');
cube.children('div').css('opacity', '.9');
cube.hover(function()
{
$(this).animate({top: '-=25px'}, 400, 'easeInCubic');
}, function()
{
$(this).animate({top: '+=25px'}, 400, 'easeOutBounce');
});
$('.box').append(cube);
}
}
}
$(document).ready(function()
{
$('#slider').slider(
{
value: 9,
max: 30,
min: 2,
slide: refreshCubes,
change: refreshCubes
});
refreshCubes();
});
</script>
</head>
<body>
<div id="slider"></div>
<div class="box"></div>
</body>
</html>
