Lagging JavaScript when opening and closing menu

Question

i have some lag coming from opening up the menu. I have listed my site so you can view it:

http://www.Skarchmit.tumblr.com

As a side note: links to external scripts and css do not do anything - they are directly in the code with and similar tags. Some images have not yet been uploaded yet. And appear as question marks.

My current way of making the menu :

Content: 100%, menu: 0px; Click on it Content left -250px, menu : 250px

Everything is float.

Im not sure if thats the best way, but its seems laggy on mobile devices especially.

How would i best optimize it for speed?

<http://jsfiddle.net/skarchmit/LbgQJ/2/>

Add code please. also, try to paste your menu at jsfiddle (or similar) and test it there. — celerno
– celerno, Commented Aug 1, 2014 at 22:09
It does feel Laggy on iPad, but you have to post some code for us to determine the reason of that. — Derek 朕會功夫
– Derek 朕會功夫, Commented Aug 1, 2014 at 22:15
we really need to see some code to say anything useful. In the mean while, read this excellent post on animation performance: html5rocks.com/en/tutorials/speed/high-performance-animations — Pevara
– Pevara, Commented Aug 1, 2014 at 22:20

elzi · Accepted Answer · 2014-08-01 22:25:46Z

1

As others have said, it's performing fine on my personal mobile device. However, you can try using the transform css property to compare (it has performed better for me in history, especially with hardware acceleration).

Example:

.content {
  transform: translate3d(0, 0, 0);  
}
.content.open {
  transform: translate3d(-250px, 0, 0);  
}

answered Aug 1, 2014 at 22:25

elzi

5,6927 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Todd Over a year ago

just as an addition, you would need to write a transition rule like

transition: transform 0.5s. And by assuming 3d transforms, you're missing any ie9 users. In that case you could just fall back to 2d, but in any case, still more performant than animating

left` prop.

skarchmit Over a year ago

I haven't use it yet. Trying to figure it out :/

Collectives™ on Stack Overflow

Lagging JavaScript when opening and closing menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related