2021 front end interview summary


If you see this article, I should have left Alibaba and joined the new company. This article is a summary of my recent job interview.

Let’s start with the results. I first came back to 4 companies: Kwai hung (offer), drop (oral offer), shell (oral offer), offer (fast hand).

Preparation stage

The written examination began to have the idea of job hopping preparation, and it took about two and a half months to brush leetcode to the actual interview. My personal preparation for the interview is carried out step by step according to the following parts:

  • Leetcode brush questions;
  • JS & CSS foundation;
  • React foundation;
  • Engineering & Architecture & computer foundation;
  • Resume based extension

Leetcode brush questions

Brushing algorithm questions is not only a necessary part of the social recruitment interview, but also a headache for many front-end students (including me). Brushing questions is a painful process. It’s best to find a like-minded partner to do it together (it’s really difficult for a person). I won’t share the experience of topic brushing here (search a lot on the Internet) just share my general rhythm of topic brushing for you.

On the leetcode side, I and a back-end partner maintained a rhythm of 2-5 questions a day. From the middle of January to the beginning of the interview (early April), I brushed 147 simple questions and 11 medium questions in total. Of course, my back-end partners will also brush medium and difficult questions by themselves. My understanding of myself is limited to simple questions. For the front-end of social recruitment in about 3 years, simple questions are enough.

2021 front end interview summary

JS & CSS Basics

The author has been engaged in the development related to the middle and back office. For those who can’t write a few lines of CSS in a year, I directly chose to ignore the review of CSS… (I don’t suggest you do…), while for the basis of JS, I review (learn) according to the following dimensions.

  • type

    • Type conversion
    • Type judgment
    • Deep and shallow copy
  • function
  • Prototype & prototype chain
  • New operator
  • Object creation & Inheritance
  • Execution context

    • Variable (active) object
    • Scope & scope chain
    • this
  • closure
  • EventLoop

    • task
    • micro task
  • ES6 & next

    • let & const
    • Map、Set、WeakMap、WeakSet
    • Arrow function
    • iterator
    • for of
    • Generator
    • Promise
    • async、await
    • class
    • import、export
  • Simulation Implementation

    • bind、call、apply
    • new
    • Promise
    • instanceOf
    • map、filter、reduce、flat
  • Programming skills

    • Implement compose
    • Implement curry
    • Enable deep copy

React Basics

  • life cycle

    • Mount phase
    • Update phase
    • Unmount phase
    • error
  • JSX
  • setState

    • Synchronous asynchronous
  • Virtual DOM

    • Diff algorithm
  • Event system
  • Hooks

  • Fiber
  • State management
  • Routing management
  • performance optimization

Engineering & Architecture & computer related

  • webpack
  • babel
  • CDN principle
  • Browser cache
  • Basic data structure and algorithm

Resume based extension

  • Component & component library design
  • Micro front end & Design of other schemes

    • principle
    • Subapplication loading
    • Sandbox isolation
    • routing detours
    • Inter application communication

Interview stage

Selection opportunities

Looking for opportunities, I do it in two ways: headhunting + internal push.

If you look for a headhunter, you can find many companies and positions with good opportunities that you don’t pay attention to, and the headhunter will selectively recommend positions based on your own situation and accompany you throughout the whole process: opportunity communication in the early stage, follow-up of each round of interview, offer promotion in the later stage, and even salary argue (if your project is under great pressure and you want to see opportunities, you can consider it. It’s really easy, But we need to find a reliable headhunter.

If you find former colleagues to push, you can more directly understand the company’s atmosphere, work content and other miscellaneous things, and really want to dig your colleagues will also help you speak well with your boss and interviewer ~

When screening opportunities and arranging interviews, most students want to find a few small companies to practice their skills first, and then start investing in large factories. In fact, I did the same, but the companies I chose for the interview are those I am interested in and may go if I pass the interview.

  • First wave: I will choose Unicorn company with certain scale and I think it has development prospects;
  • The second wave: I will choose some core business departments of second tier factories or tracks I think have prospects;
  • The third wave: the head company of the first-line big factory or popular track;


In the interview, I met four companies in total and wanted to meet again. But to be honest, I met at least four times for each company. I met 18 times for the four companies. On average, I had at least one interview in two days. I was obviously tired in the later stage (so I suggest you do what you can).

The author has been engaged in front-end development related to the b-end, and has faced so many rounds of hot words related to the b-end: Micro front-end, component library, low code and construction.

one side

On the one hand, it focuses on the basics (there are also those based on the basic knowledge of project investigation): self introduction, JS + CSS investigation, framework investigation, computer foundation related investigation and algorithm problems.

Here are some inspection points I met during the interview:

  • Understanding of scope
  • EventLoop

    • Principle understanding
    • A question to investigate the order of execution results (many online, basically the same)
  • Promise

    • Investigation of basic concepts
    • A question about the chain calling sequence of then and catch (there are many on the Internet, basically the same)
  • Implementation of deep copy
  • Principle of decorator
  • Simulation of call, apply and bind functions
  • What is the difference between a for loop and a for of loop
  • Principle of react diff algorithm
  • Principle of react setstate synchronous asynchronous
  • The principle of react fiber, why introduce fiber
  • What problems does Redux solve
  • Browser cache, how to make more rational use of cache in the project
  • Implementation of horizontal and vertical centering
  • Flex: what is the meaning of 1 0 0
  • Implement a style
  • What is BFC? To solve what problem?

Here are some questions based on my project and resume:

  • Design idea of business component library
  • How to realize the on-demand loading of components
  • Principle of import require in webpack
  • Performance optimization ideas

Two sides

The second side has begun to investigate knowledge points based on the project, and most of the problems are extended based on the projects on the resume.

Here are some inspection points I met during the interview:

  • What is the micro front end? What problems have been solved? Why use a micro front end? Comparison with iframe?
  • Principle of micro front-end sandbox isolation?
  • Thoughts on landing type selection of micro front end?
  • In addition to using the micro front end framework, what extensions have been made on the micro front end?
  • How is the business component library designed? Why use the business component library?
  • How to promote business component library? What problems were encountered during landing?

Three & four sides

Three sides & four sides, many of which are to examine business understanding and personal comprehensive ability.

  • Understanding of the current business domain;
  • What are the biggest challenges, how to solve them, and what are the gains;
  • Understanding the depth and breadth of technology;

HR face

HR’s remarks are related to the investigation of soft power, and will also ask some business questions. There is no more detail here.


In fact, it has been a long time since the interview. The things you can remember are still limited, and there are still many things missing. Please understand. Here I hope everyone can get their own satisfactory offer.

Last ad:

We are Kwai Kong commercialized advertising team, there are still a lot of HC, interested contact me, I send you JD, you send me resume, ha ha ha.

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]