1

我试图找出为什么我的网站（使用 JavaScript，包括 jQuery 和 Google Maps API v2）需要超过 400 MB 的内存用于单个选项卡。

到目前为止我所做的：

  • 在 Firefox 和 Chrome 中都试过了，同样的问题
  • 在地图上创建路线之前和之后检查了 Chrome 的任务管理器
    • 之前：28 MB 选项卡进程内存（“私有内存”中 31 MB，“共享内存”中 13 MB）
    • 之后：550 MB 选项卡进程内存（557 MB 在私有内存中，还有 13 MB 共享内存）
  • 使用 Chrome 开发者工具制作堆快照
    • 之前和之后的快照非常相似，都显示了大约 12 MB 的堆对象

所以这是我的问题：“私有/共享内存”这些术语究竟是什么意思——它与堆栈变量有关吗？如何调试巨大的“私人”内存使用情况？不在乎我使用哪个浏览器进行调试。

编辑：不幸的是，当我在我的应用程序中创建 GMaps 路由时会出现内存问题，这似乎无法与 IE 一起正常工作 - 所以我有点受限于 Firefox/Chrome。

编辑2：我已经在没有任何工具的情况下找到了问题（如果有人知道，我仍然对工具感兴趣）。当我someGPolylineInstance.insertVertex(0, point)从“dblclick”事件中调用 where point 是 lat/lng 点时，就会出现问题。每次我插入一个点（我注释掉了双击处理程序中发生的所有其他事情），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