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

chrome/browser/resources/profiler.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 var g_browserBridge;
 var g_mainView;
 
 /**
  * Main entry point called once the page has loaded.
  */
@@ skipping 513 matching lines @@
     KEY_BIRTH_THREAD,
     KEY_DEATH_THREAD,
     KEY_PROCESS_TYPE,
     KEY_PROCESS_ID,
     KEY_FUNCTION_NAME,
     KEY_SOURCE_LOCATION,
     KEY_FILE_NAME,
     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
   // --------------------------------------------------------------------------
 
   /**
    * Returns a list of all the keys in |dict|.
    */
   function getDictionaryKeys(dict) {
     var keys = [];
     for (var key in dict) {
@@ skipping 163 matching lines @@
    */
   function getFilenameFromPath(path) {
     var lastSlash = Math.max(path.lastIndexOf('/'),
                              path.lastIndexOf('\\'));
     if (lastSlash == -1)
       return path;
 
     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.
   // --------------------------------------------------------------------------
 
   /**
    * Adds new derived properties to row. Mutates the provided dictionary |e|.
    */
   function augmentDataRow(e) {
     e[KEY_AVG_QUEUE_TIME] = e[KEY_QUEUE_TIME] / e[KEY_COUNT];
     e[KEY_AVG_RUN_TIME] = e[KEY_RUN_TIME] / e[KEY_COUNT];
@@ skipping 434 matching lines @@
           // stuff), so we skip past them.
           continue;
         }
 
         // Add our computed properties.
         augmentDataRow(newRow);
 
         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_,
                                    this.getMergeColumns_(),
                                    this.shouldMergeSimilarThreads_());
 
       // Recompute filteredData_ (since it is derived from mergedData_)
       this.updateFilteredData_();
@@ skipping 406 matching lines @@
           groupKey.push(entry);
         }
 
         return JSON.stringify(groupKey);
       };
     },
   };
 
   return MainView;
 })();