This paper is participating in thePerformance optimization combat record”Topic essay activity

To understand recursion

The technique by which a program calls itself is called recursion

It usually transforms a large complex problem layer by layer into a smaller problem similar to the original problem to solve. The recursive strategy only needs a few programs to describe the repeated calculation required by the process of solving the problem, greatly reducing the amount of code of the program

Recursion requires boundary conditions, recursive forward sections, and recursive return sections. When the boundary condition is not satisfied, recursion advances. The recursion returns when the boundary condition is satisfied

Recursion can easily cause stack overflow and consume a lot of memory

The recursive case

  • List structure to tree structure

    The source data

    [{id: 1.pid: null.name: 'the M1 department' },
  { id: 11.pid: 1.name: 'Joe' },
  { id: 12.pid: 1.name: 'bill' },
  { id: 13.pid: 1.name: 'Cathy' },
  { id: 2.pid: null.name: 'the M2 departments' },
  { id: 21.pid: 2.name: 'Daisy' },
  { id: 22.pid: 2.name: 'Sunday' },
  { id: 23.pid: 2.name: 'the eight wu'}]Copy the code

    The target data

    [{id: 1.pid: null.name: 'the M1 department'.children: [{id: 11.pid: 1.name: 'Joe' },
      { id: 12.pid: 1.name: 'bill' },
      { id: 13.pid: 1.name: 'Cathy'}]}, {id: 2.pid: null.name: 'the M2 departments'.children: [{id: 21.pid: 2.name: 'Daisy' },
      { id: 22.pid: 2.name: 'Sunday' },
      { id: 23.pid: 2.name: 'the eight wu'}}]]Copy the code

  • Select the root node according to the corresponding relationship between PID and ID

    list.filter(item= > item.pid === null)
Copy the code

  • Traversing the root node calls itself to match the child nodes

    const listToTree = (list, { idVal = null, id = 'id', pid = 'pid' } = {}) = > {
  return list.filter(item= > item[pid] === idVal)
              .map(item= > ({ ...item, children: listToTree(list, { idVal: item[id] }) }))
}
Copy the code

Optimization scheme

  • A shallow copy of a reference data type

    const arr = [
  { a: 1.b: 2.c: 3 },
  { a: 2.b: 3.c: 5}]const item = arr[1]
item.d = 6
Copy the code

  • Map each item in the list by ID

    const hash = new Map()
sourceModel.forEach(item= > hash.set(item.id, item))
Copy the code

  • Get the parent node from the map by PID

    const listToTree = (list, id = 'id', pid = 'pid') = > {
  const hash = new Map(), roots = []
    list.forEach(item= > {
    hash.set(item[id], item)
    const parent = hash.get(item[pid])
    if(! parent) { roots.push(item) }else {
      !parent.children && (parent.children = [])
      parent.children.push(item)
    }
  })
  return roots
}
Copy the code

    If no item exists, the current item is the root

    If present, add the current item node to the children property of the parent node

Review past

Performance Optimization Issue 01 – Building a performance knowledge body

Performance Optimization Issue 02 – DNS resolution and optimization

Performance Optimization Issue 03 – HTTP request optimization

Performance Tuning Issue 04 – Creating dedicated Worker multithreaded environments

Performance Tuning Issue 05 – Creating a shared Worker multi-threaded environment

Performance Optimization Issue 06 – Optimization of rearrangements and redraws

Performance Tuning Issue 07 – Tuning event handlers