-1

Just curious if anyone else is having performance issues with Chrome and Firefox while using an arcgis javascript web application.

I have been developing an application that works great in Internet Explorer but consumes alot of resources in Firefox and Chrome. It often takes over 500mb ram in chrome/firefox while it uses 1/4 of that in IE. This causes the application to hang intermittently and in general behave slow in chrome/firefox. No problems in IE.

Application is running and pulling resources from our local network. Here is my code for reference:

var map;
require([
    "esri/map",
    "esri/config",
    "esri/arcgis/utils",
    "esri/dijit/HomeButton",
    "esri/dijit/Geocoder",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ImageParameters",
    "esri/dijit/Legend",
    "esri/geometry/webMercatorUtils",
    "esri/graphic",
    "esri/graphicsUtils",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/tasks/GeometryService",
    "esri/tasks/query", "esri/tasks/QueryTask",
    "esri/tasks/RelationshipQuery",
    "esri/tasks/locator",
    "esri/renderers/SimpleRenderer",
    "esri/geometry/screenUtils",
    "esri/geometry/Extent",
    "esri/geometry/Point",
    "esri/request",
    "esri/renderers/ClassBreaksRenderer",
    "agsjs/dijit/TOC",
    "dojo/store/Memory",
    "dijit/form/FilteringSelect",
    "dojo/dom",
    "dojo/on",
    "dojo/dom-class",
    "dojo/dom-construct",
    "dojo/_base/Color",
    "dojo/_base/connect",
    "dojo/_base/array",
    "dojo/parser",
    "dijit/registry",
    "dojo/fx",
    "dojo/domReady!"
], function (
    Map,
    esriConfig,
    arcgisUtils,
    HomeButton,
    Geocoder,
    FeatureLayer,
    ArcGISTiledMapServiceLayer,
    ArcGISDynamicMapServiceLayer,
    ImageParameters,
    Legend,
    webMercatorUtils,
    Graphic,
    graphicsUtils,
    SimpleMarkerSymbol,
    SimpleLineSymbol,
    SimpleFillSymbol,
    GeometryService,
    Query, QueryTask,
    RelationshipQuery,
    Locator,
    SimpleRenderer,
    screenUtils,
    Extent,
    Point,
    esriRequest,
    ClassBreaksRenderer,
    TOC,
    Memory,
    FilteringSelect,
    dom,
    on,
    domClass,
    domConstruct,
    Color,
    connect,
    array,
    parser,
    registry) {
parser.parse();

//Municipality Drop Down
var muniStore = new Memory({
        data : [{
                name : "Alexandria Township",
                id : "1001"
            }, {
                name : "Allamuchy Township",
                id : "2101"
            }, {
                name : "Alpha Borough",
                id : "2102"
            }, {
                name : "Bedminster Township",
                id : "1801"
            }, {
                name : "Belvidere Town",
                id : "2103"
            }, {
                name : "Bernards Township",
                id : "1802"
            }, {
                name : "Bernardsville Borough",
                id : "1803"
            }, {
                name : "Bethlehem Township",
                id : "1002"
            }, {
                name : "Bloomingdale Borough",
                id : "1601"
            }, {
                name : "Bloomsbury Borough",
                id : "1003"
            }, {
                name : "Boonton Town",
                id : "1401"
            }, {
                name : "Boonton Township",
                id : "1402"
            }, {
                name : "Butler Borough",
                id : "1403"
            }, {
                name : "Byram Township",
                id : "1904"
            }, {
                name : "Califon Borough",
                id : "1004"
            }, {
                name : "Chester Borough",
                id : "1406"
            }, {
                name : "Chester Township",
                id : "1407"
            }, {
                name : "Clinton Town",
                id : "1005"
            }, {
                name : "Clinton Township",
                id : "1006"
            }, {
                name : "Denville Township",
                id : "1408"
            }, {
                name : "Dover Town",
                id : "1409"
            }, {
                name : "Far Hills Borough",
                id : "1807"
            }, {
                name : "Franklin Borough",
                id : "1906"
            }, {
                name : "Franklin Township",
                id : "2105"
            }, {
                name : "Frelinghuysen Township",
                id : "2106"
            }, {
                name : "Glen Gardner Borough",
                id : "1012"
            }, {
                name : "Green Township",
                id : "1908"
            }, {
                name : "Greenwich Township",
                id : "2107"
            }, {
                name : "Hackettstown Town",
                id : "2108"
            }, {
                name : "Hamburg Borough",
                id : "1909"
            }, {
                name : "Hampton Borough",
                id : "1013"
            }, {
                name : "Hanover Township",
                id : "1412"
            }, {
                name : "Harding Township",
                id : "1413"
            }, {
                name : "Hardyston Township",
                id : "1911"
            }, {
                name : "Harmony Township",
                id : "2110"
            }, {
                name : "High Bridge Borough",
                id : "1014"
            }, {
                name : "Holland Township",
                id : "1015"
            }, {
                name : "Hopatcong Borough",
                id : "1912"
            }, {
                name : "Hope Township",
                id : "2111"
            }, {
                name : "Independence Township",
                id : "2112"
            }, {
                name : "Jefferson Township",
                id : "1414"
            }, {
                name : "Kinnelon Borough",
                id : "1415"
            }, {
                name : "Lebanon Borough",
                id : "1018"
            }, {
                name : "Lebanon Township",
                id : "1019"
            }, {
                name : "Liberty Township",
                id : "2114"
            }, {
                name : "Lopatcong Township",
                id : "2115"
            }, {
                name : "Mahwah Township",
                id : "0233"
            }, {
                name : "Mansfield Township",
                id : "2116"
            }, {
                name : "Mendham Borough",
                id : "1418"
            }, {
                name : "Mendham Township",
                id : "1419"
            }, {
                name : "Milford Borough",
                id : "1020"
            }, {
                name : "Mine Hill Township",
                id : "1420"
            }, {
                name : "Montville Township",
                id : "1421"
            }, {
                name : "Morris Plains Borough",
                id : "1423"
            }, {
                name : "Morris Township",
                id : "1422"
            }, {
                name : "Morristown Town",
                id : "1424"
            }, {
                name : "Mount Arlington Borough",
                id : "1426"
            }, {
                name : "Mount Olive Township",
                id : "1427"
            }, {
                name : "Mountain Lakes Borough",
                id : "1425"
            }, {
                name : "Netcong Borough",
                id : "1428"
            }, {
                name : "Oakland Borough",
                id : "0242"
            }, {
                name : "Ogdensburg Borough",
                id : "1916"
            }, {
                name : "Oxford Township",
                id : "2117"
            }, {
                name : "Parsippany-Troy Hills Township",
                id : "1429"
            }, {
                name : "Peapack Gladstone Borough",
                id : "1815"
            }, {
                name : "Pequannock Township",
                id : "1431"
            }, {
                name : "Phillipsburg Town",
                id : "2119"
            }, {
                name : "Pohatcong Township",
                id : "2120"
            }, {
                name : "Pompton Lakes Borough",
                id : "1609"
            }, {
                name : "Randolph Township",
                id : "1432"
            }, {
                name : "Ringwood Borough",
                id : "1611"
            }, {
                name : "Riverdale Borough",
                id : "1433"
            }, {
                name : "Rockaway Borough",
                id : "1434"
            }, {
                name : "Rockaway Township",
                id : "1435"
            }, {
                name : "Roxbury Township",
                id : "1436"
            }, {
                name : "Sparta Township",
                id : "1918"
            }, {
                name : "Stanhope Borough",
                id : "1919"
            }, {
                name : "Tewksbury Township",
                id : "1024"
            }, {
                name : "Union Township",
                id : "1025"
            }, {
                name : "Vernon Township",
                id : "1922"
            }, {
                name : "Victory Gardens Borough",
                id : "1437"
            }, {
                name : "Wanaque Borough",
                id : "1613"
            }, {
                name : "Washington Borough",
                id : "2121"
            }, {
                name : "Washington Township (Morris)",
                id : "1438"
            }, {
                name : "Washington Township (Warren)",
                id : "2122"
            }, {
                name : "West Milford Township",
                id : "1615"
            }, {
                name : "Wharton Borough",
                id : "1439"
            }, {
                name : "White Township",
                id : "2123"
            }
        ]
    });
var filteringSelect = new FilteringSelect({
        id : "muniSelect",
        name : "muni",
        placeholder : "Select a Municipality",
        store : muniStore,
        searchAttr : "name"
    }, "muniSelect");

//Initial Extent
var initialExtent = new Extent({
        "xmin" : 186870.18,
        "ymin" : 541462.48,
        "xmax" : 735481.291,
        "ymax" : 967243.73,
        "spatialReference" : {
            "wkid" : 102711
        }
    });

//The map
map = new Map("map", {
        logo : false,
        extent : initialExtent
    });

//home button
var home = new HomeButton({
        map : map
    }, "HomeButton");
home.startup();

//geocoder
geocoder = new Geocoder({
        map : map,
        autoComplete : true,
        highlightLocation : true
    }, "geocoder");
geocoder.startup();

//add the legend
map.on('layers-add-result', function () {
    var toc = new TOC({
            map : map,
            layerInfos : [{
                    layer : administrative,
                    title : "Administrative",
                    collapsed : false,
                    slider : true
                }, {
                    layer : agriculture,
                    title : "Agriculture",
                    collapsed : true,
                    slider : true
                }, {
                    layer : critHab,
                    title : "Critical Habitat",
                    collapsed : true,
                    slider : true
                }, {
                    layer : forest,
                    title : "Forest Resources",
                    collapsed : true,
                    slider : true
                }, {
                    layer : geology,
                    title : "Geology",
                    collapsed : true,
                    slider : true
                }, {
                    layer : presOS,
                    title : "Preserved Open Space",
                    collapsed : true,
                    slider : true
                }, {
                    layer : presPriority,
                    title : "Preservation Priority",
                    collapsed : true,
                    slider : true
                }, {
                    layer : transportation,
                    title : "Transportation",
                    collapsed : true,
                    slider : true
                }, {
                    layer : waterCap,
                    title : "Water Capacity",
                    collapsed : true,
                    slider : true
                }, {
                    layer : waterQual,
                    title : "Water Quality",
                    collapsed : true,
                    slider : true
                }, {
                    layer : special_projects,
                    title : "Special Projects",
                    collapsed : true,
                    slider : true
                }
            ]
        }, 'tocDiv');
    toc.startup();
    toc.on('load', function () {
        if (console)
            console.log('TOC loaded');
    });

    //set visible layers
    administrative.setVisibleLayers([3]);
    agriculture.setVisibleLayers([-1]);
    critHab.setVisibleLayers([-1]);
    forest.setVisibleLayers([-1]);
    geology.setVisibleLayers([-1]);
    presOS.setVisibleLayers([-1]);
    presPriority.setVisibleLayers([-1]);
    transportation.setVisibleLayers([-1]);
    waterCap.setVisibleLayers([-1]);
    waterQual.setVisibleLayers([-1]);
    special_projects.setVisibleLayers([-1]);
});
//Layers
var HLTerrainBasemap = new ArcGISTiledMapServiceLayer("http://arcserver/arcgis/rest/services/basemaps/Highlands_Basemap/MapServer");

var parcels = new FeatureLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/3", {
        mode : FeatureLayer.MODE_ONDEMAND,
        outFields : ["*"]
    });
