(※この記事はiOS版アニメイトタイムズにのみ言及しています)
ごきげんよう、開発部のかんがーです。本日は皆様に素晴らしいTwitterアカウントをご紹介するために久々に筆を取っております。
そのアカウントとはアニメイト百合部( @animateyuribu )でして、毎日新鮮な百合情報を取り入れるとともに、あの本を買っていなかったなど、罪深きことをしないようフォローをさせていただいております。(ここまでがあいさつ)
と、インターネットの歴史を感じる長い挨拶をしてしまいました。
ところで私達アニメイトラボは先日、ニュースサイト「アニメイトタイムズ」のアプリをリリースさせて頂きました。🎊
リリース記事にてiOSアプリに関しては、Web版と比較し約16倍の表示速度を実現しています。 と紹介をしたのですが、こちらなぜ16倍なのか?と疑問を持たれている方もいるかと思います。今回の記事ではこの件について「iOSの表示速度を16倍とした根拠」に踏み込んで紹介させていただこうと思います。
従来(Web版)のアニメイトタイムズ
アニメイトタイムズはアニメイトラボが始まるよりもずっと前、2002年2月に産声を上げたサービスでその歴史の中で技術にせよ、サービスにせよ、ビジネスにせよ、求められるものも当時とは大きく変化し、その変化になんとか追いついていこうとしていました。
そのうちの一つとして今回リリースしましたアプリがあります。現状のWeb版でもスマートフォン向け画面を提供しておりましたが、どうしても現状のシステムでは十分に速度を出すことができませんでした。そこで我々はアプリ化すると同時にユーザーの皆様に「サクサク」と記事を読んでいただけるように大きな変更を加えました。それにより従来の16倍 という形でアニメイトタイムズの記事閲覧ができるようになりました。
比較方法
実装はいずれもSwift3.0で実装。
WebView
WKWebViewを利用して、http://sp.animatetimes.com/news/details.php の任意記事を表示しました。
時間の測定開始は webView.load(request) する直前として、測定終了をWKNavigationDelegateのデリゲートメソッド func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)が呼ばれたタイミングとしました。
またiOS 9 WKWebView 主な変更点をざっくりを参考にwebDataStoreを .nonPersistent() としました。
さらに、How to remove cache in WKWebview?を参考にremoveDataをしました。
ネイティブ
測定開始を記事一覧画面で記事を選択したときとし、測定終了をUITableViewのreloadDataを実行してCellのレイアウトが終了した時としました。ただし、reloadDataはそのままだと実行時点ではCellのレイアウトは終了していません。そこでUITableView / UICollectionView の reloadData が完了した直後にセルを参照したいを参考にして、GCD(Grand Central Dispatch)でメインスレッドで処理すると明示しました。
なお、参考先はSwift2時代のGCDでしたので、Swift3のGCD(dispatch_async)を参考にしてSwift3用に書き換えて実験しました。
また、Alamofireを利用していたので、How to disable caching in Alamofireを参考にして、Disabling the URLCache CompletelyとConfiguring the Request Cache Policyしました。
比較環境
| 項目 | 内容 |
|---|---|
| 端末 | iPhone 7 |
| OS | iOS 10.1.1 |
| 通信回線 | 4G(au) |
測定結果
WebViewでの表示
ネイティブでの表示
上記のような実験を50回試行した結果が下記のようになります。
| WKWebView | ネイティヴ | |
|---|---|---|
| 平均(s) | 4.641 | 0.2935 |
| 標準偏差 | 1. 217 | 0.04311 |
この結果の平均を持って「iOSの表示速度を16倍とした根拠」としています。
16倍早くなったアニメイトタイムズはいかがだったでしょうか。是非その速度を実際にアプリを触ることで試してみてください。
(文・かんがー、調査・とぅーさー)