Button design speed

[tbettinazzi@axioma.it]

I’ve a huge page in wich are drawn more or less 350 buttons.

Many buttons are identical (changes only the action thei execute).

Using standard html button the drawing is immediate (more or less) using smart-button it takes more than 10 secs.

Is there a way to speed up such drawing process ?

Tks.

Tullio

• This topic was modified 1 week, 3 days ago by tbettinazzi@axioma.it.

[admin]

Hi Tulio,

Not, sure what you do, but when you add these at once, it requires just 1 render and executes immediately. See https://codepen.io/jqwidgets/pen/PoMBdWr

Regards,
Markov

Smart UI team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

I sent you a testcase reproducing the slowness.

Tks

Tullio

[admin]

Hi Tulio,

You can look at the sample I sent you for the correct way to add 350 or more.

Regards,
Markov

Smart UI team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

In your example You used code, I need to use tags.

I don’t know if this is the difference.

Tks

[admin]

Hi Tulio,

Yes, it is. You can read more about it here https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

Regards,
Markov

Smart UI team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Tks but this doesn’t solve my problem.

My buttons are distributed among many others html objects and then I believe I can’t create a document fragment, add all buttons and then attach the document fragment.

Could You suggest a viable workaround ?

Furthermore the link You posted tells documentFragment have better performances on “older engines” but I’m using last versions of chrome and firefox.

Tks

Tullio

 

[admin]

Hi Tullio,

This is a common way to add a lot of content to a web page. This is the solution. There is not another.

Regards,
Markov

Smart UI team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Yes but I can’t, if I understand right your soulution.

As explained my button are mixed with other html object (like text, icons etc…) within an html table.

I don’t understand how I can add them at the beginning and then dispose them in the correct position.

If You look at the provided testcase You’ll see the real situation I should work in.

Tks

[admin]

Hi,

Even without the document fragment it loads very fast – https://codepen.io/jqwidgets/pen/PoMBdWr. I would suggest you to use dev tools or other dev utilities to measure what slows down your app.

Regards,
Markov

Smart UI team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

In the code You posted buttons are still built by code and not by tags.

I used firefox performance and I saw all “slowness” is in Your code : I’ve only a very smalljs in my code.

Tks

[tbettinazzi@axioma.it]

If usefull I can try to provide the firefox profiler infos.

[Author]

Posts