Веб-сайт с поддержкой JavaScript требует большого объема памяти, но профилировщик не дает подсказок - PullRequest
Новая
       21

Веб-сайт с поддержкой JavaScript требует большого объема памяти, но профилировщик не дает подсказок

1 голос
/ 14 марта 2011

Я пытаюсь выяснить, почему моему веб-сайту (использующему JavaScript, включая jQuery и API Карт Google v2) требуется более 400 МБ памяти для одной вкладки.

Что я сделал до сих пор:

  • Пробовал в Firefox и Chrome, та же проблема
  • Проверен диспетчер задач Chrome перед созданием маршрута на карте и после
    • До: 28 МБ памяти процесса вкладки (31 МБ в «личной памяти», 13 МБ в «общей памяти»)
    • После: 550 МБ памяти процесса вкладки (557 МБ в личной памяти, также 13 МБ в общей памяти)
  • Сделал снимки кучи с помощью инструментов разработчика Chrome
    • Снимки до и после очень похожи, оба показывают около 12 МБ объектов кучи

Итак, вот мой вопрос: что именно означает термин «частная / общая память» - имеет ли он какое-то отношение к переменным стека? Как я отлаживаю огромное "частное" использование памяти? Меня не волнует, какой браузер я использую для отладки.

Редактировать: К сожалению, проблема с памятью возникает, когда я создаю маршрут GMaps в моем приложении, который, кажется, не работает правильно с IE - поэтому я ограничен Firefox / Chrome.

Редактировать 2: Я выследил проблему без каких-либо инструментов (я все еще интересуюсь инструментами, если кто-то знает один). Проблема возникает, когда я вызываю someGPolylineInstance.insertVertex(0, point), где точка - точка широты / долготы из события «dblclick». Каждый раз, когда я вставляю точку (я закомментировал все остальное, что происходит в обработчике двойного щелчка), использование памяти в Chrome увеличивается на ~ 1 МБ. Может ли это быть проблемой с API Карт?

Так как я не могу открыть весь свой сайт, я извлек минимальный пример, который показывает проблему. В настоящее время я могу воспроизвести проблему в Chrome 10. Добавление точки маршрута с помощью двойного щелчка добавляет примерно 0,5 МБ памяти, а при добавлении 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>
...