読了: 約 3 分
これまでスマホサイトは制作していたのですが、スマホアプリは作った事がなくパフォーマンスのチューニングに追われています。
リリース前にパフォーマンス向上で色々やっている中で、基本的な事から細かなTipsを発見したので、メモ程度に書いておきます。
概要
基本編
まずはどのようなイベントがあるかはこちらから確認していただくとして、
その後、イベント毎のパフォーマンスとどのようなタイミングでつかえばよいかを
メモしていきます。
90秒で理解するiPhone JavaScript（マルチタッチ編）
scrollイベントについて
下記にかなり参考になる記事があったので、記載。
iosだとscrollイベントはスクロールが完了時に実行されるのに対して、
androidでは、スクロール中にずっとイベントが実行されるんですね。
泣きそうですよえぇ。
JavaScriptのスマホ対応時に知らないと損する16のコト (3/3)
その他localstorageの使い方など、html5関連の技術は結構載っているので良いですね。
window.scroll等の場合、スマートフォンだと処理が遅くなる件について
呼び出し間隔を1回にしたい場合はjqueryのthrottleを使えばよい。
参考：イベントの間引き方
今回はインフィニティースクロールの際のイベントで、scrollが無駄に呼ばれて遅くなっていたというところの対処です。
1回にするではなくて、インフィニティスクロールの場合は、何回も出来なければいけないので、
こちらのプラグインを使用してみました。
イベントの実行間隔を伸ばす事ができます。
jQuery.ba-throttle-debounce 1.1.0
touchmoveイベントをつかえば勝てる…
そう思ってた時期もありました…
ということでやってみました。
画面にタッチした状態で、タッチパネル上を移動させたときに発生するイベントなのですが、
PCでもつかうscrollイベントより少し早くなったくらいで、少しでもスクロールした際に、ある要素をnoneする処理を行いたい場合には適さないですね、
touchmoveはスワイプさせるスライダーなどの時に使用した方が良さそう。
touchmoveがandroidでうまく効かない…
色々挙動確認していたら、微妙に効かない/遅いみたいな事があったので、
調べてみると同じ事になっている方がいました。
flipsnapとはやりたい事が違うのですが、スマートフォンでスライダーとかつかいたい方はメモしておいた方が良いと思います。
Androidでtouchmoveがうまくうごかない件とflipsnapでの対応策
参考サイト
スクロールイベント、touchmoveをつかって、画像のモーダルを非表示にするスマホサイトとしては
下記のようなサイトがあります。
サイバーエージェント社の提供するグルメイヤーというサービスは、スクロールするとすぐに消える仕様になっていて、
他のボタンも普通に押せます。
ポップアップ表示して、下のレイヤー動かないようにみたいな要望があるのですが、
その場合,fixedがiOS4系とか端末によっては効かないので、他の挙動をさせずに、
目的通りの行動をユーザーにさせる(画像を閉じさせる)にはこのような処理にした方がスマートですよね。
