特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog

こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開

[gfx]

へえー “chrome://tracing” 。モバイルのWebViewも見れるのか。

[katsyoshi]

おもしろかった

[yarumato]

“特定Android端末でスクロールが重い（1秒毎に1/4秒フリーズ）。暫定対処はできたが、さらに深掘りして特定端末で発生の根本原因を解明。ChromeのTracingを利用しブラウザのソースコードまで参照。Accessibility機能ONのせい”

[memoyashi]

一時期、端末固有のプチプリーズに悩まされてたんだけどこんな調べ方があったのか。

[aktkro]

良記事。こういう知見は貴重。

[koluku]

WebViewのデバッグ手法ってこうやるのか

[lesamoureuses]

debug丁寧で読んでてわかりやすい

[riawiththesam]

Webviewむずかしいよね

[door-s-dev]

chrome://inspect?tracing

[mezamashi0540]

なるほどなー。どうもWebViewで機種固有の現象があるっぽいのはわかっていたけど、ユーザーサポートからの少ない情報だけだったので、こういう具体的事例は凄い助かる。

[Pasta-K]

chrome://inspect?tracing でこういうのの調査出来るの知らなかった…

[efcl]

WebViewのパフォーマンスデバッグについての記事。 ChromeのRemote Inspectを使ってデバイスに接続し、プロファイルやTracingを使ったボトルネックの調査方法について

[igrep]

"WebView の使用は、いわばアプリの中にエミュレータのようなものが入っていて、そのエミュレータの上でプログラムが動いているのに近い状態だという風に考えております" 変数が増えるのはそうだよなぁ

[stealthinu]

WebViewの速度等のデバッグする手法について

[rti7743]

面白い。こうやってデバッグしていくんだね。ただ、なぜAccessibility がONだと遅くなるのか？はまだ謎だと思う。

[kuracom]

勉強になる

[kasuke18]

“アクセシビリティ機能”

[osugi3y]

え。マジでiPhoneでも結構固まる時あるんですけど

[toshitanian]

“Tracing”

[ys0000]

トラブルシューティングはエンジニアの花形だなぁとやっぱり思ってしまう。

[tomono-blog]

こんなにウデがよい人が開発してるのに、もたらされるユーザー体験には比例しないんだな…と思いました まる。

[sasanori-0126]

普通にdevtoolも使えますよ

[tk_musik]

android、webviewのデバッグ。より深い方法

[NOKIA]

WebViewって便利だが、機種固有の問題って根が深そう。 所でOnePlusの端末って技適通ってるんだっけ?

[tomozo167]

“、ブラウザのタブ全部を巻き込んで落ちるので注意してください。PC 版で調査する際には、私は Chrome Canary など別のブラウザインスタンスを利用して調査しております。”

[tettekete37564]

歯切れの悪い原因だけどこういう調査能力は大事。本当に回避策がない場合の対応能力となるから

[ledsun]

ははあ、すごい。ブラウザの奇妙な挙動に出会ってもソースコードまで潜れなくて放置しちゃうんだよね

[Helfard]

ほえーすごい。

[ublftbo]

この種のは探偵物の面白さがある

[acealpha]

ハイブリッド開発は機能改善よりUI改善の速度が優先されるケースならいいんだけど逆になると何でネイティブで作らなかったんだっけ？って話に戻ってくる悲しさよ

[chocodoughnut]

調査の仕方ありがたい！

[sabotem]

(自分は専らバックエンドだけど、たまに扱うこともあるので)WebViewの問題の追い方覚えておこう。

[respectbookmark]

素晴らしい。

[monacal]

おー、レンダリングのこと、WebViewの処理を良く知らないとTracingしても意味がわからないやつだ。深い知見。こういうことできるようにならねば。