performance problems, loading speed

[emilyhobson]

Current site is unacceptably slow and doesn't load on IE (required for OSE). We can address in greater depth in phase 2 but we need the pages to moderately function for phase 1.

Trouble areas:

1. Initial load
2. Metric panes - clicking on a pane generates a response after several seconds
3. page freezing altogether

Thoughts around causes:

• lots of javascript and css files, color ramps
• large number of points (we'll need to support 100k+ ongoing)
• lack of caching

Suggestions:
Change functionality of building comparison - since you can't see this section and the map at the same time (on a laptop), initiate load of comparison table upon scroll or button action.

[almccon]

Our temporary fix of removing the comparison view (9df25b7) seems to be causing the CARTO layers to stack up on each other, instead of removing and replacing the layer when you choose a different metric.

[almccon]

I tried making the building comparison display: none as default, but that doesn't speed up the loading. Still takes just as much time as if it were rendering the whole thing.

So we still have change it to actually delay the build of that table until the user clicks to show it. Proceeding with that plan.

[almccon]

I narrowed down the slowness to this part of the code:

seattle/src/app/views/building_comparison/building_comparison.js

Lines 36 to 55 in a11e35c

	buildings.forEach(function(building, i){
	var id = building.get(this.buildingId);
	var currentMetricHash = this.lookup[id].metrichash;
	if (currentMetricHash === metrichash) return;
	var metrics = _.map(metricFields, function(field) {
	var value = building.get(field),
	color = this.gradientCalculators[field].toColor(value);
	return {
	value: value,
	color: color,
	isYear: (field == 'yearbuilt'), // TODO: don't hardcode this. Use isYear attribute instead.
	undefined: (value ? 'defined' : 'undefined')
	};
	}, this);
	this.lookup[id].metrics = metrics;
	this.lookup[id].metrichash = metrichash;
	}, this);

Or at least that's one cause of the slowness on initial load. Continuing that thread in issue #39. Keeping this issue open in case there are other cases to slowness to address.

[almccon]

Loading time is much improved, thanks @sconnelley. Looks like this commit did it: eac0925

[sconnelley]

yes, the toColor method in BuildingColorBucketCalculator was taking ~4ms to complete. Each building calls that method, so for 3k buildings that equals a lot of time.