One-year experience interviewing byte vibrato e-commerce, share the following experience!

foreword

Hello everyone, I'm Lin Sanxin, uses the most simple and easy-to-understand words to talk about the most difficult knowledge points. is my motto. is the premise of advanced. is my original . Festival Douyin E-commerce

one side

1. Introduce yourself?

slightly

2. Ask the project

slightly

3. leetcode question 112, "Sum of Paths"

const hasPathSum = (root, sum) => {
  if (root == null) { // 遍历到null节点
    return false;
  }                
  if (root.left == null && root.right == null) { // 遍历到叶子节点
    return sum - root.val == 0;                  // 如果满足这个就返回true。否则返回false
  }
  // 不是上面的情况，则拆成两个子树的问题，其中一个true了就行
  return hasPathSum(root.left, sum - root.val) || hasPathSum(root.right, sum - root.val);
}

4. Which JS array APIs do you know?

method	effect	Whether to affect the original array
push	Add element after array, return length	✅
pop	Delete the last item of the array and return the deleted item	✅
shift	Delete the first item of the array and return the deleted item	✅
unshift	Add an element to the beginning of the array and return the length	✅
reserve	Reverse array, return array	✅
sort	Sort array, return array	✅
splice	Intercept the array and return the intercepted part	✅
join	Convert array to string, return string	❌
concat	concatenating arrays	❌
map	The same rules handle array items, returning a new array	❌
forEach	iterate over the array	❌
filter	Filter array items and return an array that matches the condition	❌
every	Returns true for each rule	❌
some	Returns true as long as one item matches the rule	❌
reduce	Accept the previous return and the next item in the array	❌
flat	Array flattening	❌
slice	Intercept the array and return the intercepted interval	❌

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. Talk about the difference and pros and cons of 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
• Both vue and react are one-way data flow
• Vue uses template template, react uses jsx
• Both vue and react use virtual dom and diff algorithms
• Vue is two-way binding, react is one-way binding
• Both vue and react advocate component development
• Both vue and react support server-side rendering
• vue2's state management tool vuex, vue3 uses pinia, react uses redux, mobx, recoil
• Vue's diff algorithm is more efficient than react
• The writing of react is closer to js native

8. Have you used hooks? Talk about the difference between class components and function components in react?

My React comparison dish. .

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

9. How would you do front-end performance optimization?

• List optimization: lazy loading, virtual list, pagination
• Redraw reflow: merge modifications, requestAnimationFrame, will-change
• Submission optimization: anti-shake
• Network requests: control concurrency, cancel duplicate requests, merge requests, http caching
• Webpack optimization: code compression, gzip, CDN, code segmentation, reasonable hash setting, image conversion to base64

10. Rhetorical questions

slightly

two sides

1. Introduce yourself?

slightly

2. What is the most complicated part of the project? What is the most technically difficult?

slightly

3. Algorithms

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. Handwriting

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 broker?

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

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

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

7. To write an event proxy function, it is necessary to judge that child is a 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 entering Url to page rendering? Write an outline?

There will be a separate article later

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

10. What is the difference between Tcp and Udp?

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

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

• New technologies: micro frontends, low code, Vue3, Vite
• PWA: no
• Electron: A framework for building desktop applications with JavaScript

Epilogue

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, touch the fish group, add me, please note [Si No]