One year experience interview tiktok, electricity supplier, share the following!


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?


2. Ask project


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?

methodeffectWhether to affect the original array
pushAdd an element after the array and return the length
popDelete the last item of the array and return the deleted item
shiftDelete the first item of the array and return the deleted item
unshiftAdd an element at the beginning of the array and return the length
reserveInvert array and return array
sortSort array and return array
spliceIntercept the array and return the intercepted part
joinChange the array into a string and return a string
concatJoin array
mapThe same rule processes array items and returns a new array
forEachTraversal array
filterFilter array items and return qualified arrays
everytrue is returned only when each item meets the rule
someAs long as one item meets the rule, it returns true
reduceAccept the previous return and the next item in the array
flatFlatten arrays
sliceIntercepts the array and returns 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. 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


Two sides

1. Introduce yourself?


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


3. Algorithm problem

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


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

4. Handwritten



class U {
  constructor() {
    this.tasks = []
    setTimeout(() => {
  next() {
    const task = this.tasks.shift()
    task && task()
  console(str) {
    const task = () => {
    return this
  setTimeout(delay) {
    const task = () => {
      setTimeout(() => {
      }, delay)
    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 and e.currentTarget?

  • 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) && === child) {

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; // 1
obj1.test1() // 11 // 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


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]

Keywords: Javascript Front-end Vue.js

Added by shaundunne on Tue, 22 Feb 2022 09:03:17 +0200