Share the interview experience of a 5-year front-end developer

90b003f305df8fadcf7ad3661ede234c.jpeg

Author: Lu Congbai Tonight

https://juejin.cn/post/7142690757722243102

foreword

f621f8ea1384ebedc277774cfa773fd6.png

Save money : I finally got offers from 58, UMU, 便利蜂, 虾皮, 快手, 腾讯, .字节

Gold, three, silver, and four interviews. The overall interview pass rate is quite high. I didn’t have much preparation before the interview. Basically, I kept reviewing the interview during the interview, sorting out the problems encountered in the interview, and ended up with the last few favorites. The company, in fact, will find that everyone asks the same questions.

Didi

Didi, the first one, did not prepare anything, and did not answer many questions in the middle, but unexpectedly came to the HR interview, probably because the interview performance was not good, so the salary offered was not as good as expected.

Among them, the three-sided interviewer was more impressive:

面试官: Ask A how to deal with disagreements with superiors after joining the job

: I answered in official Chinese for a long time, saying that I should consider the background at the time and whether the views of both parties are correct or not, and finally choose the party that is most conducive to business development

面试官: It’s useless to say these things. What if the boss’s plan is not as good as A’s in the end, but the boss insists on his own opinion?

: Then I don’t know, what do you think?

面试官: It’s fine if you don’t recruit A, and you can’t let him pass in the interview stage

one side

  • What are closures? What are closures used for?

  • Briefly describe the principle of event loop

  • What is virtual dom? Principle? Advantages and disadvantages?

  • What improvements have Vue and react made on the diff of the virtual dom to make it faster?

  • What is the function of key in vue and react? Why can't we use Index? What will happen if it is used? What will happen if no key is added?

  • What is the principle of vue two-way binding?

  • What is the function of Vue's keep-alive? How did it happen? How is it refreshed?

  • How does vue parse the template? What will the template become?

  • How to parse directives? Template variables? HTML tags

  • Have you ever used vue's render? What's the relationship between render and template?

【代码题】 Implement a throttling function? How to implement it if you want to execute it the last time?

【代码题】 Implement a batch request function that can limit the amount of concurrency?

two sides

【代码题】 Array to tree structure

const arr = [{
        id: 2,
        name: '部门B',
        parentId: 0
    },
    {
        id: 3,
        name: '部门C',
        parentId: 1
    },
    {
        id: 1,
        name: '部门A',
        parentId: 2
    },
    {
        id: 4,
        name: '部门D',
        parentId: 1
    },
    {
        id: 5,
        name: '部门E',
        parentId: 2
    },
    {
        id: 6,
        name: '部门F',
        parentId: 3
    },
    {
        id: 7,
        name: '部门G',
        parentId: 2
    },
    {
        id: 8,
        name: '部门H',
        parentId: 4
    }
]

end face

【代码题】 Removes the character with the least number of occurrences in a string without changing the order of the original string.

“ababac” —— “ababa”
“aaabbbcceeff” —— “aaabbb”

【代码题】 Write a function trans, which converts numbers into Chinese output, and the input is no more than 1000 billion numbers.

trans(123456) —— 十二万三千四百五十六
trans(100010001)—— 一亿零一万零一

58 (offer)

The overall interview went smoothly, but I didn't expect that after three rounds of remote interviews, I finally went to the site to go through a cross-face interview and an interview with the business person in charge, but HR is indeed very enthusiastic and professional. But in the end, I chose another offer, and I even feel a little sorry for everyone's enthusiasm.

One interview, two interviews and three interviews were all good, but the intersect interview and the interview with the business manager were a bit watery, so just ask casually.

one side

  • Understanding of front-end engineering

  • What work has been done for front-end performance optimization

  • Nodejs asynchronous IO model

  • libuv

  • Design Patterns

  • micro frontend

  • Throttling and Stabilization

  • Does react encapsulate some custom hooks by itself? Does vue encapsulate some instructions by itself?

  • How does vue migrate to react? How to ensure compatibility

  • Vue's two-way binding principle

  • How to do Node's log and load balancing

  • What is the division of labor between the front and back ends? Which backends do which nodes do

  • Give the output order of the code

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
    console.log('promise2')
}).then(function () {
    console.log('promise3');
});
console.log('script end');

