Performance on massive form

[akunno]

I have a form with ~20 tabs and ~15 questions per tab. Some questions are in repeaters/arrays.

The performance on rendering the page seems to be very slow, unfortunately. It currently takes ~3 seconds on a 3ghz machine, but more than 20 seconds on a machine with a 1.5ghz to 2ghz processor. I've tried disabling all of the various plugins for schema form, but it doesn't change much (if anything).

Profiling in chrome has come back with a lot of calls to scope events which are causing the slow down, but I can't pin it on anything in particular unfortunately.

On my fast machine (3 seconds to render the page): regularInterceptedExpression is called 438 times @ 0.005 ms totalling 2 seconds. {{form.key.slice(-1)[0] }} is 333 times totalling 1.8 seconds showTitle() is 160 times @ 1.3 seconds

and so on..... nothing I can obviously just 'change' in how I've constructed the form to fix quickly (AFAIK).

I've attempted numerous times to snapshot the rendered form and just output the relevant HTML to avoid re-processing (i.e., render it into HTML with ng-* expressions) but the form either doesn't show on page, or if I hijack the render(schema, form) method then I just get

<form class="schema-form-ignore"><bootstrap-decorator form="schemaForm.form[0]" class="ng-scope"></bootstrap-decorator><bootstrap-decorator form="schemaForm.form[1]" class="ng-scope"></bootstrap-decorator><bootstrap-decorator form="schemaForm.form[2]" class="ng-scope"></bootstrap-decorator><bootstrap-decorator form="schemaForm.form[3]" class="ng-scope"></bootstrap-decorator><bootstrap-decorator form="schemaForm.form[4]" class="ng-scope"></bootstrap-decorator></form> Do you have any suggestions or hints on how to boost performance based on my hopefully brilliant description of the problem (;p) OR know of any tricks to force the bootstrap-decorators to also get processed in order to capture the form output as a pre-rendered form which I then just link to the model?

I'm not brilliant with angular, having only dealt with it for a few months, so I may be missing something obvious.

[akunno]

Actually the calls to {{form.key.slice(-1)[0]}} are quite repetitive - particularly in default.html

By removing them entirely there's a performance increase of around 30%, so reducing the number of calls in any way would be good. Could ng-init be used to reduce the number of calls here?

[Anthropic]

@akunno one way binding is being added to the Material decorator for most instances of key use and may be added as an option to the core.

[aman-gautam]

One approach that I took on a large form was to divide the form in smaller, logically related sections and showing only one of them at a time..

$scope.schema = {
  // ....
}

$scope.partForm = {
  part1: [],
  part2: [],
  part3: []
}

$scope.form = $scope.partForm['part1']; // default section of the form that is visible

$scope.selectFormPart = function (part) {
  $window.scrollTo(0, 0);       // Optional
  $scope.currentPart = part;
  $scope.form = partForm[part];
};

In the UI, I have affix menu that calls the selectFormPart function to change the visible part.

This is not the best solution, but more of a workaround to work with large forms. I divided 2000+ fields in about 14 different sections. It's much quicker that way.

[UniverseHan]

How is going on?

[Anthropic]

@UniverseHan if you mean regarding performance, the alphas should perform better than previous versions, other than that it will improve the more I get time to work on it.