iOSアプリのスクロールヒッチとハングに関して

こんにちは、ジモティーでiOSエンジニアをしている加藤です。

今回はジモティーiOSアプリのスクロールヒッチとハングに関して書きたいと思います。

目次

  • 前提
  • 背景
  • お手軽おすすめ調査方法
  • 調査結果と改善案
  • まとめ

前提

  • スクロールヒッチとは アプリをスクロールする際に、なめらかなアニメーションにならず飛び飛びになってしまう現象のこと
  • ハングとは ユーザーが何かしらの挙動(ボタンをタップなど)をした後、Viewの更新に250ミリ秒程度以上の遅れが生じること。その遅れの間ユーザーはUIを操作できない。

  • 背景 ジモティーのiOSアプリを触ってみると少しばかりアニメーションがカクツいてしまうということがありました。 その原因を探るため、実際に調査してみる運びとなりました。

お手軽おすすめ調査方法

スクロールヒッチを XcodeOrganizerで調べる方法 XcodeOrganizerを使用する方法です。これを使用すればリリース済みのアプリであれば即座に自分のアプリのスクロールヒッチ率を確認できます。

XcodeからWindow -> Organizer からXcodeOrganizerを起動し、Scrollingをタップします。

Organizerで集計されて表示されている値はヒッチした時間/スクロールする時間です。

Appleが公式に発表している閾値も存在しており、下記の通りです。

  • 5.0ms/s以下 => 良い

  • 5.0ms/s ~ 10.0ms/s => あまり良くない

  • 10.0ms/s以上 => 良くない

これを一つの指標としてパフォーマンス改善に役立てるのは良さそうですね!

ハングをデベロッパーモードで調べる方法

端末のデベロッパーモードを使用する方法です。

iOS16から新しく設定アプリにデベロッパーモードが出来ました。

これを利用して簡単にハングに関して調査することができます。

端末の設定アプリからデベロッパーをタップします

HangDetectionをタップします

Enable Hang Detectionをオンにします

これをOnの状態でアプリを起動すると自動でハングを記録してくれて、画像3枚目の画面の下の方にログとして出てきます。

もちろん、InstrumentやMetricsKitなどを使用するパフォーマンス計測の方法もございますが、今回はお手軽な二つの方法を紹介させていただきました。

調査結果とこれから

実際に調査したところ、やはり改善の余地ありという感じでした!

今後は、Instrumentsを使用してボトルネックを具体的に調査していきたいと思います。

ハング、スクロールヒッチの主な原因は下記の通りが挙げられるので重点的にここら辺を調べていくつもりです!

  • 優先度の低いスレッドがメインスレッドをブロックしてしまっている

  • 最適化されていない3rdパーティ-のUIライブラリをたくさん使っている。

  • GPUでレンダリングできる処理をCPUに任せてしまっている。(例 CoreAnimationでも良いところをUIBezierPathを使ってしまう等)

  • 極端にViewの階層が多い。

まとめ

今回はiOSアプリのスクロールヒッチとハングに関して書いてみました。

良いUXを実現するためにも妥協したくない部分であるため、これから改善していきたいと思います👍

また、ジモティーではエンジニアを積極的に採用しています。

ご興味のある方はこちらを御覧ください。

https://jmty.co.jp/recruit_top/


弊社では一緒にプロダクトを改善していただける仲間を探しています!

こちらでお気軽にお声がけください!

ネイティブアプリエンジニアの採用って難しいですよね。。。

ジモティーのウェブチームについてお話ししたいです