【代码题】 Given several arrays, you can find the corresponding array name by value

// 比如这个函数输入一个1,那么要求函数返回A
const A = [1,2,3];
const B = [4,5,6];
const C = [7,8,9];

function test(num) {

}

two sides

  • Know about vue3?

  • The connection principle of websocket

  • react life cycle

  • redux principle

  • The communication method of Vue parent-child components

  • What is the principle of async await?

  • What is the connection and difference between async/await, generator and promise?

【场景设计】 When designing a turntable component, what needs to be considered, and what technical details need to be coordinated with the business side? How to prevent brushing on the front end

Three sides

【代码题】 Array to tree, after writing, ask how to expand the function if you want to add or delete nodes in the tree

const arr = [{
        id: 2,
        name: '部门B',
        parentId: 0
    },
    {
        id: 3,
        name: '部门C',
        parentId: 1
    },
    {
        id: 1,
        name: '部门A',
        parentId: 2
    },
    {
        id: 4,
        name: '部门D',
        parentId: 1
    },
    {
        id: 5,
        name: '部门E',
        parentId: 2
    },
    {
        id: 6,
        name: '部门F',
        parentId: 3
    },
    {
        id: 7,
        name: '部门G',
        parentId: 2
    },
    {
        id: 8,
        name: '部门H',
        parentId: 4
    }
]

cross face

  • How to realize the virtual list?

  • What performance optimizations have you done?

end face

  • are related to some projects

Jinshan

On the one hand, I feel good, the interviewer is very professional, and his attitude is amiable; on the other hand, the older brother is more domineering, crazy PUA, after the chat, he asked me to cut my salary, and he left directly.

one side

  • The difference between react and vue at the technical level

  • What are the commonly used hooks?

  • What pitfalls have you encountered with hooks?

  • Do you understand useReducer?

  • outside the component let a 1 click event inside the component to change a, will the rendered a change? Does anything change if let a is placed inside a component? What is the difference with useState?

  • Know about vue3?

  • How is Node deployed? The principle of pm2 daemon process?

  • What are the methods for starting child processes in Node?

  • How do processes communicate?

  • How to implement css three-column equal-width layout? What does flex 1 mean? What are the attributes?

  • What do you know about front-end security? xss csrf

    • What problem does CSP solve?

    • How does https communicate securely?

  • What work has been done on front-end performance optimization?

【代码题】 Full Permutation of Variable-Length Two-Dimensional Arrays

// 输入 [['A', 'B', ...], [1, 2], ['a', 'b'], ...]

// 输出 ['A1a', 'A1b', ....]

【代码题】 Compare the two strings and draw conclusions about what operations have been done, such as insertion or deletion

pre = 'abcde123'
now = '1abc123'

a前面插入了1, c后面删除了de

end face

【场景设计】 How to design smooth scrolling and loading of the big data list, the operation of sliding down and then up, how to change and load data between the upper and lower buffer intervals.

Convenience Bee (offer)

The overall interview was relatively smooth, and the three interviewers were also quite talkative, and finally gave a very high general contract. However, I felt that the interview questions were too simple, and the money offered was too much, so I was a little worried and chose another offer.

one side

Pure chat project

two sides

  • Closures in js

  • Some online issues resolved

  • How to monitor online monitoring for crashed? How to monitor the continuous growth of memory, for example, it will take 15 minutes before a problem occurs.

  • Are you familiar with Linux? Talk about the properties of the top command?

  • 301 302 304 difference

Three sides

【代码题】 sleep function

【代码题】 Throttle anti-shake

little red book

The overall feeling to me is that the interview is for the interview, and the experience is extremely poor.

On the one hand, the interviewer just asked questions mechanically, and did not listen carefully to my answer after asking. The previous question was not related to the next question at all, as if he was randomly selecting questions from the question bank.

During the second interview, I seemed to be chatting on the computer all the time. After the end, I said that I would meet with the third interviewer. After about two weeks, I was told that I only recruited leaders. I didn't agree.

one side

  • What is the output? Why?

var b = 10;
(function b(){
    b = 20;
    console.log(b);
})();
  • code output order

async function async1() {
  console.log('1');
  await async2();
  console.log('2');
}
 
async function async2() {
  console.log('3');
}
 
console.log('4');
 
