preface

Hello, I am Lin three heart, and the most difficult point to use the most understandable tiktok is my motto. The premise is that my first heart is to be advanced. I share a year's experience of bypassing the electric business.

one side

1. Introduce yourself?

slightly

2. Ask project

slightly

3. leetcode question 112, "path sum"

const hasPathSum = (root, sum) => {
  if (root == null) { // Traverse to null node
    return false;
  }                
  if (root.left == null && root.right == null) { // Traverse to leaf node
    return sum - root.val == 0;                  // If this is met, it returns true. Otherwise, false is returned
  }
  // If it is not the above case, it will be split into two subtrees, one of which is true
  return hasPathSum(root.left, sum - root.val) || hasPathSum(root.right, sum - root.val);
}

4. What API s do you know for JS arrays?

5. Handwritten reduce

Array.prototype.sx_reduce = function (callback, ...args) {
  let start = 0, pre
  if (args.length) {
      pre = args[0]
  } else {
      pre = this[0]
      start = 1
  }
  for (let i = start; i < this.length; i++) {
      pre = callback(pre, this[i], i, this)
  }
  return pre
}

6. Talk about HTTP caching?

7. What are the differences and advantages between vue and react?

• vue2 has poor support for ts, which has been solved in vue3
• vue2 has poor support for jsx, which has been solved in vue3
• vue and react are unidirectional data streams
• vue multipurpose template, react multipurpose jsx
• vue and react both use virtual dom and diff algorithms
• vue is bidirectional binding and react is unidirectional binding
• Both vue and react advocate component-based development
• Both vue and react support server-side rendering
• vuex, the state management tool of vue2, pinia for vue3 and redux, mobx and recoil for react
• vue's diff algorithm is more efficient than react
• react is written closer to js native

8. Have hooks ever used it? Talk about the difference between class component and function component in react?

My React is more delicious..

• class component: state and props are fixed addresses
• Functional components: state and props are updated every time the rendering is updated

9. Front end performance optimization what would you do?

• List Optimization: lazy loading, virtual list, paging
• Redraw reflow: merge modification, requestAnimationFrame, will change
• Submit Optimization: anti shake
• Network requests: control concurrency, cancel duplicate requests, merge requests, http cache
• webpack Optimization: code compression, gzip, CDN, code segmentation, reasonable setting of hash, image conversion to base64

10. Rhetorical link

slightly

Two sides

1. Introduce yourself?

slightly

2. What is the most complex problem encountered in the project? What is the most technically difficult?

slightly

3. Algorithm problem

fn([['a', 'b'], ['n', 'm'], ['0', '1']]) 
=> ['an0', 'am0', 'an1', 'am1', 'bn0', 'bm0', 'bn1', 'bm0']

answer

const fn = (arr) => {
  const length = arr.length
  const res = []
  const dfs = (items, str = '', index = 1) => {
    if (index > length) {
      res.push(str)
    } else {
      for (const item of items) {
        dfs(arr[index], str + item, index + 1)
      }
    }
  }
  dfs(arr[0])
  
  return res
}

4. Handwritten

u.console('breakfast').setTimeout(3000)
.console('lunch').setTimeout(3000)
.console('dinner')

answer

class U {
  constructor() {
    this.tasks = []
    setTimeout(() => {
      this.next()
    })
  }
  next() {
    const task = this.tasks.shift()
    task && task()
  }
  console(str) {
    const task = () => {
      console.log(str)
      this.next()
    }
    this.tasks.push(task)
    return this
  }
  setTimeout(delay) {
    const task = () => {
      setTimeout(() => {
        this.next()
      }, delay)
    }
    this.tasks.push(task)
    return this
  }
}

5. What is an event agent?

When the child elements need to bind the same event, the event can be directly bound to the parent element at this time, and different child element operations can be judged through the target object, which can greatly reduce the number of bound events, reduce DOM operations and improve performance

6. What is the difference between e.target and e.currentTarget?

• e.target: the element that triggers the event
• e.currentTarget: the element to which the event is bound

7. To write an event proxy function, you need to judge whether child is the child node of parent?

function proxy(event, cb, parent, child) {
  parent[event] = function (e) {
    if (parent.contains(child) &&
      e.target === child) {
      cb.call(this)
    }
  }
}

8. Look at the code and say the result?

var length = 10;

function fn() {
  return this.length + 1;
}
var obj1 = {
  length: 5,
  test1: function () {
    return fn()
  }
}
obj1.test2 = fn;
obj1.test1.call() // 1
obj1.test1() // 11
obj1.test2.call() // 11
obj1.test2() // 6

9. What happens from input Url to page rendering? Write an outline?

A separate article will follow

• Network stage: build request line, query strong cache, DNS resolution, establish TCP connection, send HTTP request and respond to request
• Parsing stage: parsing html, building dom tree, calculating style and generating layout tree
• Rendering stage: generate layer tree, drawing list, blocks, preferentially select blocks near the viewport, generate bitmap data and display content

10. What is the difference between Tcp and Udp?

• 1. Connection based and connectionless
• 2. Requirements for system resources (more TCP and less UDP)
• 3. UDP program structure is relatively simple
• 4. Stream mode and datagram mode
• 5. TCP guarantees data correctness, and UDP may lose packets
• 6. TCP guarantees the data order, but UDP does not

• 11. What do you know about new front-end technologies? We talked about PWA and electron, and what are they mainly used for?

• New technologies: Micro front end, low code, Vue3, Vite
• PWA: No
• Electron: a framework for building desktop applications using JavaScript

epilogue

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are self-motivated, like the front-end and want to learn from the front-end, we can make friends and fish together. Ha ha, fish school, add me, please note [Si no]