メニューを閉じる

テクノデジタルグループ

メニューを開く

2018.01.15

プログラミング

ChromeでGoogle Maps APIが重い時はハードウェアアクセラレーションをOFF

坂東です。

ブラウザベースの業務システムを提供しています。
「使っているとスクロールがガクガクしたり画面が変になったり、すごく重くなるんだけど」と言われる事があります。
これ自分の環境で現象は再現できないので困っていました。

メモリリークのテストはしていて問題ない。
jQueryメインで、Reactとか重そうなモダンJSは使っていない。
ページ内で一番処理やメモリ食ってるのはGoogle Maps APIの部分。
とはいえ微々たるもので、ストリートビューを使うとメモリをドカッと食うけど、それで重くなったりはしない。

どうにも再現しないのでクライアント先に訪問して色々やってると、こんな状況。

  1. OSはWindows、ブラウザはChrome最新版
  2. Google Maps API のjs地図で建物の多い都市部を表示。
  3. マウスでグリグリ激しくスクロール。
  4. 30秒ぐらいやってるとスクロールがガクガクし始めブラウザ全体が重くなる。
  5. デバッグコンソールを見ても異常値は見られない
  6. リロードしたり、しばらく放置すると解消する
  7. クライアント先でも全てのPCで発生するわけではない
  8. 古かったり超小型PCだと発生しやすい傾向

「Chrome 重い」でググってるとたどり着いたのがこのページ。

Chromeのグラブルが重い。ので設定を見直した。
https://prfac.com/gbf-chrome-slow/

こちらも描画系の問題なので参考に。
設定で「ハードウェア アクセラレーションが使用可能な場合は使用する」のチェックをオフ

ばっちり、現象は再現しなくなりました。

スクロールすると地図のデータや画像が溜まって負荷がかかりアクセラレーションを使おうとするけれど、ハードウェアがイマイチか相性が悪いかで、重くなってしまってるんでしょうね。
予想ですけれども。

おわり。


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事