Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)

YeeJone 2021-05-03 13:17:10
interview record thinking social recruitment

In the past month , I interviewed front-end positions in many companies , Fortunately, I got some good ones offer, So I want to make a record and summary through this article , I hope to give you some reference when you are looking for a job .

Brief introduction

19 the , Undergraduate , Computer related major . After graduation, , I have been doing front-end development work in a third line factory ...

In fact, the reason why I want to come out for an interview this time , There are two reasons : The first is , There is no interview experience after school enrollment , I don't know how well I am in the recruitment market ; The second is , I want to go back to the south .
therefore 2021 The beginning of the Lunar New Year , I began to review the interview related knowledge , And start to prepare relevant materials . It took about half a month to prepare for the interview , 2 month 28 The first resume was sent out on the 7th ....

The core of the next job is : Large platform + There is technical precipitation + 「 well-known 」 The front-end team
So it was delivered 5 Positions :

  • Ant gold Experience Technology Department
  • tencent AlloyTeam
  • Baidu 「 Love speed 」 The team
  • Tiktok payment
  • sound of dripping water

Interview results : Ant 、 tencent 、 Baidu 、 Didi passed the interview and got the offer , Tiktok pays two sides. .

Interview experience


one side

  1. webpack in chunkHash And contentHash difference ;
  2. Yes webpack Of loader and plugin Well ;
  3. webpack Handle image Which is it loader, Limited to image What's the size of it ...;
  4. webpack take css Merge into one ;
  5. webpack Yes, it is commonjs and es6 module Is it all effective , The principle is ;
  6. Achieve it 「 Template string 」 function ;
  7. Achieve it Promise.all (Promise Do not write );
  8. How to achieve responsive layout ;
  9. css flex Attribute values of ;
  10. css Animation animation Meaning of each time value ;
  11. css How to make an element rotate and move horizontally , If only one css attribute ;
  12. less And sass difference , How to choose technology ;
  13. ES6 symbol How to use and use scenarios ;
  14. ES6 Proxy How to use and use scenarios , say something Reflect;
  15. generator What are the application scenarios ;
  16. async await How to achieve it ;
  17. git reset And revert difference ,revert Multiple mr How to deal with it ;
  18. git How to withdraw add Later content ;
  19. http2 And http1.1 difference , understand http3 Well , say something ;
  20. tcp And udp The difference between ;
  21. I also asked some questions about my resume ( for example : performance optimization 、E2E Test related );

Two sides

  1. Introduce the project ;
  2. Handwritten in A given n Take out randomly from the number m Number , Equal probability is required ;
  3. Handwrite the anti shake throttle function ;
  4. Design and implement a 「 Star rating 」 Components ;
  5. say something http cache ;
  6. call、apply、bind Differences among the three , How to achieve bind;

... I can't remember the others , There's a lot of handwriting on this side :)

On three sides
This side didn't ask about the front-end basic support , I just asked questions about some items in my resume , Also asked the front-end learning experience and subsequent career planning ...
After this pass, it will be HR 了 , chat offer ...

The ant gold dress

The interview process of ant financial is different from that of other companies , Every round of its interview is the interviewer alone plus you wechat , I'll make an appointment with you for the interview .
Before we officially start , On one hand, the interviewer gave me two written questions , Let me send it to him after I finish it within the specified time , The title is :

Topic 1 : Please implement find function , Make the following code calls correct .

