Take the 2-minute tour ×

I have a HTML5 app which has some javascript animations (one which runs a clock), SVG animations (which is largely controlled by Javascript) as well as some videos playing.

I want to run the app on an ipad which from initial tests is really slow (jittery and missing content).

What areas should I look at to make it run smoothly on the ipad? Should I avoid javascript calls? Can I replace Javascript with CSS3 with hardware acceleration?



share|improve this question
add comment

1 Answer

Since you tagget jQuery I presume you are using it.

First and foremost you should optimize your code as much as possible, expecially jQuery code.

jQuery is a library which utilize basic JavaScript functionalities to let you write less code. But less code doesn't mean faster code. In fact, many of the tasks you usually do with jQuery can be done with simple plain JavaScript, just writing little more lines of code, but with more performant scripts.

Also, be aware not to use too many event listeners. Events bubble up by default to the element parents, so you can attach a single event listener to the parent, and all the children will be able to catch that event via their parent listener using event.target.

If you are using JavaScript to make things you could do with CSS and HTML only, do it without JS, it's faster.

This is just some hints of code optimization, but I suggest you to search for some JavaScript and jQuery best practices and things to avoid.

Here you can find much about JavaScript best practices for example.


Since it seems you are starting front-end web development I will add something you really want to avoid when using jQuery.

Keep references about elements you searched for, instead of search for them many times.


// Better approach
var $foo = $('#foo');


// You can also chain

About the event listener, say you have many elements inside an other element

<div id="foo">

And you want to do something with them every time the user clicks on the <p> tags.

$('#foo p').click( function() {
    // do something...

// Better to use only one event listener attached to the container, and refer to the target element who originated the event
$('#foo').click( function( event ) {
    // event.target is now the real element being clicked
share|improve this answer
Thanks Jose, that is a good start. Not being a web developer (more server side), all good pointers. Gracias :) –  JD. Aug 5 '11 at 12:10
How much of javascript animations can be done in css3? Does it depend on the complexity of the animation? –  JD. Aug 5 '11 at 12:18
You can rotate elements, resize them, round corners, move them, ecc... but you can really do only basic things on single elements. If you want to make complex animations on more than one element you really have to use JS. If you follow good coding practices you shouldn't have problems even on an iPad. –  Jose Faeti Aug 5 '11 at 12:23
add comment

Your Answer


