[SPARK-21254] [WebUI] Performance improvements: detaching DOM before DataTables plugin processing

2ooom · 2ooom · commit 3630ca212baa · 2017-08-06T14:08:10.000+02:00
Detaching history table wrapper from document before parsing it with DataTables plugin
and reattaching back right after plugin has processed nested DOM. This allows to avoid
huge amount of browser repaints and reflows, reducing initial page load time in Chrome
from 15s to 4s for 20k+ rows
diff --git a/core/src/main/resources/org/apache/spark/ui/static/historypage.js b/core/src/main/resources/org/apache/spark/ui/static/historypage.js
@@ -152,8 +152,9 @@ $(document).ready(function() {
       }
 
       $.get("static/historypage-template.html", function(template) {
+        var sibling = historySummary.prev();
+        historySummary.detach();
         var apps = $(Mustache.render($(template).filter("#history-summary-template").html(),data));
-        var selector = "#history-summary-table";
         var attemptIdColumnName = 'attemptId';
         var startedColumnName = 'started';
         var defaultSortColumn = completedColumnName = 'completed';
@@ -192,7 +193,8 @@ $(document).ready(function() {
           {"searchable": false, "targets": [getColumnIndex(conf.columns, durationColumnName)]}
         ];
         historySummary.append(apps);
-        $(selector).DataTable(conf);
+        apps.DataTable(conf);
+        sibling.after(historySummary);
         $('#history-summary [data-toggle="tooltip"]').tooltip();
       });
     });
