JavaScript-powered website needs large amount of memory but profiler doesn't give hints_问答_开发者

JavaScript-powered website needs large amount of memory but profiler doesn't give hints

开发者 https://www.devze.com 2023-02-17 05:26 出处：网络

I\'m trying to find out why my website (using JavaScript, including jQuery and the Google Maps API v2) needs more than 400 MB of memory for a single tab.

I'm trying to find out why my website (using JavaScript, including jQuery and the Google Maps API v2) needs more than 400 MB of memory for a single tab.

What I've done so far:

Tried in both Firefox and Chrome, same problem
Checked Chrome's task manager before creating a route on the map and afterwards
- Before: 28 MB tab process memory (3开发者_高级运维1 MB in "private memory", 13 MB "shared memory")
- After: 550 MB tab process memory (557 MB in private memory, also 13 MB shared memory)
Made heap snapshots with Chrome developer tools
- Snapshots before and after are very similar, both showing around 12 MB of heap objects

So here's my question: What exactly do the terms "private/shared memory" mean - does it have something to do with stack variables? How do I debug the huge "private" memory usage? Don't really care which browser I use for debugging.

Edit: Unfortunately, the memory problem arises when I create a GMaps route in my application, which doesn't seem to work correctly with IE - so I'm kind of restricted to Firefox/Chrome.

Edit 2: I have tracked down the problem without any tools (I'm still interested in tools if somebody knows one). The problem occurs when I call someGPolylineInstance.insertVertex(0, point) where point is a lat/lng point from the "dblclick" event. Everytime I insert a point (I commented out everything else that happens in the double-click handler), memory usage goes up by ~1 MB in Chrome. Could this be a problem with the Maps API?

So as I can't put up my whole website, I extracted a minimal example which shows the problem. Currently I can reproduce the problem on Chrome 10. Adding a route point by double-clicking adds roughly 0.5 MB of memory usage, while adding 50 points at once needs less memory. Please try and tell me whether you experience the same (simply open the example as "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>