DOM slow to respond

Asked

Viewed 71 times

0

Next, I have an application that within the . NET charging is fast, it takes 1,423s for the method to respond, only when it goes to the VIEW it is taking longer...

It’s like something is holding the release of the screen.

inserir a descrição da imagem aqui

Number of records returned per method:

  • "listarMotoristas" : 14
  • "List of Tickets" : 16
  • "list Carriers" : 77
  • "List Foundation" : 6
  • "ListarColetasPendentes" : 278
  • "ListarOrdensEmConference" : 308

inserir a descrição da imagem aqui

Follow the code I use in VIEW :

https://paste.ofcode.org/4Uf4PZUndm8f6L3NLyh9cv

Is there anything you’re doing wrong or that I can make better?

Thank you.

  • A first question is, for each call of these, how many items are returned? For some calls you create multiple elements before doing the append, need to see the quantity to understand the performance problem

  • This is Ricardo, I just updated the post.

  • It is not much to cause this slowness, the problem must be in the way you are adding the elements.. Before posting a response, let’s run a test with any service, the "Listrcoletapendent" for example. In your code, you add the elements inside the each, which is bad, because the DOM has to be processed many times... let’s create an element, a div, add all elements to this div within the each and finally add it all at once to DOM to see if this already resolves (otherwise we will have to do without jQuery)

  • Easier, let’s use "Listsrotesemandage" on line 225, before each, you will create an element> var $d = $("<div />");, and on line 283, you will no longer add the content "myWellLote" in the "divColetar", but so: $d.append(myWellLote); Finally, add $d off the foreach, there on line 294: $('#divColetar').append($d);

  • This will make you process all new Ivs within an element without adding to DOM, adding everything at the end, which makes it much faster. Do a test to see the difference

  • Much faster, just the Listlethal method you’re holding now...

  • The problem with the Listpendant method is that this If serves to group the information by Region.. i.e., add orders within the region div...

  • True, so I gave up on it as an example :) but let’s try to do without jQuery, it will help

  • In the each on line 180, let’s create an element and add the content: var e = document.createElement("div"); e.innerHTML = myWellLogistica; and switch to document.getElementById('divPendenciasLogistica').appendChild(e); and do the same with "myOrdem"

  • See if using pure javascript improves performance

  • I think in this case it pays to modify the way it is mounted in the . NET to do the same as the Listarlotesemandamento method.. . then I can delete this if. What do you think?

  • This would be ideal if you could do, ai can do as in others, add the dynamic content in an element that is not in the dom and then add everything at once. If of curiosity, how much improved the time of any of them to have an idea?

  • Look at the times... https://ibb.co/cPm8to

Show 9 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.