Browser slowdown since 0.2.5

[Maxim Zviagintsev]

My gallery app makes the browser to "hang" for ~5 sec on each page load after upgrade to 0.2.5+
Tested in Chrome and Firefox. No errors in console, but Firefox shows warning about page slowdown.

transformOptions: {
                                alt: 'alt',
                                security: {
                                    policy: filestackPolicy,
                                    signature: filestackSignature
                                },
                                formats: ['pjpg'],
                                keys: true,
                                sizes: {
                                    fallback: '60vw',
                                },
                                transforms: {
                                    resize: {
                                        height: 201,
                                        width: 268,
                                        fit: 'max'
                                    },
                                    rotate: {
                                        deg: 180
                                    },
                                    output: {
                                        format: 'pjpg',
                                        strip: true,
                                        quality: 80,
                                        compress: true
                                    },
                                    cache: {
                                        expiry: 31536000
                                    }
                                }
                            }

And this is how I request a src URL on each iteration through the array for my gallery:
src: ${picture(item.filestack_handle[0], item.transformOptions).lastChild.src}`

[Andrzej Sala]

@Max-Zviagintsev
Hi Max,
It's probably related to using transforms from filestack js sdk which was implemented in 0.2.5 .
Can you share link to place where adaptive is implemented and cause this performance issue?

[Maxim Zviagintsev]

Sure, you can look at it here
Each request to filestack via filestack-adaptive API cause massive browser slowdown, but If I downgrade to 0.2.4 it loads without delay.

[Andrzej Sala]

The problem is that when generating a filelink via our sdk each task is validated. So in your case it's 50 (images) * 15 (different sizes - fallback) * 5 (transform tasks) validations.
We should release a new version in the next days which at default in your case should have boost around 50% and with implement optional possibility of switching of validation with bigger performance boost.
To this time I recommend using 0.2.4 in your case.

[Frank Bracq]

"We should release a new version in the next days"

Any idea when this release will be available?

[Andrzej Sala]

@Max-Zviagintsev @frankbracq
I had released 0.2.7 version, you can check it.

If you want to get a bigger performance boost, you can also set 'useValidator: false' option to disable checking of correctness of tasks params by browser side, before doing a real request.

[Maxim Zviagintsev]

@AndrzejSala Looks like you did a great job!
We see significant performance boost, here is an updated version of our app.
As for the Validator, did I use it in the right place?

transformOptions: {
alt: 'alt',
security: {
policy: filestackPolicy,
signature: filestackSignature
},
formats: ['pjpg', 'webp'],
keys: true,
sizes: {
fallback: '60vw',
},
useValidator: false,
...

Also could you please give us a hint what is this validator used for, and what consequences of disabling it?
Thank you!

[Andrzej Sala]

@Max-Zviagintsev
Yup, useValidator should be used in 1 level of the options object.

According to the second question, the short answer is that it has no additional consequences.

Since 0.25 we are using our sdk to generate filestack filelinks, because we don't want to duplicate code. At default it validates params for every tasks (eg. resize: {width: 250, height: 150}) and if params are not correct throw error before doing request to filestack. It's useful when you are creating filelinks directly by sdk eg. by your backend system. So it's choice between throw an error before doing request or try to load url which is not available.

Maybe it even should be false at default.