Chrome67の不審な動き

DEN将棋Xで、有る時いつものように友人と早指し将棋を行おうとすると、スマートフォンのChrome画面がやたら重い。。

マッチメークすると手番の人の方の残り時間が1秒づつカウントダウン表示していくのですが、このカウントダウンがほとんどフリーズ状態。たまーにカウントダウンするような状態になっていました。盤面クリックイベントやボタン押下イベントもまともに拾っていない感じになってしまいました。本記事は一応その解決ストーリーです。あまり厳密に原因究明したわけではありませんので、参考程度の記事です。

1.現象

こちらは最近買ったスマートフォン「htc U11 Life」、相手はPCでDEN将棋Xです。しかしマッチメーク後、自分の残り時間カウンター表示がやたら遅い。そのうち止まってしまう始末。相手のPC上のChromeは問題無し。最近、秒読みカウントアップ表示精度を向上させる修正を行ったばかりだったので、この時にデグレートしたかと思い、この時は一旦中断して、調査することにしました。

2.調査

1秒おきに、下記の処理を行っています。

 画面上の時計表示の更新処理
  →ゲートウェイデーモン(PSGI)に対して受信データ(JSON)リクエスト

今回直前に行った修正は下記です。

時計表示更新処理の、秒読み突入時処理を、以前は単純に1秒を足して表示していたのを、前回表示時刻と表示する時の時刻の差分を前回表示時刻に加算することに変更。これはsetinterval関数を使用した1秒タイマーのタイムアウト間隔バラツキを補うための措置である。秒読み70秒ぐらいの設定にすると、結構2人のブラウザ表示に差が生じていたので。

しかし、この変更内容に不具合は発見できず。念のため変更前のソースに戻しても同じ現象が再現しました。

3.他の要因→解決

そうなると他の要因を疑う必要があります。まずWin10上のChrome 68.0.3440.84(Official Build) (64 ビット)では発生しない事がわかっています。同じChromeなのに。。そういえば、htcのスマフォ上にシステムバージョンアップがアナウンスされて、時間をかけてバージョンアップを行ってから最初の対局で発生したことに気づきました。

そこでネット情報をあたっていると、Chromeは昔からメモリを食い、CPU負荷率が高くなるという定説が有るようです。

https://www.softantenna.com/wp/tips/chrome-67-cpu-usage/
(この記事は「MACだと67.0.3396.62で、同期通信を行うと不具合によりCPU負荷率100%になる」というものですが、「67.0.3396.79」で解消したそうです・・?)
https://bumbullbee.com/android-chrome-response-9061
https://tabkul.com/?p=3788
http://kamomako.hatenablog.jp/entry/2015/04/20/115610

これという記事は見つかりませんでしたが、タイミングとしてはスマフォの大規模なシステムバージョンアップを行ってからなので、Chromeバージョンの不具合の可能性があるかと思い、現在の「Chrome 67.0.3396.87」から、まだベータ版ですが、2018/8/5時点で最新の「Chrome Beta 68.0.3440.91」にバージョンアップすることにしました。これが当たりました!これにより全く元の通り、いやむしろさらに軽快に動くようになった気がします。

ちなみに、古いバージョンは削除していませんので、最新バージョンインストール後古いバージョンを動かしてみると、再現しませんした。このことから、最新バージョンにすることにより何か共通のコンポーネントがバージョンアップされたことにより不具合が解消したか、最新バージョンにすることにより、何か共通設定のデフォルト値が変更になり不具合が起きなくなったのかのどちらかだと考えています。

同じような悩みを抱えている方、「Chrome Beta 68.0.3440.91」にすると解決するかもしれません。Google Playで「Chome Beta」で検索するとダウンロード&インストールできます。

4.おまけ

今回のような事が起きると、android上のChromeもデバッグモードを起動したくなります。そこで調べてみるとできました。結局最新のベータ版をインストールしたら旧バージョンでも再現しなくなったので活躍はしなかったわけですが、一応その方法を下記に掲載しておきます。

  1. android端末の「USBデバッグ」をONにしておく
    設定-開発者向けオプション で「USBデバッグ」をONする。
    開発者向けオプションは最初表示されていないので、android8.0.0の場合、下記の操作で表示させる。
    「設定-バージョン情報-ソフトウェア情報-その他」と辿り、「ビルド番号」を連打すると「あなたはデベロッパーです」のようなメッセージが出て上記メニューが設定画面に現れる。
  2. USBドライバのダウンロード 
    下記からドライバをダウンロードして解凍しておきます。
    https://developer.android.com/studio/run/win-usb
  3. android端末をUSBケーブルで接続
    ここで端末で、端末内アクセス許可を聞かれる場合は、許可する。
  4. コントロールパネルのデバイスマネージャーを開いて端末を見つける
    htcの端末は下図の感じでした
    dvice.PNG

  5. 上記端末右クリックから「ドライバーの更新」で1で解凍したフォルダを指定する
    私のPCでは既に最新がインストールされていました。
  6. 端末側のChromeを起動して対象のページを開く
  7. PCのChromeアドレスバーに下記を入力
    Chrome://inspect/#devices
    これで端末側で、「USBデバッグを許可しますか?」と表示されるのでOKを押す。
  8. PC側のChrome側に現れたDevicesのページで対象ページのinspectをクリックする
    usb_chrome.PNG
  9. これでおなじみのデバッグ画面が出現しますのでブレークポイントなど自由に設定しながらPC上でデバッグ可能です。