setTimeout(function() {
    console.log('5');
}, 0);  
 
async1();
 
new Promise(function(resolve) {
    console.log('6');
    resolve();
  }).then(function() {
    console.log('7');
});
 
console.log('8');
  • What is the principle of async await?

  • What is the connection and difference between async/await, generator and promise?

  • What is a BFC? What attributes can constitute a BFC?

  • About the postion attribute, what does static mean? Is static in the document flow?

  • The principle of Webpack, plugin loader hot update, etc.

  • Sets and Maps

  • Vue's keep-alive principle and life cycle

  • vuex

【代码题】 Inheritance between ES5 and ES6? Is there any other difference between these two methods besides the way of writing?

【代码题】 EventEmitter

two sides

  • What happens when the browser starts typing url

  • react life cycle

  • The principle of redux

  • The communication method of Vue parent-child components

  • Vue's two-way binding principle

  • Understanding of vue3? How does vue3 do two-way binding?

【代码题】 Use Promise to implement an asynchronous flow control function. For example, there are 10 requests in total. Each request has a different speed. At most 3 requests are sent at the same time. After the fastest request returns, find another one from the remaining 7 requests. Enter the request pool, and so on.

UMU (offer)

The first two sides were remote, and the final one went to the company's site. After arriving, I took a test question first, probably to examine the basic cognitive ability. After finishing the work, the CTO came to the interview and wrote the questions directly on the small blackboard on site. The boss can talk about various technologies, which is really good, but he heard that he may have to work overtime on Saturdays, and he was worried about stability, so he didn't choose this place.

one side

In addition to the project, it basically asks about daily development related things, which is more practical

  • How to debug node.js

  • charles map local/map remote

  • How does chrome devtool view the memory situation

two sides

  • koa onion model

  • How does middleware handle exceptions?

  • How does koa implement the onion model without async await?

  • Have you understood the body-parser middleware?

  • If the browser uses the post interface to upload pictures and some other fields, what will be in the header? If body-parser is not used in koa, how should it be parsed?

  • The connection principle of websocket

  • How does https ensure security? How does it ensure that it is not attacked by a man in the middle?

end face

【代码题】 Given a string, find the first non-repeating character

ababcbdsa
abcdefg
  • What is the time complexity?

  • Besides the two use cases given, what use cases can you think of to test it out?

netease

On the one hand, it hangs up directly, and the code questions are written in a mess as a whole, so it's only natural to hang up...

one side

  • What do you think of the design of this in js? Are there any shortcomings?

  • What are the benefits of vue's responsive development over imperative

  • decorator

  • vuex

  • How generators are interrupted and resumed

  • What is the difference between the definition of function and arrow function? It leads to different performance when this points to this block

  • What is the cause of this confusion in js?

  • The browser's event loop

  • What is the distinction between macrotasks and microtasks for? Priority?

【代码题】 Implement the compose function, similar to koa's middleware onion model

// 题目需求

let middleware = []
middleware.push((next) => {
    console.log(1)
    next()
    console.log(1.1)
})
middleware.push((next) => {
    console.log(2)
    next()
    console.log(2.1)
})
middleware.push((next) => {
    console.log(3)
    next()
    console.log(3.1)
})

let fn = compose(middleware)
fn()


/*
1
2
3
3.1
2.1
1.1
*/

//实现compose函数
function compose(middlewares) {
    
}

【代码题】 When encountering a backspace character, delete the previous character, and when encountering two backspace characters, delete two characters

// 比较含有退格的字符串,"<-"代表退格键,"<"和"-"均为正常字符
// 输入:"a<-b<-", "c<-d<-",结果:true,解释:都为""
// 输入:"<-<-ab<-", "<-<-<-<-a",结果:true,解释:都为"a"
// 输入:"<-<ab<-c", "<<-<a<-<-c",结果:false,解释:"<ac" !== "c"

function fn(str1, str2) {
    
}

Kuaishou (offer)

The overall interview was very professional, and the attitude of the interview was very serious, and the investigation was relatively comprehensive, but what was more annoying was that it took a long time after the HR interview was over. I got verbal offers from Shopee, Tencent, and Byte, and Kuaishou only gave them at the end. The verbal offer may also be to compare the prices of other companies.

