Slow rendering for large arrays

[dannymcpherson]

When I load an array of ~40 elements, where each element is an object containing 8 properties, rendering slows down dramatically. I see this on Chrome, FF, and Safari using a high-end macbook pro.

It would be helpful to know if there are any workarounds, or if this is expected behavior.

Thanks!

[jbsaff]

Just for clarity, are you using the new builder? If not, swap out the bootstrap-decorator.js file from https://github.com/Textalk/angular-schema-form-bootstrap and see how it goes. My understanding is that the new builder is aiming to address just that sort of performance situation. You can read a little more about it here https://medium.com/@SchemaFormIO.

[davidlgj]

@jbsaff @dannymcpherson Yes try out the new builder. Sadly it isn't a dramatic speedup currently. I've been looking at performance a lot lately and currently it's the angulars $compile and linking of the generated form that takes a long time. I don't think I'm doing something wrong, But there is just a lot of directives and bindings to go through. In the future I hope to get rid of some of them by using builder helper functions instead. For example setting a class if fieldHtmlClass option is set instead of having class="{{form.fieldHtmlClass}}" in every template.

So, yeah, to answer your question. It probably is expected behavior. Although I've mostly been doing performance analysis on tabs so there might be something fishy here.

[dannymcpherson]

Quick update: installing angular-schema-form-bootstrap only made marginal improvements. As an example, one form went from taking 5s to about 3s. This is still quite a long time to wait for a web form to render. In addition, with angular-schema-form-bootstrap, the tabarrays initially render below the tabs (default tab position specified), or not at all, until a tab is clicked. Then it snaps to the correct position.

I look forward to future improvements. This is still an amazing tool :)

[zcapin]

Does making fields 'readonly' speeds up render process? I am making excel-like app, this tools seemed like an awesome solution, and now it seems angular is in the way...

[nicklasb]

You'll have to try, but I don't think that it would matter all that much.
A workaround solution is to window it and just work with part of the array.
@Anthropic, do you know if there will be any major applicable improvements on performance?

[Anthropic]

@zcapin which version are you using, you are best off with the version of bootstrap decorator from that repo and the schema-form version from this repo, they make the arrays much better than with the version of bootstrap found in the release here. The new builder will improve performance more in future too as we migrate more elements into it instead of in the old decorator style or templates.

[zcapin]

I am using version 0.8.13 with bootstrap-decorator. But i have a huge form.json ~20000 rows, which leaves me helpless, there is simply no way that this works fast, and what happens after adding even more watchers... I think i read somewhere you made material-decorator that is very fast when compared to bootstrap-decorator? i read that on #635

[nicklasb]

AFAIK, Excel isn't rendering 20000 rows either, it only renders those visible and some more. It just looks like it because it does so in a smooth fashion. What you probably need is a windowing functionality that only renders the visible part of the form. However, I am not sure if it is easy to implement. //Nicklas Den 9 jan. 2017 1:29 PM skrev "zcapin" <notifications@github.com>:

…

I am using version 0.8.13 with bootstrap-decorator. But i have a huge form.json ~20000 rows, which leaves me helpless, there is simply no way that this works fast, and what happens after adding even more watchers... I think i read somewhere you made material-decorator that is very fast when compared to bootstrap-decorator? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#530 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIPBJz7edxGRyXr2z_WvvW5t1xf1brw6ks5rQigzgaJpZM4F0cby> .

[zcapin]

Ok, i think i got it, removing duplicate keys seems to have a good impact :) Probably merging the form with the schema becomes problem? What happens?

My rendering took 10s before and now its only 4s :)

[Anthropic]

Please re-open if you do not feel the question has been answered sufficiently.