Avoid too many consecutive redraws on about:profiler while loading.

chrome/browser/resources/profiler.js

Index: chrome/browser/resources/profiler.js
===================================================================
--- chrome/browser/resources/profiler.js	(revision 110453)
+++ chrome/browser/resources/profiler.js	(working copy)
@@ -531,6 +531,16 @@
     KEY_LINE_NUMBER,
   ];
 
+  /**
+   * The time (in milliseconds) to wait after receiving new data before
+   * re-drawing it to the screen. The reason we wait a bit is to avoid
+   * repainting repeatedly during the loading phase (which can slow things
+   * down). Note that this only slows down the addition of new data. It does
+   * not impact the  latency of user-initiated operations like sorting or
+   * merging.
+   */
+  var PROCESS_DATA_DELAY_MS = 500;
+
   // --------------------------------------------------------------------------
   // General utility functions
   // --------------------------------------------------------------------------
@@ -714,6 +724,13 @@
     return path.substr(lastSlash + 1);
   }
 
+  /**
+   * Returns the current time in milliseconds since unix epoch.
+   */
+  function getTimeMillis() {
+    return (new Date()).getTime();
+  }
+
   // --------------------------------------------------------------------------
   // Functions that augment, bucket, and compute aggregates for the input data.
   // --------------------------------------------------------------------------
@@ -1168,10 +1185,39 @@
         this.flatData_.push(newRow);
       }
 
-      // Recompute the merged data based on flatData_.
-      this.updateMergedData_();
+      // We may end up calling addData() repeatedly (once for each process).
+      // To avoid this from slowing us down we do bulk updates on a timer.
+      this.updateMergedDataSoon_();
     },
 
+    updateMergedDataSoon_: function() {
+      if (this.updateMergedDataPending_) {
+        // If a delayed task has already been posted to re-merge the data,
+        // then we don't need to do anything extra.
+        return;
+      }
+
+      // Otherwise schedule updateMergeData_() to be called later. We want it to
+      // be called no more than once every PROCESS_DATA_DELAY_MS milliseconds.
+
+      if (this.lastUpdateMergedDataTime_ == undefined)
+        this.lastUpdateMergedDataTime_ = 0;
+
+      var timeSinceLastMerge = getTimeMillis() - this.lastUpdateMergedDataTime_;
+      var timeToWait = Math.max(0, PROCESS_DATA_DELAY_MS - timeSinceLastMerge);
+
+      var functionToRun = function() {
+        // Do the actual update.
+        this.updateMergedData_();
+        // Keep track of when we last ran.
+        this.lastUpdateMergedDataTime_ = getTimeMillis();
+        this.updateMergedDataPending_ = false;
+      }.bind(this);

[jar (doing other things), 2011/11/17 07:02:42]

curious qusetion: Do you need the .bind(this)?

Wouldn't the method get invoked in the same stack context ,and be able to
pick-up the value of this implicitly?

[eroman, 2011/11/17 07:06:55]

|this| is a very weird beast in javascript. Whereas most variables are lexically
scoped as God intended, |this| is dynamically scoped. Since the function is
invoked later by way of the "setTimeout", the value of the |this| will be bound
to something different when it actually runs.

+
+      this.updateMergedDataPending_ = true;
+      window.setTimeout(functionToRun, timeToWait);
+    },
+
     updateMergedData_: function() {
       // Recompute mergedData_.
       this.mergedData_ = mergeRows(this.flatData_,