I originally wanted to try the water, but I didn’t expect that after five rounds of interviews, I would really face the front-end post of Ali

background

My background is scum, I entered the industry late, and I have been stable in a company for three years. From a blank front end to the current scribble, it has become a rudimentary form. At the end of 2020, I left my job because I was deeply aware of how "cuisine" I was and wanted to concentrate on improving myself. After a little adjustment, I reloaded. Due to the limited time before the holiday, I only voted for a few, and of course they were all internally recommended. The slightly better offer is Ali's. Let me share with you the experience below.

Ali four rounds of technology + one round of hr

One side (60min)

• Self-introduction mainly focuses on several points: personal information, recent company responsibilities and business involved, main technology stack, technology I am good at, project introduction (STAR: project background, tasks, your work content, project highlights, results you achieve What have you learned?), what have you been doing recently, and the conclusion.

• There are two technology stacks written in the resume, so talk about the difference and connection between vue and react mainly around several points: the template rendering of the two, the virtual dom of the two, the diff difference (vue2, vue3, react 16), react What problems can fiber solve? The responsive principle of vue2 and the responsive principle of vue3; the difference between Proxy and Object.defineProperty in vue; the batch update of the two, as well as routing differences, commonly used optimization methods, and how to communicate data. Some fresh content: What are the characteristics of the newly released vue3, and finally, let’s talk about the current ecology of the two...

• The performance optimization of the project mainly revolves around several points: the performance optimization of the project technology stack, such as using react can talk about some means to avoid repeated rendering, such as how electron can be closer to the original; optimization for the browser (you need to understand the browser Related principles, such as caching/storage, proxy, SSR, etc., optimized for the work content of the rendering engine, such as parsing css parsing will affect dom rendering, synthesis optimization to reduce reflow redrawing, web worker, event loop, etc.); packaging tools are provided Optimization of webpack, especially webpack; optimization for specific pages, such as what to do on the homepage, the latest indicators on the homepage; finally, I will talk about application scenarios, which methods are used in my projects, and performance choices for medium and large projects. PS: If you talk about the content of performance optimization seriously, it will definitely not come in two or three hours. Because performance optimization has no end, I only thought of the above during the interview...

• Know our products? I googled the team’s business project in advance, and I also read some articles about similar products before. I combined my project experience and gave a little understanding, just a few words.

• What do you want to ask? I asked about the performance this time, and learned about the work content of some team projects, the background of the project recruitment, and what preparations should be made for the follow-up interview. I didn't encounter any handwritten questions on one side. They were all very basic questions, and they were relatively easy on the whole.

Two sides (60min)

The interview at 9:30 in the evening, the interviewer should have just finished busy, come up and directly ask the business, the whole business... the details of the authority page:

• How to design permissions for each module and button;
• How to design by role and region?
• You need to add a header and control the order of display. The performance is consistent across browsers. How to design it? Speak out all the plans, think of what free play...
• Talking about local storage, ask: Is the size of localStorage the same across browsers and mobile browsers?

other:

• This paragraph is a project of my resume, skip...
• Continue to talk about Ali's products. After simple use, please suggest some points that can be optimized?
• Nothing is revealed, let you predict the next direction of this product, if it is you, which direction you will proceed, and why let you do it, tell me what you are good at...
• Formally discuss the product, what everyone is doing, the situation of teamwork, announce the next iteration direction, target people, goals...
• Chat as usual, bye.

Interlude: There were two sudden hangs in the middle. At that time, I felt like a roller coaster, sliding from a high altitude to a low valley. My whole heart was-a cute and beautiful
CCTV reporter.

Three sides (60min)

This side is a written test, haha, I reviewed a lot of handwritten questions, and the result is completely different from the three-sided exam questions, there is no intersection, emmm... Fortunately, it is not difficult... Question 1:

/**
 * 1.计算多个区间的交集
 *   区间用长度为2的数字数组表示，如[2, 5]表示区间2到5（包括2和5）；
 *   区间不限定方向，如[5, 2]等同于[2, 5]；
 *   实现`getIntersection 函数`
 *   可接收多个区间，并返回所有区间的交集（用区间表示），如空集用null表示
 * 示例：
 *   getIntersection([5, 2], [4, 9], [3, 6]); // [4, 5]
 *   getIntersection([1, 7], [8, 9]); // null
 */

Question 2:

/**
 * 2.DOM 的体积过大会影响页面性能，假如你想在用户关闭页面时统计（计算并反馈给服务器）
 当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数，请用 JS 配合
 原生 DOM API 实现该需求（不用考虑陈旧浏览器以及在现代浏览器中的兼容性，可以使用任意
 浏览器的最新特性；不用考虑 shadow DOM）。比如在如下页面中运行后：
 */
<html>
  <head></head>
  <body>
    <div>
      <span>f</span>
      <span>o</span>
      <span>o</span>
    </div>
  </body>
</html>
// 会输出：

{
  totalElementsCount: 7,
  maxDOMTreeDepth: 4,
  maxChildrenCount: 3
}

Question three:

// 3.请使用原生代码实现一个Events模块，可以实现自定义事件的订阅、触发、移除功能
/*
const fn1 = (... args)=>console.log('I want sleep1', ... args)
const fn2 = (... args)=>console.log('I want sleep2', ... args)
const event = new Events();
event.on('sleep', fn1, 1, 2, 3);
event.on('sleep', fn2, 1, 2, 3);
event.fire('sleep', 4, 5, 6);
// I want sleep1 1 2 3 4 5 6
// I want sleep2 1 2 3 4 5 6
event.off('sleep', fn1);
event.once('sleep', ()=>console.log('I want sleep));
event.fire('sleep');
*/

Four sides of business (35 min)

On weekends, I was sleepwalking. Just after getting off the aircraft carrier, I got a call from Lingling. I was still confused...

• The principle of cross-terminal? I talked about a few examples: taro, uni-app, and by the way, I mentioned the architecture of flutter, react native, applets, etc., and how to design them in detail.
• What scenarios can dynamic forms be used in? I gave 7 or 8 examples.
• Issues related to mobile terminal adaptation and application scenarios.
• My company's business discussion, whether you know about competing products, etc., skip it here.

hr Five sides (60 min)

• Do you know anything about the competing products of your project? Say something
• Compared with competing products, what are the advantages and advantages of your project?
• What I am doing after get off work is all about my past experience. The questions are too detailed and uncomfortable.
• If there is a disagreement with a colleague, how would you solve it?
• Now for our business, we urgently need to add a new module location, how would you design it? How to display the data...
• Yes, hr also asked technical questions.

Overall feeling

On the whole, there is no nervous feeling. It is quite satisfactory. From the high psychological expectations at the beginning to slowly falling back... Due to my limited level, I didn't get a high salary in the end.

Preparation Phase

• Look at the source code and sort out all the horizontal comparisons between the Vue and React frameworks, including rendering principles, virtual dom, diff, patch, fiber, batch updates, handwriting responsiveness, patterns used in the framework, design ideas, performance optimization, related ecological technologies, etc. .

• The principle of webpack, the principle of hot update, the principle of dynamic loading, common plugins, loaders, common optimizations, how to pack, how to divide chunks, how to write a plugin, life cycle, microkernel source code, etc., as well as the use and application scenarios of rollup and gulp. (I remember an examiner told me that you are very clear about the entire R&D process, but they are not in-depth. For example, how to determine the basis of a webpack packaging and subcontracting...... emmmm, I will, you don’t ask me. !)

• Cross-end framework research, engineering sorting, pits of the technology stack used, some practices on the mobile end, additional project reviews prepared during interviews, competitive product surveys, information about the other party's products, test series, and many more such as micro front-ends , Zhongtai, serverless, visualization, Wasm, etc. are not examples.

• In addition, I also read a lot of interviews and technical articles.

I have compiled a summary of the interview questions I have read, and there are actually 280 pages of PDFs, which are free to share with you. It is a grateful feedback. Friends in need [click me] to get them free of charge.

Click here to view the detailed content on page 280 of "Front-end School Recruitment Interview Questions Analysis" in blue font .

Having mastered the above content, we should have a little breadth of knowledge and can calmly deal with the previous technical aspects. Of course, this can not be achieved in just a few months. It takes time to accumulate, those who are experienced in one year. It also began to accumulate in college or even earlier, and this level cannot be escaped.

At this point, the "technical" tiger should be able to fight half to death. It is impossible to do it directly. The above knowledge may be enough for school recruitment, but social recruitment may not be useful, haha.

Then there is the focus of social recruitment: the business side, how to say it, just think more and summarize, think deeply, and think deeply about each problem, otherwise it will be difficult to enter a large company, and there must be a high level of depth. In order to get good grades in the interview.

Picking out the bright spots in your project and the bright spots to be recognized by others is more difficult. You can only ask for your own blessings. It is also my shortcoming. At that time, I was also picking the bones in the egg. This is my job hunting experience this time. The biggest stumbling block, the business is too simple, the highlight in your eyes, the interviewer thinks it is not...

Interview stage

Many interviewers say that when answering a question, think about it before answering, in order to organize the language, but sometimes, you know it clearly, but when you are nervous, you will skip the key information, and the answer is unintelligible. To achieve: "think clearly, explain clearly, know what to say, how to say", it is still a little bit difficult. It is related to the usual accumulation of bit by bit. In this regard, I have provided some direction above. The rest is to play well in the interview stage. There is no good way. I suggest here:

• Think about it before answering the question. Although it is not guaranteed to be useful, you still have to perform it well.
• Multiple times, referring to different companies, as long as you are not too tired.
• When interviewing a certain company, based on the previous interview, try to guess the general scope of the business that the follow-up examiner will ask, or ask the internal recommendation classmates to prepare in advance. Generally, I will ask: 1 items on your resume, 2 well-known products of the other party's department, 3 job titles on jd.
• A simple review to ensure that you don’t fall into the same problem.
• Increasing the breadth of knowledge can lead to other questions, and the examiner is also willing to listen.
• Pick a good time for an interview. For example, at 10 o'clock in the morning, my brain is very bright, and my speech is calm and magnetic... After 7 o'clock in the evening, I will be inexplicably nervous, and my voice will increase by a few points and a little hoarse. This is true. Varies from person to person. Sometimes being calm is not necessarily a good thing. Being nervous and anti-* may prompt you to occasionally have punches and ideas, and of course it may be messed up.
• Find a few ways to quickly adjust your spirit and energy, and you can also use it during the previous basic study.
• If you are good enough, you can suggest and guide the interviewer to ask what you are good at. Don't be led by the nose.

Finally, pray to Buddha and burn incense for good luck. The difference between people lies in the difference in cognition and thinking ability. If you don't have a qualitative change in your thinking for a while, it is better to ask for good luck. Without good luck, the above suggestions may not work well. After all, the content of social recruitment interviews is inherently unstable. Some emphasize technology, some algorithms, some business, some academic qualifications, and others. Eyes...

How to keep learning?

This piece is a supplement, I still only give suggestions:

• If you play games, please give up the game, or quit for a period of time, until you find a satisfactory job.
• Find your pain point.
• Study in stages and make a plan that fits the cycle. Don't force yourself, otherwise the pressure will make you break down.
• Find some chicken soup, or find something you don’t have but desire.
• In terms of business, read more books, summarize and accumulate some ways of thinking.

Finally the soul asked:

• Is your dream to enter a big factory? You know, this requires a small price.
• Are you a unique wizard? If not, then it is normal to fail a few times. Everyone is an ordinary person, maybe just not match.

At last

This is the end of the article. My level is limited. I don't know how many babies can be saved by this experience. I believe that many people like me will have a dream of entering a big factory. Spring recruitment is approaching, I hope everyone can get their own satisfactory offers in the spring recruitment. Finally, you can see the friends here give a thumbs-up.