one side

  • The structure of the applet? What do the two threads do separately?

  • Why can't I get DOM-related APIs in the applet?

  • code output question

console.log(typeof typeof typeof null);
console.log(typeof console.log(1));
  • this points to the question

var name = '123';

var obj = {
 name: '456',
 print: function() {
  function a() {
   console.log(this.name);
  }
  a();
 }
}

obj.print();

【代码题】 Implement a function that can output at intervals

function createRepeat(fn, repeat, interval) {}

const fn = createRepeat(console.log, 3, 4);

fn('helloWorld'); // 每4秒输出一次helloWorld, 输出3次

【代码题】 Delete a node of the linked list

function (head, node) {}

【代码题】 Implement the LRU algorithm

class LRU {
 get(key) {
 }

 set(key, value) {
 }
}

two sides

  • What is the difference between the second parameter of Promise then and catch?

  • How Promise finally is realized

  • scope chain

  • Electron Architecture

  • micro frontend

  • webpack5 module federation

  • Webworker

Three sides

There is no record, it should be an item asked

Gold

While hanging up directly, the interviewer kept checking various apis to test memory, and they were all very uncommonly used apis.

  • For example, has the xx attribute been used in css, and what is it for?

  • Promise has a xx method, do you know what it does?

In the end, I just got hung up on reciting the various attributes of css. It’s numb. Is it really meaningful to ask candidates to recite these APIs from scratch during the interview?

one side

  • Symbol

  • What is the difference between useRef / ref / forwardsRef?

  • The second parameter of useEffect, what is the difference between passing an empty array and passing a dependent array?

    • If a function is returned, when is it executed when an empty array is passed? When is it executed when a dependent array is passed?

  • flex layout

  • ES5 inheritance

  • ES6 inheritance, when are static methods/properties and instance methods/properties mounted

  • Promise various APIs

  • Various css properties

Shopee (offer)

The interview was more enjoyable and consisted of two sides. It was done in one afternoon, and after the first session, we made an appointment for the second interview one hour later, and after the second interview, we made an appointment for the HR interview one hour later. But at the end of the salary negotiation, HR was also a little bit grumpy. They kept saying that they would wait for the price of Kuaishou or Byte to come out before they would give the price, saying that it would be more competitive in this way.

one side

  • The priority of various caches, memory disk http2 push?

  • Why does the applet have two threads? How to design it?

  • xss? How to prevent it?

  • Log What if a large number of logs are piled up in memory?

【代码题】 deep copy

const deepClone = (obj, m) => {

};

需要手写一个深拷贝函数deepClone,输入可以是任意JS数据类型

【代码题】 Binary tree lighting, output nodes that can be illuminated, can dfs solve it?

输入: [1,2,3,null,5,null,4]
输出: [1,3,4]

输入: []
输出: []

/**
 * @param {TreeNode} root
 * @return {number[]}
 */
function exposedElement(root) {
    
};
  • [Code Question]  Output Sequence Question

setTimeout(function () {
  console.log(1);
}, 100);

new Promise(function (resolve) {
  console.log(2);
  resolve();
  console.log(3);
}).then(function () {
  console.log(4);
  new Promise((resove, reject) => {
    console.log(5);
    setTimeout(() =>  {
      console.log(6);
    }, 10);
  })
});
console.log(7);
console.log(8);

【代码题】 scope

var a=3;
 function c(){
    alert(a);
 }
 (function(){
  var a=4;
  c();
 })();

【代码题】 Output question

function Foo(){
    Foo.a = function(){
        console.log(1);
    }
    this.a = function(){
        console.log(2)
    }
}

Foo.prototype.a = function(){
    console.log(3);
}

Foo.a = function(){
    console.log(4);
}

Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

end face

  • error catch

  • Front-end stability monitoring

  • Front-end memory processing

【代码题】 A lot of requests, different time-consuming, output in order, as fast as possible, write a function.

const promiseList = [
 new Promise((resolve) => {
  setTimeout(resolve, 1000)
 }),
 new Promise((resolve) => {
  setTimeout(resolve, 1000)
 }),
 new Promise((resolve) => {
  setTimeout(resolve, 1000)
 })
]

fn(promiseList);

【代码题】 full permutation of an array

输入一个数组 arr = [1,2,3]
输出全排列