var muni = new FeatureLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/1", {
        mode : FeatureLayer.MODE_ONDEMAND,
        outFields : ["*"]
    });

var agriculture = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Agricultural_Resources/MapServer", {
        opacity : 0.8
    });
var administrative = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer", {
        opacity : 0.8
    });
var critHab = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Critical_Habitat/MapServer", {
        opacity : 0.8
    });
var forest = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Forest_Resources/MapServer", {
        opacity : 0.8
    });
var geology = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Geology/MapServer", {
        opacity : 0.8
    });
var presOS = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Preserved_Open_Space/MapServer", {
        opacity : 0.8
    });
var presPriority = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Preservation_Priority/MapServer", {
        opacity : 0.8
    });
var transportation = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Transportation/MapServer", {
        opacity : 0.8
    });
var waterCap = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Water_Capacity/MapServer", {
        opacity : 0.8
    });
var waterQual = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Water_Quality/MapServer", {
        opacity : 0.8
    });
var special_projects = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Special_Projects/MapServer", {
        opacity : 0.8
    });

//add the layers
map.addLayer(HLTerrainBasemap);
map.addLayers([administrative, agriculture, critHab, forest, geology, presOS, presPriority, transportation, waterCap, waterQual, special_projects]);

//get extent info
map.on("extent-change",
    function findExtent() {
    var e = map.extent;
    var s = "";
    s = "<b>XMin:</b> " + e.xmin + "<br/>" +
        " <b>YMin:</b> " + e.ymin + "<br/>" +
        " <b>XMax:</b> " + e.xmax + "<br/>" +
        " <b>YMax:</b> " + e.ymax + "<br/>" +
        " <b>Spatial Reference(wkid): </b> " + e.spatialReference.wkid + "<br/>" +
        " <b>Center(x,y): </b> " + e.getCenter().x + ", " + e.getCenter().y;
    dom.byId("onExtentChangeInfo").innerHTML = s;
    var d = "";
    d = "<b>Zoom Level:</b> " + map.getLevel() + "<br/>" +
        "<b>Resolution:</b> " + map.getResolution() + "<br/>" +
        "<b>Scale:</b> " + map.getScale();
    dom.byId("details").innerHTML = d;
});

