ArcGIS Javascript API Feature Layer retrieval

Question

I would want to develop an application where we could query the layer based on a result set of certain attributes of the features and highlight features.

Approach
Currently I tried using the feature services of ArcGIS server to do so. The feature service has around 50k features.

Issue:
While trying retrieve and highlight the feature using a query task it takes quite a long time for the process to complete and the browser literally hangs.

Question:
1) Is there a faster way to retrieve and highlight the features?
2) Could I use a better approach rather than using a feature service to achieve my end goal? Please do suggest.

Have provided my code below.

  esri.config.defaults.io.proxyUrl = "proxy.ashx";
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.FeatureLayer");
  dojo.require("esri.tasks.query");
  var map;
  var featureset=[];
  var infoTemplate = new esri.InfoTemplate();
  infoTemplate.setTitle("${ROADNAME}");
  infoTemplate.setContent( "<b>ROAD NAME: </b>${ROADNAME}<br/>"
                         + "<b>CAT</b>${CAT}</b>"+ "<b>LINK_ID</b>${LINK_ID}</b>"); 

  function init() {

 try {
         var initExtent = new esri.geometry.Extent({"xmin":103.55,"ymin":1.13,"xmax":104.16,"ymax":1.56,"spatialReference":{"wkid":4326}});

map = new esri.Map("map",extent:esri.geometry.geographicToWebMercator(initExtent)});

var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
var basemap_sing = new esri.layers.ArcGISTiledMapServiceLayer("http://karthikpc:8399/arcgis/rest/services/Carriage_Mercantor/MapServer",{ displayLevels:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]});


var featureLayer = new esri.layers.FeatureLayer("http://karthikpc:8399/arcgis/rest/services/Carriage_Mercantor/FeatureServer/0", {
            mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
            infoTemplate: infoTemplate,
            outFields: ["*"]
        });

  var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_CROSS, new    dojo.Color([255,0,0]), 3), new dojo.Color([125,125,125,0.35]));
   map.addLayer(basemap);
   map.addLayer(basemap_sing);
   dojo.connect(map, "onLoad", new_function);
   }
catch(e){
    alert('An error has occurred: '+e.message);
    }

    }

 function new_function(){
    var queryTask = new   esri.tasks.QueryTask("http://karthikpc:8399/arcgis/rest/services/Carriage_Mercantor/FeatureServer/0");
    var query = new esri.tasks.Query(); 
    query.returnGeometry = true;
    query.outFields = ["LINK_ID","ROADNAME","CAT"];
    query.where = "CAT='CATA'";
    dojo.connect(queryTask, "onComplete", function(featureSet) {
          map.graphics.clear();
          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_CROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));
   dojo.forEach(featureSet.features,function(feature){
   var graphic = feature;
   graphic.setSymbol(symbol);
   graphic.setInfoTemplate(infoTemplate);
   map.graphics.add(graphic);

   });

   });
   queryTask.execute(query);
   }

   dojo.addOnLoad(init);

Answer 1

A feature service returns graphics that the client browser must render. If you used a MapServer service you might have better results. 50k features is a lot to display, a heat map might be a better approach for performance and usability. If your data does not change very often, a tiled layer map be your best bet.

Answer 2

You can also choose for a smaller extent to display initially. In that way the server doesn't have to load 50k features at once. If that isn't possible you may want to use heatmaps like Karthik Bharadwaj suggested.