Benchmark: Pancake GroupedList

Script Preparation code:

const DATA = {
  color: ['red', 'blue', 'green', 'yellow'],
  shape: ['circle', 'square', 'triangle'],
  location: ['Seattle', 'New York', 'Chicago', 'Los Angeles', 'Portland'],
};

function isGroupable(key) {
  return key === 'color' || key === 'shape' || key === 'location';
}

function _randWord(array) {
  const index = Math.floor(Math.random() * array.length);
  return array[index];
}

function createListItems(count, startIndex = 0) {
  return [...Array(count)].map((item, index) => {
      const size = 150 + Math.round(Math.random() * 100);

      const color = _randWord(DATA.color);
      const shape = _randWord(DATA.shape);
      const location = _randWord(DATA.location);

      return {
          thumbnail: `//via.placeholder.com/${size}x${size}`,
          key: 'item-' + (index + startIndex),
          name: location + ' ' + color + ' ' + shape,
          description: 10 + Math.round(Math.random() * 50),
          color,
          shape,
          location,
          width: size,
          height: size,
      };
  });
}

function createGroups(
  groupCount,
  groupDepth,
  startIndex,
  itemsPerGroup,
  level = 0,
  key = '',
  isCollapsed,
) {
  if (key !== '') {
      key = key + '-';
  }
  const count = Math.pow(itemsPerGroup, groupDepth);
  return [...Array(groupCount)].map((value, index) => {
      return {
          count: count,
          key: 'group' + key + index,
          name: 'group ' + key + index,
          startIndex: index * count + startIndex,
          level: level,
          isCollapsed: isCollapsed,
          children: groupDepth > 1 ?
              createGroups(groupCount, groupDepth - 1, index * count + startIndex, itemsPerGroup, level + 1, key + index) :
              [],
      };
  });
}

let cacheIndex = 0;
const getObject = (cache, group, groupId, item, itemIndex, type) => {
  const obj = cache[cacheIndex++];
  if (obj) {
      // console.log("cache hit");
      obj.group = group;
      obj.groupId = groupId;
      obj.item = item;
      obj.itemIndex = itemIndex;
      obj.type = type;
      return obj;
  }

  // console.log("cache miss")
  return {
      group,
      groupId,
      item,
      itemIndex,
      type
  };
}

function flattenItems(groups, items, prevItems, groupProps, useCache = true) {
  if (!groups) {
      return items;
  }

  cacheIndex = 0;
  const estimatedNewLength = prevItems.length > 0 ? prevItems.length : items.length;
  const nextItems = new Array(estimatedNewLength);
  // const nextItems = [];

  // if (memoItems.length < 1) {
  //   // Not the exact final size but gets us in the ballpark.
  //   // This helps avoid trashing memory when building
  //   // the flattened list.
  //   memoItems = new Array(items.length);
  // }

  let index = 0;
  // let prevIndex = 0;

  const stack = [];
  let j = groups.length - 1;
  while (j >= 0) {
      stack.push(groups[j]);
      j--;
  }

  while (stack.length > 0) {
      let group = stack.pop();


      if (useCache) {
          nextItems[index] = getObject(prevItems, group, 'GroupedListSection' + index, undefined, undefined, 'group');
      } else {
          nextItems[index] = {
              group,
              groupId: 'GroupedListSection' + index,
              type: 'group',
          };
      }
      index++;

      while (group.isCollapsed !== true && group?.children && group.children.length > 0) {
          j = group.children.length - 1;
          while (j > 0) {
              stack.push(group.children[j]);
              j--;
          }
          group = group.children[0];
          if (useCache) {
              nextItems[index] = getObject(prevItems, group, 'GroupedListSection' + index, undefined, undefined, 'group');
          } else {
              nextItems[index] = {
                  group,
                  groupId: 'GroupedListSection' + index,
                  type: 'group',
              };
          }
          index++;
      }

      if (group.isCollapsed !== true) {
          let itemIndex = group.startIndex;
          const renderCount = groupProps.getGroupItemLimit ? groupProps.getGroupItemLimit(group) : Infinity;
          const count = !group.isShowingAll ? group.count : items.length;
          const itemEnd = itemIndex + Math.min(count, renderCount);
          while (itemIndex < itemEnd) {
              if (useCache) {
                  nextItems[index] = getObject(prevItems, group, undefined, items[itemIndex], itemIndex, 'item');
              } else {
                  nextItems[index] = {
                      group,
                      item: items[itemIndex],
                      itemIndex, // track the index in `item` for later rendering/selection
                      type: 'item',
                  };
              }


              itemIndex++;
              index++;
          }

          const isShowAllVisible = !group.children &&
              !group.isCollapsed &&
              !group.isShowingAll &&
              (group.count > renderCount || group.hasMoreData);

          if (isShowAllVisible) {
              if (useCache) {
                  nextItems[index] = getObject(prevItems, group, undefined, undefined, undefined, 'showAll');
              } else {
                  nextItems[index] = {
                      group,
                      type: 'showAll',
                  };
              }
              index++;
          }
      }
      // Placeholder for a potential footer.
      // Whether or not a footer is displayed is resolved
      // by the footer render function so this is just a marker
      // for where a footer may go.
      if (useCache) {
          nextItems[index] = getObject(prevItems, group, undefined, undefined, undefined, 'footer');
      } else {
          nextItems[index] = {
              group,
              type: 'footer',
          };
      }
      index++;
  }

  nextItems.length = index;

  // console.log('MEMO ITEMS', memoItems);

  return nextItems;
};

const groupCount = 6;
const groupDepth = 6;

var groups = createGroups(groupCount, groupDepth, 0, groupCount)
var items = createListItems(Math.pow(groupCount, groupDepth + 1));

var cached = flattenItems(groups, items, [], {}, false);

Tests:

With Cache
flattenItems(groups, items, [], {});
Without Cache
flattenItems(groups, items, cached, {}, false);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With Cache
Without Cache

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.63

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
With Cache	7.9 Ops/sec
Without Cache	27.0 Ops/sec

Pancake GroupedList (version: 0)

Comparing performance of: With Cache vs Without Cache

Created: one year ago by: Registered User

Jump to the latest result

With Cache

Without Cache

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A