//Parcel Highlight Symbol
var highlightSymbol = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 3),
        new Color([125, 125, 125, 0.2]));
//Muni Highlight Symbol
var muniHighlightSymbol = new SimpleLineSymbol(
        SimpleLineSymbol.STYLE_SOLID,
        new Color([0, 255, 255]),
        3);
//Click Symbol
var symbolClick = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10,
        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1),
        new dojo.Color([0, 255, 0, 0.25]));

//Zoom to Municipality
var queryTaskMuni = new esri.tasks.QueryTask("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/1");
var muniQuery = new esri.tasks.Query();
muniQuery.outFields = ["*"];
muniQuery.returnGeometry = true;
on(dom.byId("muniZoom"), "click", muniExecute);

function muniExecute() {
    map.graphics.clear();
    var muni = dijit.byId("muniSelect").value;
    muniQuery.where = "SSN = '" + muni + "'";
    if (muni.length === 0) {
        alert("Please Select a Municipality");
    } else {
        queryTaskMuni.execute(muniQuery, muniResults);
        dojo.style(dojo.byId('MuniPane'), "display", "block");
    }
}
function muniResults(results) {
    var resultItems = [];
    var resultCount = results.features.length;
    for (var i = 0; i < resultCount; i++) {
        var featureAttributes = results.features[i].attributes;
        for (var attr in featureAttributes) {
            resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
        }
        resultItems.push("<br>");
    }
    map.graphics.clear();
    dom.byId("MuniInfo").innerHTML = resultItems.join("");
    var resultExtent = graphicsUtils.graphicsExtent(results.features);
    map.setExtent(resultExtent.expand(1), true);
    highlightMuni(results);
}

