What to look out for when moving HTMl5 app to ipad?

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 开发者_如何学Pythonreplace Javascript with CSS3 with hardware acceleration?

TIA

JD

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.

EDIT

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.

// THIS IS BAD!
$('#foo').doSomething();
$('#foo').doSomethingElse();
$('#foo').doOtherThings();

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

$foo.doSomething();
$foo.doSomethingElse();
$foo.doOtherThings();

// You can also chain
$foo.doSomething().doSomethingElse.doOtherthings();

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

<div id="foo">
    <p></p>
    <p></p>
    <p></p>
</div>

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

// THIS IS BAD!!
$('#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
});