+ Start a Discussion
Greg FinzerGreg Finzer 

How to improve Salesforce Lightning save performance?

I have over 2000 checkboxes in my lightning component and the componet loads within 6 seconds.  However when saving Salesforce Lightning crawls and takes a minute on my machine to save and for our QA Tester it is taking over two minutes to save.  The back end is only taking 300 milliseconds.

Here is the log for the front end:
JSON.stringify: 257.11669921875ms
FRCElementMatrixComponent.js:246 JSON.parse: 26.737060546875ms
FRCElementMatrixComponent.js:261 filter: 4.0048828125ms
FRCElementMatrixComponent.js:278 clear v.elements: 4213.22509765625ms
FRCElementMatrixComponent.js:287 saveAction: 32226.1650390625ms
FRCElementMatrixComponent.js:331 loadElementMatrixData: 12743.0830078125ms

 
var saveAction = component.get("c.saveElements"); 

console.time('JSON.stringify');
var allJson = JSON.stringify(component.get("v.elements"));
console.timeEnd('JSON.stringify'); 

console.time('JSON.parse');
var allObj = JSON.parse(allJson);
console.timeEnd('JSON.parse');

//Only save elements that are enabled and that have changed
function checkElement(element) {
	if (element.checkboxDisabled)
		return false;
	if (element.IsGroupRow)
		return false;
	
	return element.Renovated != element.RenovatedOriginal;
}

console.time('filter');
var onlyEnabledObj = allObj.filter(checkElement);
var onlyEnabledJson = JSON.stringify(onlyEnabledObj);
console.timeEnd('filter');                
		
//Clear everything because it results in less save time
allJson = null;
allObj = null;        

console.time('clear v.elements');
component.set("v.elements", []); 
console.timeEnd('clear v.elements');

saveAction.setParams({
	accountId : component.get("v.recordId"),
	elementsJson : onlyEnabledJson
});

saveAction.setCallback(this, function(a) {
	if (a.getState() === "SUCCESS") {
		console.timeEnd('saveAction');
		//We have to load after we save to re-calculate everything
		var loadAfterSaveAction = component.get('c.doLoadAfterSave');
		$A.enqueueAction(loadAfterSaveAction);
	} else if (a.getState() === "ERROR") {
		$A.log("Errors", a.getError());
	}
});

console.time('saveAction');
$A.enqueueAction(saveAction);