HTMl5アプリをipadに動かすときにはどうすればいいですか？

Question

私はいくつかのjavascriptアニメーション（クロックを実行する）、SVGアニメーション（主にJavaScriptによって制御される）、いくつかのビデオ再生を持つHTML5アプリケーションを持っています。

私は最初のテストから実際に遅い（ジッタと欠けているコンテンツ）ipadでアプリケーションを実行したいと思います。

ipadでスムーズに動作させるにはどのような面を考慮する必要がありますか？ JavaScript呼び出しを避けるべきですか？ CSS3でJavascriptをハードウェアアクセラレーションに置き換えることはできますか？

TIA

JD

Answer 1

あなたはjQueryのをtagget以来、私はあなたがそれを使用していると推定。

最初に、可能な限り、具体的にはjQueryコードを最適化する必要があります。

jQueryは、基本的なJavaScript機能を利用して少ないコードを書くことができるライブラリです。しかし、コードが少なくてもコードが高速になるわけではありません。実際、jQueryを使って通常行う多くの作業は、単純な単純なJavaScriptを使用して行えます。コードの行を少しだけ書くだけで、よりパフォーマンスの高いスクリプトを使用できます。

また、あまりにも多くのイベントリスナーを使用しないように注意してください。イベントはデフォルトで要素の親にバブルアップするので、1つのイベントリスナを親に添付することができ、すべての子は親リスナを介してevent.targetを使用してそのイベントをキャッチできます。

JavaScriptを使用してCSSとHTMLのみで行うことができるのであれば、JSなしで行うほうが高速です。

これはコード最適化のヒントですが、JavaScriptやjQueryのベストプラクティスや回避するものを検索することをお勧めします。

Hereたとえば、JavaScriptのベストプラクティスについては、多くの情報があります。

EDIT

あなたがフロントエンドのWeb開発を始めている、私はあなたが本当にjQueryのを使用するときに避けたいものが追加されますようですので。

何度も検索するのではなく、検索した要素についての参照を保持してください。イベントリスナーについて

// 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(); 

は、あなたが他の要素

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

内の多くの要素を持っていると言うそして、あなたは彼らとユーザーが<p>タグをクリックするたびに何かをしたいです。

// 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 
});