Which way to choose to optimize a very large page with a bunch of inputs?

Question

PHP

Greetings.

There is a service page. It has many inputs, span with numbers, buttons. Buttons perform actions, for example:

• filling all inputs of a certain class with a value from another input with a value
  
• bypassing inputs, collecting their values ​​and data-attributes into arrays, sending them to the server via Ajax
  
• send by ajax only selected rows or rows grouped by parent (such as a section)
  

The problem is that there are more than 18,000 lines (divs with five inputs, a bunch of other html). As long as there were several hundred lines, everything worked quickly. But now, firstly, the template engine (Smarty) generates a page in ~ 8 seconds, the output html weighs > 80 megabytes, all this takes one and a half to two minutes to load and barely scrolls in the browser. In addition, with some actions, I run into js error maximum call stack size exceeded. Of course, there is gzip compression on the server, but it doesn't really help.

Obviously it's time to change something :)

Possible options:

• Send .json with bare data from the server to the client, form controls on the client using jQuery Templates.
  
• Trying to reduce the number of elements in html. There may be a gain, but it seems very small.
  
• Pagination. But it is swept aside, because. in mass operations, ctrl+f and the like is the most buzz.
  
• The last item on my list, but probably the first item in priority: now I have, for example, such constructions: $(selector).on('click', function(){// some code});. As a result, about a thousand handlers. And there are more than one thousand of them. Obviously this needs to be rewritten to

  $('body').on('click', selector, function(){// some code});

  
  

Who has experience, knowledge, tell me if it is generally rational to use jQuery Templates here, what strategies should be used when working with so many data, elements and handlers. I would really hate to rewrite everything to json + templates and find that it loads in 3 seconds, but renders 40.

Thanks in advance.

Answer 1

It's not entirely clear what exactly you are doing and why you need to see all this bunch of data at the same time, but at first glance it looks like you need a normal search for all this data on the server side.

Answer 2

We still need to change something so that HTML does not weigh 80 megabytes and there are not 18,000 lines. A person will not read all these thousands of lines anyway.

Answer 3

Transferring rendering from the server side to the client will result in a performance degradation of 10 times with this amount of data.
It is necessary to solve the problem in several ways
1. In smarty2, refuse to include, switch to defun / fun plugin (if include is used)
2. In smarty3, try to reduce the number of functions if there are many and they are small
3. Minimize the generation of templates on the client side
4 Since the operator does not need everything at once, it is possible to break the interface into many small parts, and load them on demand. as finished html.
5. The problem of filling in the set of fields must be solved not through jQ. Here, the most correct way would be to cache links to nodes and iterate over them. Personally, I use my tools for this, in which caching is done out of the box
.
The maximum nodes that the browser digests should be kept in the region of 10-20K.
If you need any more consultations, it is better to write to me on Skype (in profile) or in a personal message.

Answer 4

1. jQuery Templates are deprecated and no longer supported. This must be taken into account. Their speed is not the worst, but it seems to be faster.
2. It will take a really long time to render - the client machine is most likely slower than the server. You can do two things: give the client pre-compiled templates (it doesn't make much sense if the templates are simple), and not render everything at once, but asynchronously in chunks of 5 of your lines.
3. You can replace pagination with "infinite" scrolling. Search to provide other means.

Answer 5

If the page problem is only in the search, then as mentioned above, you need to do a normal ajax search.
Either this task is somehow solved differently, but you need to know what all this is for.

Answer 6

18,000 lines? Still, it's overkill.
You can do asynchronous loading of the displayed content - and let the server deal with mass operations, it's just a spit for him. If you search using Ctrl-f, then generate a page with only id && name, and let prices be loaded “on demand”.
You can write a client in C#.

Answer 7

Surely some elements are repeated on the page for each line (I'm talking about these five inputs). Why not put them in a separate Popup, and store the data for individual elements in JS or in hidden? And it will be easier to give JSON data ...

Answer 8

Did you do Excel in a browser?

Answer 9

There are a lot of optimization options, for starters, at least cache the generated templates in smart + optimize the layout. I once made 2 from 5 MB of html by simply renaming classes and minimizing the layout. It will no longer be 80 MB.
The problem needs to be solved in the other direction, and if in a year there will be 50,000 lines? Increase RAM on client machines? Convince the customer to make dynamic ajax tables - they will digest a million rows - github.com/clausshellsing/JqTable