Web portal: optimize jobs-table. #691
Conversation
| {type: 'num', targets: [3, 4]}, | ||
| ], | ||
| 'deferRender': true, | ||
| 'autoWidth': false, |
There was a problem hiding this comment.
What does autoWidth mean and what will happen if it is disabled?
There was a problem hiding this comment.
When autoWidth is enabled, DataTables will layout all possible rows (which means 350,000 rows in the benchmarks). collect widths of every cell and calculate the most suitable width of each column. When it is disabled, widths of each column will be decided by the browser, based on data in the current page. So this will cause different page have different column widths (but total will remain 100% of table width, which is set explicitly in CSS)
| }, | ||
| }); | ||
| 'columns': [ | ||
| {title: 'Job', data: 'name', render(name, type) { |
There was a problem hiding this comment.
Does this ‘render’ function play the trick of lazy calculation?
There was a problem hiding this comment.
Exactly, render function, especially heavy "display" branch will be calculated only when it is needed to render to the page, which runs pageSize times(as well as "autoWidth" is disabled).
|
Could you explain why DataTables Ajax is faster than the original method (sending http request outside datatables object)? What optimization’s does it make? |
|
Using DataTables Ajax will make the network request (which is Async and does not block the JavaScript event loop) & layout initialization run in parallel. Currently, layout initialization runs just after ajax response. |
|
Please merge at will. |
|
Due to big changes of code, merge after coming next release? |
|
@Gerhut , you can merge the PR after approval and we have a window to test the code in INT. |
Here are some perf profiles:
500 jobs in Edge
500 jobs in Chrome
350,000 jobs in Edge
350,000 jobs in Chrome