Bug 1258172 - Use C-style for loops instead of for/of to cut down on the number of CCWs when using the Tree component. r=jimb
authorNick Fitzgerald <fitzgen@gmail.com>
Wed, 23 Mar 2016 14:54:00 -0400
changeset 291443 690bbfa6023c01347647b139ebdd2a00272477c4
parent 291442 1d4afa71e193b7c882a4925bc13797a1b70ea5ab
child 291444 234de0ccd39ba2cf18cf9da6e55a0ccb6033fa58
push id19656
push usergwagner@mozilla.com
push dateMon, 04 Apr 2016 13:43:23 +0000
treeherderb2g-inbound@e99061fde28a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjimb
bugs1258172
milestone48.0a1
Bug 1258172 - Use C-style for loops instead of for/of to cut down on the number of CCWs when using the Tree component. r=jimb
devtools/client/shared/components/tree.js
--- a/devtools/client/shared/components/tree.js
+++ b/devtools/client/shared/components/tree.js
@@ -213,23 +213,27 @@ const Tree = module.exports = createClas
       if (currentDepth >= this.props.autoExpandDepth ||
           this.state.seen.has(item)) {
         return;
       }
 
       this.props.onExpand(item);
       this.state.seen.add(item);
 
-      for (let child of this.props.getChildren(item)) {
-        autoExpand(child, currentDepth + 1);
+      const children = this.props.getChildren(item);
+      const length = children.length;
+      for (let i = 0; i < length; i++) {
+        autoExpand(children[i], currentDepth + 1);
       }
     };
 
-    for (let root of this.props.getRoots()) {
-      autoExpand(root, 0);
+    const roots = this.props.getRoots();
+    const length = roots.length;
+    for (let i = 0; i < length; i++) {
+      autoExpand(roots[i], 0);
     }
   },
 
   render() {
     const traversal = this._dfsFromRoots();
 
     // Remove 1 from `begin` and add 2 to `end` so that the top and bottom of
     // the page are filled with the previous and next items respectively,
@@ -310,49 +314,55 @@ const Tree = module.exports = createClas
     }
 
     const nextDepth = _depth + 1;
 
     if (nextDepth > maxDepth) {
       return traversal;
     }
 
-    for (let child of this.props.getChildren(item)) {
-      this._dfs(child, maxDepth, traversal, nextDepth);
+    const children = this.props.getChildren(item);
+    const length = children.length;
+    for (let i = 0; i < length; i++) {
+      this._dfs(children[i], maxDepth, traversal, nextDepth);
     }
 
     return traversal;
   },
 
   /**
    * Perform a pre-order depth-first search over the whole forest.
    */
   _dfsFromRoots(maxDepth = Infinity) {
     const traversal = [];
 
-    for (let root of this.props.getRoots()) {
-      this._dfs(root, maxDepth, traversal);
+    const roots = this.props.getRoots();
+    const length = roots.length;
+    for (let i = 0; i < length; i++) {
+      this._dfs(roots[i], maxDepth, traversal);
     }
 
     return traversal;
   },
 
   /**
    * Expands current row.
    *
    * @param {Object} item
    * @param {Boolean} expandAllChildren
    */
   _onExpand: oncePerAnimationFrame(function (item, expandAllChildren) {
     if (this.props.onExpand) {
       this.props.onExpand(item);
 
       if (expandAllChildren) {
-        for (let { item: child } of this._dfs(item)) {
-          this.props.onExpand(child);
+        const children = this._dfs(item);
+        const length = children.length;
+        for (let i = 0; i < length; i++) {
+          this.props.onExpand(children[i].item);
         }
       }
     }
   }),
 
   /**
    * Collapses current row.
    *
@@ -448,17 +458,21 @@ const Tree = module.exports = createClas
    * Sets the previous node relative to the currently focused item, to focused.
    */
   _focusPrevNode: oncePerAnimationFrame(function () {
     // Start a depth first search and keep going until we reach the currently
     // focused node. Focus the previous node in the DFS, if it exists. If it
     // doesn't exist, we're at the first node already.
 
     let prev;
-    for (let { item } of this._dfsFromRoots()) {
+
+    const traversal = this._dfsFromRoots();
+    const length = traversal.length;
+    for (let i = 0; i < length; i++) {
+      const item = traversal[i].item;
       if (item === this.props.focused) {
         break;
       }
       prev = item;
     }
 
     if (prev === undefined) {
       return;
@@ -472,20 +486,21 @@ const Tree = module.exports = createClas
    * or sibling row.
    */
   _focusNextNode: oncePerAnimationFrame(function () {
     // Start a depth first search and keep going until we reach the currently
     // focused node. Focus the next node in the DFS, if it exists. If it
     // doesn't exist, we're at the last node already.
 
     const traversal = this._dfsFromRoots();
-
+    const length = traversal.length;
     let i = 0;
-    for (let { item } of traversal) {
-      if (item === this.props.focused) {
+
+    while (i < length) {
+      if (traversal[i].item === this.props.focused) {
         break;
       }
       i++;
     }
 
     if (i + 1 < traversal.length) {
       this._focus(traversal[i + 1].item);
     }