[[1], [2], [3], [1, 2], [1, 3], ...., [1,2,3], [1,2,4] ....]

Tencent (offer)

Tencent's overall process is the longest, with a total of 5 interviews. The overall interview difficulty is not high, only the first three rounds are serious technical questions, and the latter is more like chatting about projects.

Because the other offers were almost up to ddl at that time, I hurriedly urged HR to give a number, and finally the salary was not as expected and I didn't go.

one side

  • The this pointing problem of ordinary functions and arrow functions

const obj = {
 fn1: () => console.log(this),
 fn2: function() {console.log(this)}
}

obj.fn1();
obj.fn2();

const x = new obj.fn1();
const y = new obj.fn2();
  • Promise-related features

  • Vue parent-child components, life cycle execution order created mounted

  • What new features have been added to vue3?

  • The characteristics of xss and how to prevent it?

  • What improvements have Http 2.0 and http 3.0 made compared to the previous version?

  • If HTTP 3.0 is based on udp, how to ensure reliable transmission?

  • What is the biggest difference between TCP and UDP?

  • What else can CSP do besides preventing foreign domain scripts from loading?

  • What does the typescript is keyword do?

【代码题】 Multi-fork tree, get the sum of nodes at each level

function layerSum(root) {
    
}

const res = layerSum({
    value: 2,
    children: [
        { value: 6, children: [ { value: 1 } ] },
        { value: 3, children: [ { value: 2 }, { value: 3 }, { value: 4 } ] },
        { value: 5, children: [ { value: 7 }, { value: 8 } ] }
    ]
});

console.log(res);

two sides

There is no record, it should be repeated with the previous interview questions

【代码题】 virtual dom to real dom

const vnode = {
    tag: 'DIV',
    attrs: {
        id: 'app'
    },
    children: [{
            tag: 'SPAN',
            children: [{
                tag: 'A',
                children: []
            }]
        },
        {
            tag: 'SPAN',
            children: [{
                    tag: 'A',
                    children: []
                },
                {
                    tag: 'A',
                    children: []
                }
            ]
        }
    ]
}

function render(vnode) {

}

Three sides

  • Front-end security xss and the like

  • Https man-in-the-middle attack

  • Front-end History routing configuration nginx

【代码题】 Ordered array deduplication in place

Four sides (gm? forgot)

How to estimate the number of manhole covers in a city

end face

are all projects

byte (offer)

I heard that Byte was all kinds of hard before, which scared me badly, but maybe I was lucky, and the questions I encountered were very simple.

one side

【代码题】 Binary tree layer order traversal, each layer of nodes into an array

给定一个二叉树,返回该二叉树层序遍历的结果,(从左到右,一层一层地遍历)
例如:
给定的二叉树是{3,9,20,#,#,15,7},
该二叉树层序遍历的结果是 [ [3], [9,20], [15,7]
]

【代码题】 Implement a function, fetchWithRetry will automatically retry 3 times, and return directly if any one succeeds

【代码题】 The entry node of the ring in the linked list

对于一个给定的链表,返回环的入口节点,如果没有环,返回null

two sides

  • How to take a screenshot

  • qps has reached the peak value, how to optimize

  • Google Images, if you want to implement a similar system or page, what would you do?

  • The smallest number of k

  • Throttle anti-shake

  • sleep function

  • How to deal with the number exceeding the maximum value of Number in js?

  • 64 athletes, 8 tracks, if you want to select the top four, at least how many runs?

  • The front-end route a -> b -> c advances like this, and it can also return c -> b -> a. What data structure is used to save it is more efficient

  • node service governance

【代码题】 Multi-fork tree specifies the number of layer nodes

Three sides

【代码题】 number of redundancies

Input: 'abcdaaabbccccdddefgaaa'
Output: 4

1. 输出叠词的数量
2. 输出去重叠词的数量
3. 用正则实现

written in the back

The overall market seems to be getting worse recently, Shopee also reported a lot of things that ruined the offer, fortunately I didn't go there at that time...

However, I advise those who want to see the opportunity to look for a horse by riding a donkey. You can simply test the water first to see how the market is going, and don't just listen to what netizens say.

In the end, I hope that everyone will become an offer harvester, and everyone can get their favorite offer.

Guess you like

Origin blog.csdn.net/Ed7zgeE9X/article/details/131496252