function highlightMuni(results) {
    var graphic = results.features[0];
    graphic.setSymbol(muniHighlightSymbol);
    map.graphics.add(graphic);
    console.log('Muni Extent!');
}

function queryTaskExecuteCompleteHandler(queryResults) {
    console.log("complete", queryResults);
}
function queryTaskErrorHandler(queryError) {
    console.log("Query error", queryError.error.details);
}

// Query Parcel Geometry
map.on("click", clickPoint);

function clickPoint(event) {
    map.graphics.clear(pointGraphic);
    var queryPoint = event.mapPoint;
    var pointGraphic = new Graphic(queryPoint, symbolClick);
    map.graphics.add(pointGraphic);
    var l = "";
    l = "<b>Lat:</b> " + queryPoint.x + "<br/>" +
        "<b>Long:</b> " + queryPoint.y;
    dom.byId("clickedCoords").innerHTML = l;
    console.log("queryPoint: ", queryPoint);
    var clickQuery = new Query();
    var ClickQuerytask = new QueryTask(parcels.url);
    clickQuery.returnGeometry = true;
    clickQuery.outFields = ["OBJECTID", "PAMS_PIN", "SSN", "BLOCK", "LOT"];
    clickQuery.geometry = queryPoint;
    ClickQuerytask.execute(clickQuery, parcelResults);
    console.log("clickQuery: ", clickQuery);
}

//Query BLOCK/LOT
var queryTask = new QueryTask(parcels.url);
var query = new Query();
query.returnGeometry = true;
query.outFields = ["OBJECTID", "PAMS_PIN", "SSN", "BLOCK", "LOT"];
queryTask.on("error", queryTaskErrorHandler);
queryTask.on("complete", queryTaskExecuteCompleteHandler);
on(dom.byId("execute"), "click", execute);

