[SPARK-21254] [WebUI] Performance improvements: detaching DOM before …

…DataTables plugin processing

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

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();
       });
     });