jquery - CSS and Javascript optimization (Speed issue) -
so trying make wheel navigation system in css , javascript using angular. working fine wondering if there better way optimize less load, works great on new devices pretty slow on older ones. on drag (using hammer js, happening 60 times per second) running code.
var pagex = e.gesture.center.pagex; var pagey = e.gesture.center.pagey; currentangle = getangle(pagex, pagey) - updatedangle + originalangle; absoluteangle = getangle(pagex, pagey); circle.style.transform = circle.style.webkittransform = 'rotatez(' + currentangle + 'deg)'; (var = 0; < circles.length; i++) { circles[i].style.transform = circles[i].style.webkittransform = 'rotatez(' + -currentangle + 'deg)'; }
where updatedangle , originalangle variables set on start, , getangle function
var getangle = function(x, y){ var deltax = x - center.x, deltay = y - center.y, angle = math.atan2(deltay, deltax) * 180 / math.pi; if(angle < 0) { angle = angle + 360; } return angle; };
there 12-15 sections or (circles) can see how going slow, loop runs ~15 times, inside of event happens 60 times second. first rotate movement of parent div moves objects, , loop adjusts rotation upright. should try frame skipping? , make event happen less? there way batch css changes? there better rotatez? (i tried rotate() , 10% slower). ideas help
i'm trying freestyle coding micro-optimization-answer. haven't tested hope essence.
in first function possible remove few variables since duplicates. multiple variable declarations make slow in older browsers.
var absoluteangle = getangle(e.gesture.center.pagex, e.gesture.center.pagey); currentangle = angle - updatedangle + originalangle; circle.style.transform = circle.style.webkittransform = 'rotatez(' + currentangle + 'deg)'; (var = 0; < circles.length; i++) { circles[i].style.transform = circles[i].style.webkittransform = 'rotatez(' + -currentangle + 'deg)'; }
in function, there not optimization done. same here, can remove variables , save few ticks.
var getangle = function(x, y){ var angle = math.atan2(y - center.y, x - center.x) * 180 / math.pi; if(angle < 0) { angle = angle + 360; } return angle; };
not much, without plunker or bit hard optimize.
Comments
Post a Comment