preface

Hi~, I am a graduate of Internet of Things major in 2020, now studying in Hangzhou. This article is to record my autumn recruit and the learning process since the beginning of the front, if there is a mistake, I hope you can timely put forward!

The interview situation

From the beginning of August to the end of November, a total of 14 front-end positions of companies were interviewed, which were divided into the following cities:

  • Beijing: Xiaomi, JD.com, Meituan, Baidu, where to
  • Hangzhou: Ali, netease, Weidian, Bytedance
  • Shanghai: Seven niuyun, hello travel
  • Shenzhen: Tencent, Futu, Letxin

After 4 months, I finally received offers from Xiaomi, JINGdong, Weidian and Bytedance

It was a tortuous process, and there were a lot of things that impressed me…

In early August, Aliyun, who had been approved for an early interview, collapsed on three sides; Formally approved the interview tao department technology department, HR face, after about two weeks, into the interview has been rejected

(When publishing the article, the system has been prompting banned words, check for a long time, it turned out to be Aliyun’s pot, can only struggle sound)

In the middle of September, SMS received the good news of baidu’s interview, and excitedly bought a train ticket to Shanghai. I got up very early, but did not even pass the scene

At the beginning of October, I received the notice of on-site interview from netease via email. From 10:00 to 19:00 that day, I was left alone in the waiting area. After the HR interview, the staff even gave me a canteen voucher (it was not a pig factory, the food was good), but I still received a rejection letter at the end

In the middle of November, I have received the offer from Rebus, but I don’t want to go to Beijing alone. With an attitude of never giving up, I interviewed Bytedance again (my resume was rejected in advance). After four rounds of technology and one round of HR, I successfully stayed in hangzhou R&D center (I am a loyal user of Douyin!

The whole autumn recruitment, my mood from the beginning full of confidence, to feel that the chance to enter the big factory is slim, finally hit bottom rebound, think is really twists and turns

The road to growth

A freshman

In retrospect, fell into the front end of this pit, because I participated in the freshman elective: “small Website construction and maintenance”.

The first class, the teacher created a new TXT text, write a few lines of code, and then modify the suffix named HTML, a web page was so created, but also can customize the style, as a small white I, the first time feel code so attractive, just know this called front-end development (code farming).

Encouraged by my teacher, I signed up for the provincial website competition and spent the summer vacation of 17 years in the school computer room.

At first, I wrote code in Adobe Dreamweaver, jQuery was a shuttle, and performance, code specification, and maintainability were nonexistent. Look at the rookie tutorial, while doing while learning, can hard code hard code, find a ready-made JQ plug-in patchwork, my website was officially completed, think it is a bitter tears…… (I could only write JQ code, not native JS at all)

A sophomore

The next year, I stumbled upon the Nuggets website, and my front end vision was greatly expanded. I found a lot of never-before-heard terms: closures, ES6, archetypes, inheritance, scopes…

Slowly, I taught myself React, Vue, native JavaScript, NodeJS.

To learn Git, I set up a GitHub account.

To set up a personal blog, I purchased Aliyun’s student server and personal domain name. Within a week, I was matching the environment and learning Linux commands. It was not so cool to use Vim for the first time. When my blog was successfully opened on the public network, I felt that my life had reached the peak!

During this period, I signed up to attend ali’s D2 conference (although I didn’t understand it at that time, so I joined in the fun). That day, I was very excited to come to Xixi Park and saw a lot of big cattle

Junior year

In early January, I signed up to attend ant Financial’s physical examination Technology conference. The conference focused more on how to improve products from the perspective of design and user experience

Saw AntD’s creator: Yu Bo, Yun Qian and other front-end big guy

Jade uncle in the opening of the apology, because of the Christmas egg event, a sensation!

Time came to the second semester of my junior year, I wanted to find a local internship, so I sent the first front-end internship resume in my life. On the day of the interview, because of nervousness, the paper water cup that the interviewer gave me was knocked over by me on the table 🤣… Fortunately, I received a call from HR that evening and passed.

During the internship period of several months (during which I skipped a lot of classes), the company provided me with enough development space and equipped me with a MacBook and a 24-inch monitor. I tried to build scaffolding, build React enterprise application, write H5 page, develop wechat applets from scratch, etc. Learn how to do version control, standardize Git commits, implement projects step by step, and collaborate with UI, production, testing, and backend development. When assisting my mentor in the interview, I happened to see that my initial interview rating was A, and I was very happy for A while.

However, all good things must come to an end, and I resigned from my internship and devoted myself to the review stage. Then I was recruited by the school to learn a good lesson, because I was not a subject, do not know what algorithm, only a simple data structure, so in the autumn recruitment of companies in the written examination, the interview, suffered.

Ps: Here are a few books and my favorite study sites (need to go over the wall) :

  • Illustrated HTTP
  • Introduction to JavaScript ES6 Functional Programming
  • Learning JavaScript Data Structures and Algorithms
  • The JavaScript you Don’t Know series
  • MDN, Amoy front-end team, Bump Lab
  • medium.com/
  • codepen.io/
  • dev.to/
  • developers.google.cn/web/

Surface by sharing

The first part is my experience summary of the front-end interview, and the second part is the topic that I think has more space for thinking

experience

  • A good resume should include the following (typeset from top to bottom)
    • Personal highlights (area of expertise, personal blog, open source project)
    • Educational Experience (graduated school, school experience, honors)
    • Work Experience (Internship)
    • Project experience
    • Professional skills
  • Solid front-end foundation, like you know
    • <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>What does it do?
    • flex:1What does theta 1 represent?
    • GeneratorHow to throw an error?
  • Familiar with a front-end framework (React preferred)
  • Brush the algorithm of LeetCode frequently, be familiar with the corresponding data structure such as common linked list, stack, queue, hash table and tree
  • Familiar with network basics, Git commands, Linux commands
  • Learn more about the new front-end trends (Flutter, PWA, Serveless, GraphQL, CSS Houdini)
  • Be confident and show the interviewer that you love the front end

The interview questions

As the number of companies and interviews are slightly more, the platitudes of the interview questions are not put out, nor do they divide the interview questions by company

Algorithm problem

It’s mostly from LeetCode, LeetCode HOT 100, and it’s best to go through it yourself and understand the optimal solution

Programming problem

  • Implementing EventEmitter with Class requires on, once, emit, and off methods
  • To implement deepClone, you need to successfully clone objects with circular references
  • CSS implements a box that is half the width of the browser and has a 2:1 aspect ratio
  • Implement the sum function 
    sum(1) (2) (3) = =6; // true
sum(1.2.3) = =6; // true
Copy the code
  • Implement the sum2 function 
    console.log(sum2(1) (2) (3) ())/ / 6
console.log(sum2(1.2.3) ());/ / 6
Copy the code
  • Fibonacci sequence is realized by tail recursion
  • Implement co function
  • Implement the following function, when an ARR is pushed, will automatically print a prompt message 
    const arr = [1.2.3];
arr.push(4);
// arr pushed a new element: 4
Copy the code
  • The code implements interrupts the Promise
  • There is a set of images that must wait until the previous image has loaded before loading
  • Adds a method for the Test class to print the specified content 
    class Test {
    constructor() {
        this.person = { name: "jack".age: 38.position: "CTO" };
    }
    / /...
}

const test = new Test();
for (const ele of test) {
    console.log(ele);
}
// [ 'name', 'jack' ]
// [ 'age', 38 ]
// [ 'position', 'CTO' ]
Copy the code
  • Implement handler function, encounter B and AC to remove 
    console.log(handler("aabaa")); // 'aaaa'
console.log(handler("abaccbc")); // 'c'
console.log(handler("aaccc")); // 'c'
console.log(handler("aaabccc")); / /"
Copy the code
  • Implement decode function 
    decode('HG[3|B[2|CA]]F') = = ='HGBCACABCACABCACAF' // true
Copy the code
  • Implement the _bind function to print SUCCESS 
    function Animal(name, color) {
  this.name = name;
  this.color = color;
}
Animal.prototype.say = function() {
  return `I'm a The ${this.color} The ${this.name}`;
};
const Cat = Animal._bind(null."cat");
const cat = new Cat("white");
if (
  cat.say() === "I'm a white cat" &&
  cat instanceof Cat &&
  cat instanceof Animal
) {
  console.log("success");
}
Copy the code
  • The CSS implements the circular progress bar effect
  • Say the following print 
    console.log(- 1 >>> 32); 
console.log(- 1 << 32);
console.log(1 >> 32);
console.log(5 >>> 2);

var a = { n: 1 };
var b = a;
a.x = a = { n: 2 };
console.log(a.x);
console.log(b.x);
Copy the code

Short-answer questions

  • F12 developer tools to implement the inspect function
  • The implementation drags and drops a box from one region to another
    • Part of the box is inside the region and part is outside the region. What should I do
    • Briefly describe several encapsulated key methods
  • After the development of the project, the wechat browser blank screen, how to check
  • How do you count which areas of a page are clicked on the most
  • How do I design user permissions based on the granularity of the button level, for example: A can access the button, but B cannot
  • How do YOU automate screenshots of a web page’s content? How do you resolve login restrictions
  • Component A wraps around component B, and component B wraps around component C. What is the order in which componentDidMount is triggered
  • React setState is asynchronous or synchronous, and how does it work
  • React Hooks Do you need to use them
  • React’s synthetic event mechanism
  • Describe the life cycle of React class components and introduce the React Fiber architecture
  • Redux state management: How to connect to React
  • What is React HOC for, and what is decorator mode
  • How Mobx works
  • The compose function is composed for Koa middleware
  • This section describes NodeJS EventLoop mechanism and the function of process.nexttick ()
  • NodeJS is single-threaded or multi-threaded, which threads are there, and why is JS single-threaded
  • CommonJS implementation principle
  • What flows exist in NodeJS, and what about Pipe () and its benefits
  • Require’s parsing rules
  • Load balancing: What are NodeJS clusters and child_process
  • How is WebPack packaged
  • How is webPack dynamic import implemented
  • How to write your own Loader and plugin
  • Externals and UMD in the webpack configuration file
  • Introduce DNS, what is iterative query and recursive query, what is the first level domain name, second level domain name
  • What are the HTTP Header and Body delimiters, and how do you match them using regex
  • HTTPS details of the process, what are digital certificates, message digest, asymmetric encryption, Hash algorithms
  • How to realize the real-time communication between Tab (Tab) pages, client and server
  • HTTP status code: 301, 302, 307 differences
  • Describe the browser garbage collection mechanism. What are strong references, weak references, circular references
  • Describe the functions of requestAnimationFrame and requestIdleCallback
  • CSS selectors are resolved from right to left or left to right. Why
  • What’s wrong with the click event on the mobile side, how to fix it, and what other pits do you encounter on the mobile side
  • How to cancel JWT and renew JWT
  • By what test site performance, what are the indicators
  • How to see which lines of code make Ajax requests for a site, which events are bound to an element, and what the Chrome debug panels F8,F10, and F11 represent
  • Say what you know about JPG, GIF, JPEG, PNG, webp, base64 URL

At the end

God rewards those who help themselves, as long as you want, the offer is not far away!

I hope my experience helped you, if you have any questions, please leave them in the comments section, the next article will share my front-end knowledge notes 📝!