function execute() {
    dojo.style(dojo.byId('ParcelPane'), "display", "block");
    var ssn = dijit.byId("muniSelect").value;
    var block = dom.byId("block").value;
    var lot = dom.byId("lot").value;
    if (!ssn || !block || !lot) {
        dojo.style(dojo.byId('modivPane'), "display", "none");
        dom.byId("ParcelInfo").innerHTML = "<div class='error'>Please Complete all Fields</div>";
    } else {
        query.where = "SSN = '" + ssn + "' AND BLOCK = '" + block + "' AND LOT = '" + lot + "'";
        queryTask.execute(query, parcelResults);
        console.log("query: ", query);
    }
}
function parcelResults(results) {
    dojo.style(dojo.byId('MuniPane'), "display", "none");
    dojo.style(dojo.byId('ParcelPane'), "display", "block");
    var resultItems = [];
    var resultCount = results.features.length;
    console.log("Parcel Result Count", resultCount);
    for (var i = 0; i < resultCount; i++) {
        var featureAttributes = results.features[i].attributes;
        for (var attr in featureAttributes) {
            resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
        }
        dojo.style(dojo.byId('modivPane'), "display", "block");
        findRelatedRecords(results);
    }

    if (resultCount === 0) {
        dojo.style(dojo.byId('modivPane'), "display", "none");
        dom.byId("ParcelInfo").innerHTML = "<div class='error'>No Record Found</div>";
    } else {
        map.graphics.clear();
        dom.byId("ParcelInfo").innerHTML = resultItems.join("");
        highlightParcel(results);
    }
}
//Zoom to Result & Set Query Result Symbol
function highlightParcel(results) {
    var parcelGraphic = results.features[0];
    parcelGraphic.setSymbol(highlightSymbol);
    map.graphics.add(parcelGraphic);

    var resultExtent = graphicsUtils.graphicsExtent(results.features);
    map.setExtent(resultExtent.expand(2));
    console.log('Parcel Extent!');
}
//Query related records
function findRelatedRecords(results) {
    dojo.style(dojo.byId('modivPane'), "display", "block");
    var features = results.features;
    var relatedTopsQuery = new RelationshipQuery();
    relatedTopsQuery.outFields = ["OBJECTID", "MUNI", "COUNTY", "QUALIFIER", "PROP_CLASS", "PROP_LOC", "OWNER", "LAND_VALUE"];
    relatedTopsQuery.relationshipId = 0;
    relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID];
    parcels.queryRelatedFeatures(relatedTopsQuery, function (relatedRecords) {
    try{
        var fset = relatedRecords[features[0].attributes.OBJECTID];
        console.log("fset: ", fset);
        var relatedItems = [];
        var relatedCount = fset.features.length;
        console.log("Related Record Count: ",relatedCount);
        for (var i = 0; i < relatedCount; i++) {
            var items = fset.features[i].attributes;
            for (var attr in items) {
                relatedItems.push("<b>" + attr + ":</b>  " + items[attr] + "<br>");
            }

            dom.byId("modivInfo").innerHTML = relatedItems.join("");
        }
        if(relatedCount > 1){
            var recordCount = " (" + relatedCount + " Records Found)";
            dom.byId("RecordCount").innerHTML = recordCount;
            }else{
            dom.byId("RecordCount").innerHTML = " (1 Record Found)";
            }
            }
            catch(err){
            dom.byId("RecordCount").innerHTML = "";
            dom.byId("modivInfo").innerHTML = "<div class='error'>No Record Found</div>";
            }

    });
}

//Reset button
on(dom.byId("reset"), "click", reset);
function reset() {
    console.log("Reset Function Called");
    dijit.byId("muniSelect").reset();
    dijit.byId("block").reset();
    dijit.byId("lot").reset();
    dojo.style(dojo.byId('MuniPane'), "display", "none");
    dojo.style(dojo.byId('ParcelPane'), "display", "none");
    dojo.style(dojo.byId('modivPane'), "display", "none");
    map.graphics.clear();
    map.setExtent(initialExtent);
    console.log("Reset Function Complete");
}

//map loading animation
var mapLoading = dom.byId("map-loading");
map.on("update-start", function () {
    esri.show(mapLoading);
});
map.on("update-end", function () {
    esri.hide(mapLoading);
});

});
  • 1
    Is there a specific operation when memory leaks begin? – Aamir Suleman Jan 23 '15 at 21:28
  • it seems to happen at any operation; zooming or query will ramp up the cpu and ram enormously in both firefox and chrome. – its30 Jan 23 '15 at 22:10
  • Could you try commenting out the "update-start" and "update-end" events. Also include in addLayers HLTerrainBasemap as the first layer instead of separately adding it. – Aamir Suleman Jan 25 '15 at 21:37
  • I tried both of these suggestions and cleaned up my code a little bit. Still having the same performance issues. – its30 Jan 26 '15 at 14:57
  • 2
    Are there other scripts besides the one you posted? You could try eliminating some functions by exiting them early. LIke the findRelatedRecords, or findExtent. – Aamir Suleman Jan 26 '15 at 15:34
0

It seems my issue was with the 'TOC' widget. Adding that many dynamic layers to my app significantly reduced performance in chrome and firefox for some reason. After combining all dynamic layers into one, the issue was resolved and now the application runs smoothly in all browsers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.