[SPARK-21254][WebUI] Improving performance by detaching table DOM bef…

…ore processing Currently all the DOM manipulations are handled in a loop after Mustache template is parsed. This causes severe performance issues especially within loops iteration over thousands of (attempt/application) records and causing all kinds of unnecessary browser work: reflow, repaint, etc. This could be easily fixed by preparing a DOM node beforehand and doing all manipulations within the loops on detached node, reattaching it to the document only after the work is done. The most costly operation in this case was setting innerHTML for `duration` column within a loop, which is extremely unperformant: https://jsperf.com/jquery-append-vs-html-list-performance/24 While duration parsing could be done before mustache-template processing without any additional DOM alteratoins.
criteo-forks · Jul 31, 2017 · 114943b · 114943b
1 parent 51f99fb
commit 114943b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/core/src/main/resources/org/apache/spark/ui/static/historypage-template.html b/core/src/main/resources/org/apache/spark/ui/static/historypage-template.html
@@ -74,7 +74,7 @@
       <td class="attemptIDSpan"><a href="{{uiroot}}/history/{{id}}/{{attemptId}}/jobs/">{{attemptId}}</a></td>
       <td>{{startTime}}</td>
       <td class="completedColumn">{{endTime}}</td>
-      <td class="durationColumn"><span title="{{duration}}" class="durationClass">{{duration}}</span></td>
+      <td class="durationColumn"><span title="{{durationMillisec}}">{{duration}}</span></td>
       <td>{{sparkUser}}</td>
       <td>{{lastUpdated}}</td>
       <td><a href="{{log}}" class="btn btn-info btn-mini">Download</a></td>

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
@@ -122,7 +122,8 @@ $(document).ready(function() {
           attempt["lastUpdated"] = formatDate(attempt["lastUpdated"]);
           attempt["log"] = uiRoot + "/api/v1/applications/" + id + "/" +
             (attempt.hasOwnProperty("attemptId") ? attempt["attemptId"] + "/" : "") + "logs";
-
+          attempt["durationMillisec"] = attempt["duration"];
+          attempt["duration"] = formatDuration(attempt["duration"]);
           var app_clone = {"id" : id, "name" : name, "num" : num, "attempts" : [attempt]};
           array.push(app_clone);
         }
@@ -134,7 +135,7 @@ $(document).ready(function() {
         }
 
       $.get("static/historypage-template.html", function(template) {
-        historySummary.append(Mustache.render($(template).filter("#history-summary-template").html(),data));
+        var apps = $(Mustache.render($(template).filter("#history-summary-template").html(),data));
         var selector = "#history-summary-table";
         var conf = {
                     "columns": [
@@ -164,36 +165,31 @@ $(document).ready(function() {
 
         if (hasMultipleAttempts) {
           jQuery.extend(conf, rowGroupConf);
-          var rowGroupCells = document.getElementsByClassName("rowGroupColumn");
+          var rowGroupCells = apps.find(".rowGroupColumn");
           for (i = 0; i < rowGroupCells.length; i++) {
             rowGroupCells[i].style='background-color: #ffffff';
           }
         }
 
         if (!hasMultipleAttempts) {
-          var attemptIDCells = document.getElementsByClassName("attemptIDSpan");
+          var attemptIDCells = apps.find(".attemptIDSpan");
           for (i = 0; i < attemptIDCells.length; i++) {
             attemptIDCells[i].style.display='none';
           }
         }
 
         if (requestedIncomplete) {
-          var completedCells = document.getElementsByClassName("completedColumn");
+          var completedCells = apps.find(".completedColumn");
           for (i = 0; i < completedCells.length; i++) {
             completedCells[i].style.display='none';
           }
 
-          var durationCells = document.getElementsByClassName("durationColumn");
+          var durationCells = apps.find(".durationColumn");
           for (i = 0; i < durationCells.length; i++) {
             durationCells[i].style.display='none';
           }
-        } else {
-          var durationCells = document.getElementsByClassName("durationClass");
-          for (i = 0; i < durationCells.length; i++) {
-            var timeInMilliseconds = parseInt(durationCells[i].title);
-            durationCells[i].innerHTML = formatDuration(timeInMilliseconds);
-          }
         }
+        historySummary.append(apps);
 
         if ($(selector.concat(" tr")).length < 20) {
           $.extend(conf, {paging: false});