1

私の Web サイト (jQuery や Google Maps API v2 を含む JavaScript を使用) が 1 つのタブで 400 MB を超えるメモリを必要とする理由を調べようとしています。

私がこれまでに行ったこと：

  • Firefox と Chrome の両方で試しましたが、同じ問題が発生しました
  • マップ上にルートを作成する前とその後、Chrome のタスク マネージャーを確認しました
    • 変更前：タブ処理メモリ28MB（「プライベートメモリ」31MB、「共有メモリ」13MB）
    • 変更後: 550 MB のタブ プロセス メモリ (プライベート メモリで 557 MB、共有メモリで 13 MB)
  • Chrome 開発者ツールで作成されたヒープ スナップショット
    • 前と後のスナップショットは非常に似ており、どちらも約 12 MB のヒープ オブジェクトを示しています。

だからここに私の質問があります:「プライベート/共有メモリ」という用語は正確には何を意味しますか?それはスタック変数と関係がありますか? 大量の「プライベート」メモリ使用量をデバッグするにはどうすればよいですか? デバッグにどのブラウザを使用するかはあまり気にしません。

編集: 残念ながら、アプリケーションで GMaps ルートを作成するとメモリの問題が発生しますが、IE では正しく動作しないようです。そのため、Firefox/Chrome に制限されています。

編集 2: ツールを使用せずに問題を追跡しました (ツールを知っている人がいれば、まだツールに興味があります)。この問題はsomeGPolylineInstance.insertVertex(0, point)、「dblclick」イベントから where point is a lat/lng point を呼び出すと発生します。ポイントを挿入するたびに (ダブルクリック ハンドラーで発生する他のすべてをコメントアウトしました)、メモリ使用量は Chrome で最大 1 MB 増加します。これは Maps API の問題でしょうか?

ウェブサイト全体を掲載することはできないので、問題を示す最小限の例を抽出しました。現在、Chrome 10 で問題を再現できます。ルート ポイントをダブルクリックして追加すると、約 0.5 MB のメモリ使用量が追加されますが、一度に 50 ポイントを追加すると必要なメモリが少なくなります。同じことが発生したかどうか教えてください (例を「file://」として開くだけです):

<html>
    <head>
        <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;oe=utf-8&amp;key=open_me_as_file_so_that_no_key_is_necessary"></script>
        <script>
            function init()
            {
                map = new GMap2(document.getElementById("map_canvas"), {mapTypes : [G_NORMAL_MAP],
                                                                        draggableCursor : "crosshair"})
                line = new GPolyline(new Array(), "#0090EE", 2, { clickable: false, geodesic: false })
                map.addOverlay(line)
                map.setCenter(new GLatLng(49, 9), 12)
                map.addControl(new GLargeMapControl())
                map.disableDoubleClickZoom()

                GEvent.addListener(map, "dblclick",
                    function(overlay, clickedPoint)
                    {
                        if(!overlay)
                            line.insertVertex(0, clickedPoint)
                    }
                )
            }

            lat = 49
            lng = 9
            function doSomething()
            {
                for(var i = 0; i < 50; ++i)
                {
                    lat += 0.05
                    lng += 0.03
                    line.insertVertex(0, new GLatLng(lat, lng))
                }
                document.getElementById("debug").innerHTML = line.getVertexCount() + " points"
            }
        </script>
    </head>
    <body onload="init();">
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
        <div id="debug"></div>
        <button onclick="doSomething();">Add 50 points</button>
    </body>
</html>
4

0 に答える 0