// Appointment :
// title The data type is String
// userId Primary key , The data type is Number
var data = [
{userId: 8, title: 'title1'},
{userId: 11, title: 'other'},
{userId: 15, title: null},
{userId: 19, title: 'title2'}
var find = function(origin) {
// your code are here...
// lookup data in , Eligible data , And sort 
var result = find(data).where({
'title': /\d$/
}).orderBy('userId', 'desc');
console.log(result);// [{ userId: 19, title: 'title2'}, { userId: 8, title: 'title1' }];
 Copy code 

Topic two : Use React or Vue The technology stack implements a pipeline component .

 Assembly line .png

Basic data structure

interface Pipeline{
stages: Stage[];
interface Stage{
title: string;
jobs: Job[];
interface Job{
name: string;
status: 'success' | 'fail';
time: number; // Millisecond time stamp 
 Copy code 

one side

  1. Introduce yourself , And project , To put it simply, what did you do , What are the difficulties and highlights ;
  2. js What are the basic types , say something typeof And instanceof;
  3. say something new The operator ;
  4. What is? event loop;
  5. Promise Usage of ? understand allSettled Methods? , How to achieve ?
  6. Talk about closures ;
  7. ES5 The way to implement inheritance ;
  8. Talk about cross domain ;
  9. commonJS And ES6 Modular differences ;
  10. webpack Do you understand ?loader、plugin What are the differences ? How to achieve a loader?
  11. webpack How to optimize packaging speed ;
  12. The way css The box model ,border-box and content-box difference ;
  13. say something BFC;
  14. How to realize the responsive layout of mobile terminal ;
  15. say flex Layout , I understand Grid Well ;
  16. Compatible retina The experience of the screen ? How to implement it on the mobile end 1 px Line ;
  17. The way react Life cycle of components ;
  18. react How components do performance optimization , say something pureComponent;
  19. call setState What happened after ;
  20. understand fiber Well ? What problems have been solved ? The principle is ;
  21. used hooks Well ? What do you think of hooks? Its principle is ;
  22. Read about react The latest news ?time slice 、suspense、server component Can you tell me ;
  23. Know about some new technologies ,webpack5 What new breakthroughs have been made ;
  24. Why? vite、snowpack Comparable webpack So much faster ? The principle is ;
  25. What is? CSRF attack , How to prevent ;
  26. Why use css Achieve animation ratio js Good animation performance ;
  27. What is? Composite layer ;
  28. http2 And http1.1 difference ;
  29. say http cache ;
  30. http Status code ;

Two sides

  1. Self introduction. , Introduce the project , Ask some questions about the project ;
  2. 19 Graduated in , Don't forget the school knowledge .. computer network 、 programing language 、 Design patterns 、 Data structure algorithm 、 Which compiler are you familiar with ?( My answer is computer network )
  3. The difference between router and switch ;
  4. Realization of Fibonacci number , What is the time complexity of recursion and non recursion ;
    ... There are other fundamental issues , Didn't remember :)

On three sides +HR Noodles

Me on the right (ps: At last I saw To the right I'm a big man )

This side does not ask the front-end foundation related questions , Asked me some technical details of the project , Problems in the design of the scheme . The right teacher's question is really good , Direct cut , They are all obstacles encountered in the process of project promotion . Also asked some questions about follow-up planning .

About HR Noodles , I saw many people say that Ali HR It's hard to face , And I can brush people . But in my experience , It's just some common problems , Such as :

  • Why choose job hopping ;
  • How to deal with the pressure at work ;
  • The future career plan is ;
  • say something Advantages and disadvantages ;
  • I hope Ali can give you something ;

These questions can be considered first , Then answer truthfully ~


one side

  1. Handwritten large number addition method ;
  2. Drag and drop a block ;
  3. Asked some questions about the project , And related technical details ;
  4. From a URL Input to page rendering , What's going on , Be as detailed as possible ;
  5. tcp handshake Recycling process , Do you know about flooding attacks ;
  6. say something event loop( And a question , Write output order );
  7. SSR How to do it? , How to ensure isomorphism ?server The data at the end is all renderToSting The consumption , Why give it to me client End ;
  8. js The strict model of ;
  9. say something Iterator Use ;
  10. Let's talk about the process of quick sort ;
  11. node How to catch errors , How to check for memory leaks ;

There are also some basic topics ...

Two sides

  1. It's still a project issue ...
  2. How performance optimization works , How to measure the income ;
  3. Why do it SSR;
  4. E2E How does the test work , How to ensure test coverage and accuracy ;
  5. How to distribute reasonably node Service resources ;

On this side, the technical details of the project are very in-depth , And asked about the computer network 、React Related issues ...

On three sides

  1. project ...;
  2. hybrid Communication principle ;
  3. How to treat small program , Its technical principle is ;
  4. Design a technical process of collaborative document ;
  5. How do offline packages work , Now the company's app What special capabilities are offered ;
  6. How does the quality assurance platform do , How to do unit testing in a project , Why would there be E2E test ;

Just remember these questions ...🤯

Four sides

  1. Shell Sort , Stack row , Quick line up ;
  2. this Point to the problem , Say the output ;
  3. How to design a component library ;
  4. Used to TypeScript Well , What are the new features ;
  5. say something React Fiber...;
  6. Why? Fiber The structure of bidirectional linked list can solve the problem of slow recursion ;
  7. Do you know design patterns , Talk about the advantages and disadvantages of singleton mode ;
  8. Occupation planning ;
  9. What have you got so far offer ...;

This side hr When I made an appointment, I said it was GM Noodles , I thought it would be the same as other companies , This paper focuses on technical vision and career planning ... But I didn't expect to ask my technical questions ....
It's the end of this HR Noodles , Two HR Simultaneous face , I feel like I've been telling stories all the time

Tiktok and drip

I will not repeat the specific experiences of these two companies one by one , Many of the questions are similar to those of the three above ... Let's just tiktok and test those pen questions :

How to prepare for an interview

There are three important parts of the front-end interview : Resume and project Front end Foundation Algorithm and handwritten code . In general , As long as two of the three parts are good , Basically pass the interview . So next I will according to my own situation , Let's talk about how to prepare these three parts :

Resume and project

Because usually I am also responsible for some interviews in the group , As an interviewer , Resumes are really important !! It's the interviewer's first impression of you , So the typesetting and content quality of your resume are key .

Let's start with the layout of the resume , In summary, there are the following points :

  • The format of your resume must be PDF !!;
  • Personal information 、 Try to put your contact information in the front , Resume layout should be compact , Don't be too loose ;
  • For some technology stacks 、 Key words need to be bold and emphasized ;
  • The overall content of the resume should be controlled within two pages , The sentence needs to be concise , Don't be wordy ;

If CV typesetting is external beauty , So the content of the resume is more important " Inner beauty ". A good resume , Is to be able to clearly and truthfully express their current background and work content , We usually divide the content of a resume into four parts : Personal information & educational background Work experience Project introduction Own skills & Self evaluation .

Personal information & educational background Work experience These two parts can be written according to their own real situation , Don't fake !! Maybe a lot of people can " gorgeous ", It's about educational background & Make up and fake work experience , The consequences of this operation , It is very likely to be found in the background investigation stage , Which leads to your death offer Be cancelled , Serious cases may be pulled black .

Project introduction and Own skills & Self evaluation The content of these two pieces often determines the rating of the interview results . Let's start with the project part . Resume layout 、 Personal background determines whether you can pass the preliminary screening , Personal project is the upper limit of grading after passing the interview . When interviewing related candidates in the group , Usually focus on this part of the project , There are two main concerns :

  • Is there a bright spot in this project , And whether the project has a landing output ;
  • Whether the candidate's project fits the company's business , Does the candidate have the value and potential to improve the efficiency of projects other than business work ;

So as a candidate , We should try our best to list some representative projects , This will enhance the interviewer's impression of himself , And you must be familiar with the project on your resume , You can practice by asking and answering questions before the interview . Many candidates will write a lot of business-related content in their projects , There's no real bright spot , It leads to a mediocre resume .

We should participate more in our daily work, such as : performance optimization 、 QA 、 Build optimization 、 Operational enabling technology projects , These jobs , Not only can you improve the breadth and depth of your technology , And it can greatly enrich the content of your resume , Let you have more chips in the interview .

Skill & Honor & Self evaluation Just list your skills and honors , for example : Experience in mobile terminal development 、 Micro front end experience 、 be familiar with linux、node、 To obtain the XXX Awards, etc . about 「 Self evaluation 」 This part , I personally don't like it , Because these contents are always the same , There is no valuable information .

Front end Foundation

Interview questions related to front-end foundation , quite a lot github There's a collection in the warehouse , Before the interview, of course, we can make up for the missing through these , But the key still needs to accumulate and have in-depth understanding , In order to avoid the interview when a deep ask do not know the situation ...
Here are some books and content related to front-end foundation :

Algorithm and handwritten code

about 「 Algorithm 」, Personal experience tells you , It's no use cramming ...
We must insist on brushing at ordinary times , keep “ feel ”! In terms of my front-end interview , The algorithm under investigation is not very popular 、 It is difficult to , It's usually easy、medium Difficult , So you can start with a simple brush , And then slowly transition to medium and hard Of , Step by step .、

Handwritten code More common topics :

  • Anti shake throttling ;
  • Handwriting Promise And related api Realization ;
  • Realization bind、apply、call;
  • request cache;
  • Implementation template string ;
  • es6 class Turn into es5 ;
  • Realization Array flat And so on API;
  • Implement a version comparison function ; ...


The interview is actually a self-examination 、 The process of introspection , I will find my advantages and disadvantages during this period . This interview exposed my lack of technical thinking in algorithm and special field ... Therefore, we need to strengthen the study and consolidation in this direction in the future , But I got three at the same time " Big factory " Of offer, It's also an affirmation of the work of the past year and a half , That I am a qualified screw

About the psychological state during the interview , The whole process of interview is very tired , In this short month , You will experience a leap between extreme confidence and extreme loss , During the period, you need to adjust your mind , It's not that you've been totally denied that you didn't pass the interview , It's just that your work experience doesn't fit his position , So we still need to maintain confidence and fighting spirit .

After these interviews , I've been thinking about a problem :3-5 What's your core competitiveness after graduation ?

For the front end , When you first enter the workplace , It may be due to the difference in the time devoted to study , There is a certain gap between the level of oneself and others , But the gap will gradually narrow over time , Work 3 After year , Most people can basically cover It's a business problem , So the core competitiveness is not what you wrote xxx demand ..., It's whether you have the ability of continuous learning and whether you have your own thinking and precipitation in a front-end field .

Welcome to my collection ️:)


  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless