Benchmark: test autocomplete computed items

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

Script Preparation code:

var clientsSeed = [{
        __typename: "Client",
        id: 14048,
        prefix: null,
        firstName: "Adams, Haag and Murray",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: "damiang@pulse360.com",
        dob: null,
        gender: null,
        salutation: null,
        company: "Adams, Haag and Murray",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "other",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14049,
        prefix: null,
        firstName: "Association test",
        middle: null,
        lastName: null,
        suffix: null,
        address1: "avenida siempre viva 123",
        address2: "",
        city: "Los Angeles",
        state: "CA",
        zip: "90016",
        businessPhone: null,
        homePhone: null,
        email: "damian.galetto@gmail.com",
        dob: null,
        gender: null,
        salutation: null,
        company: "Association test",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "other",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14050,
        prefix: null,
        firstName: "Tilt Digital",
        middle: null,
        lastName: null,
        suffix: null,
        address1: "103 Burnt",
        address2: "Lower Bourne",
        city: "Farnham",
        state: "SRY",
        zip: "00GU1-03lh",
        businessPhone: null,
        homePhone: null,
        email: "jamie@tiltdigital.com",
        dob: null,
        gender: null,
        salutation: null,
        company: "Tilt Digital",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14051,
        prefix: null,
        firstName: "Osinski, Goodwin and Bogan",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Osinski, Goodwin and Bogan",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14052,
        prefix: null,
        firstName: "Rice and Sons",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Rice and Sons",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14053,
        prefix: null,
        firstName: "Kihn Inc",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Kihn Inc",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14054,
        prefix: null,
        firstName: "Marks Group",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Marks Group",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "NON_EXISTENT",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14055,
        prefix: null,
        firstName: "Grant-Kilback",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Grant-Kilback",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14056,
        prefix: null,
        firstName: "Leannon and Sons",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Leannon and Sons",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14057,
        prefix: null,
        firstName: "Langosh-Wilkinson",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Langosh-Wilkinson",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14058,
        prefix: null,
        firstName: "Wolf and Sons",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Wolf and Sons",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
    {
        __typename: "Client",
        id: 14059,
        prefix: null,
        firstName: "Homenick-MacGyver",
        middle: null,
        lastName: null,
        suffix: null,
        address1: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        businessPhone: null,
        homePhone: null,
        email: null,
        dob: null,
        gender: null,
        salutation: null,
        company: "Homenick-MacGyver",
        greeting: null,
        spouse: null,
        aliases: null,
        goals: [],
        type: "company",
        existsInCrm: "EXISTS",
        checklist: null,
        external_assets: [],
        future_strategies: [],
        social_media: null,
    },
];

var clients = Array.from({length: 10000}, () => clientsSeed[Math.floor(Math.random()*clientsSeed.length)]);

function getAliases(aliases = ''){
    return (aliases || '').split('||').filter(Boolean).map((value, index) => ({
      crmOrFirst: !index,
      value: value.replaceAll('__default', ''),
      isDefault: value.includes('__default'),
      rawValue: value,
    }))
  }

function getAlias(client){
  const { aliases } = client
  const alias = getAliases(aliases)
  if (alias.length === 0) {
    return null
  }
  return alias[0].value
}


function getClientNameWithAlias(client) {
    if (!client) {
      return 'None Selected'
    }
    const { firstName, lastName, salutation, greeting, suffix, middle } = client
    const alias = getAlias(client)
    const formatedAlias = alias ? ` "${alias}"` : ''

    if (lastName) {
      let name = lastName

      if (firstName) {
        name = `${name}, ${firstName}`
        name = `${name} ${formatedAlias}`
        if (middle) {
          name = `${name}, ${middle}`
        }

        if (suffix) {
          name = `${name}, ${suffix}`
        }
      }

      return name
    }

    if (greeting) {
      return greeting
    }
    if (salutation) {
      return salutation
    }
    return firstName
  }

function getFullName(client, isFormal = false) {
    if (!client) {
      return 'None Selected'
    }
    const { firstName, lastName, suffix, prefix, middle } = client

    if (_.isEmpty(firstName) && !_.isEmpty(lastName)) {
      return lastName
    }
    if (!_.isEmpty(firstName) && _.isEmpty(lastName)) {
      return firstName
    }
    const suf = suffix ? `, ${suffix}` : ''
    const mid = middle ? ` ${middle}` : ''

    if (isFormal) {
      const pre = prefix ? `${prefix} ` : ''
      return `${pre}${firstName}${mid} ${lastName}${suf}`
    }
    const alias = getAlias(client)
    const formatedAlias = alias ? ` "${alias}"` : ''

    return `${firstName}${formatedAlias}${mid} ${lastName}${suf}`
  }

Tests:

map
clients.map((client) => ({ ...client, fullName: getClientNameWithAlias(client), label: getFullName(client) }))
reduce
clients.reduce((a, client) => { a.push( { ...client, fullName: getClientNameWithAlias(client), label: getFullName(client) } ); return a }, [])
for of
const a = [] for (const client of clients) { a.push( { ...client, fullName: getClientNameWithAlias(client), label: getFullName(client) } ); };
map less data
clients.map((client) => ({ id: client.id, fullName: getClientNameWithAlias(client), label: getFullName(client), existsInCrm: client.existsInCrm, type: client.type }))
reduce less data
clients.reduce((a, client) => { a.push( { id: client.id, fullName: getClientNameWithAlias(client), label: getFullName(client), existsInCrm: client.existsInCrm, type: client.type } ); return a }, [])
for of less data
const a = [] for (const client of clients) { a.push( { id: client.id, fullName: getClientNameWithAlias(client), label: getFullName(client), existsInCrm: client.existsInCrm, type: client.type } ); };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
reduce
for of
map less data
reduce less data
for of less data

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/101.0.4951.64 Safari/537.36

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
map	17.6 Ops/sec
reduce	15.6 Ops/sec
for of	15.0 Ops/sec
map less data	58.2 Ops/sec
reduce less data	55.7 Ops/sec
for of less data	57.7 Ops/sec

test autocomplete computed items (version: 13)

Comparing performance of: map vs reduce vs for of vs map less data vs reduce less data vs for of less data

Created: one year ago by: Registered User

Jump to the latest result

map

reduce

for of

map less data

reduce less data

for of less data

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A