preface

Introduce myself first: the class of 2021 double than a front-end chicken dishes, face of the company are: Meituan nailing to the shop, ali, ali tao, bytes, cvte, live tiger tooth, tencent, beating cvte, live tiger tooth, tao hang side, nailing through process also waiting for news, mid-april tencent, harvest Meituan offer, finally chose to join tencent. This article in addition to some surface classics, the end of the article has some of their own summary and experience, you can refer to.

Face the summary

As sorted out below, some of the school practice and project content has been deleted.

Ali Tao department of technology side

Alibaba tao department of technology in advance batch one side, 1h or so of the phone, hung up.

Tao department to my feeling is to ask very detailed, especially the project (Ali department is very important to the project) the interviewer is very nice, very patient, but also very high requirements, to my evaluation is a good foundation, but not very familiar with the mobile terminal development, may be more important to this piece, finally did not give me.

project

  • Briefly introduce a project
  • Do you encounter any bugs in the mobile end, how to solve them, every question is very detailed
  • Describe the technical difficulties of a project
  • How did a certain animation in the project work, why did it work, and why did it work with CSS3 animation
  • Rem principle, PC and mobile CSS is the same?
  • How to achieve a mobile terminal rotation map, slide to follow, release page turning

The front-end based

  • How to judge the direction of this and what scenes are there
  • Apply, call, and bind
  • The following case determines whether a closure is a closure (note: no function is called)
function foo() {
    let a;
    return function() {
        console.log(a); }}Copy the code
  • The principle of event bubbling, event capturing, know about custom events
  • Characteristics of the arrow function

vue

  • How components communicate (three dissatisfactions, as many as possible)
  • Vue data hijacking principle

other

  • Check my blog, see a browser cache, ask for the status code you know
  • Check my blog, there is webpack, ask common loader
  • NodeJS is different from traditional backend languages
  • How does the view and model interact? What’s the difference between applets and traditional Web products
  • Ask me if I know Facebook/GraphQL
  • Have you paid attention to some technical points on mobile

Bytedance side

Bytedance Guangzhou efficiency engineering side, about 1h video side, through.

For example, when I mentioned that V8’s GC does multiple GCS when the main thread is idle, the interviewer would ask me how to define the main thread idle, for example, what is the memory size of v8’s new generation.

project

  • How to achieve breakpoint continuation, how to achieve large file upload
  • LocalStorage and cookie
  • What is REM, and what else can I do to scale
  • How to restrict access to cookies and what does HttpOnly do
  • What is XSS? What is CSRF? How to solve it
  • What is the same origin policy, how does it work across domains, cORS
  • What is the function of the option request? Why is it issued? When is it issued

The front-end based

  • Describe the event delegate and event bubbling
  • Advantages of event delegation
  • When can a memory leak occur
  • How does V8 GC
    • So let’s talk about GC
    • Why use incremental notation
    • Memory size of the new generation

What does the following code print

<div class="outer">
    <div class="inner"></div>
</div>
Copy the code
funciton click(e) {
   console.log(e.target.className);
   console.log(e.currentTarget.className);
}

document.querySeletor('.outter').addEventListener('click', click);
inner.addEventListener('click', click);

// 1. Click inner print order

/ / now
funciton click(e) {
   console.log(e.target.className);
   console.log(e.currentTarget.className);
   setTimeout((a)= >{console.log('timeout')});
}

/ / now
funciton click(e) {
   console.log(e.target.className);
   console.log(e.currentTarget.className);
   setTimeout((a)= >{console.log('timeout')});
   Promise(r= >{
       console.log('promise');
       r();
   }).then((a)= >{
       console.log('resolve'); })}/ / now
funciton click(e) {
   console.log(e.target.className);
   console.log(e.currentTarget.className);
   setTimeout((a)= >{console.log('timeout')});
   requestAnimationFrame((a)= >{console.log('Animation')});
   Promise(r= >{
       console.log('promise');
       r();
   }).then((a)= >{
       console.log('resolve'); })}Copy the code
  • A dynamic programming algorithm, prompting forced to write also gave.

Bytedance two sides

The second team leader, more relaxed, simple technical problems + a MID algorithm, about 40 minutes of video surface, too

  • Asked about the project
  • What happens when you type a URL into a web page display
  • An algorithm problem: find the maximum path sum of binary tree

Bytedance has three sides

Director of three sides, about 30 minutes of video face, crazy hatred project, not ready, dead

  • A project to cut details, explain the basic cool
  • What are the design patterns different between React and Vue
  • Vue life cycle
  • An open question: x floor, Y floor elevator, how to dispatch the highest efficiency

It is a pity that Bytedance has almost got the offer, but I am not ready for the third part. The algorithm gave me two mid difficulty questions. The interviewer would always guide you to complete them. I was very patient.

Alibaba nails one side

Let’s talk about the results first, 2 rounds of technology +1 round of crossover +1 round of HR, so far I have finished the interview with HR, but I have waited for two weeks without any news, it is said that Ali only accepts rating A this year, so I should be cold.

I feel lucky, Nail nail compared with tao department is much simpler, one side video chat half an hour, do two simple topics

  • Implement an array de-duplication
  • Implement a function stabilization

Alibaba nail nail two sides

1H video, mainly ask the project, from the beginning of the project to ask some knowledge points, other basic don’t ask.

Ali Baba nailing cross face

30min phone, is a TAOBAO P9, also ask a project, asked half an hour to me.

Ali department gives me the impression that it pays more attention to the overall grasp of the project, engineering thinking and understanding of the product, but it should be strange to me, because I hardly ask about the technology.

Tencent side

It should be quite special for me to meet Tencent. In the first round, I went directly to the committee + HR, which was also very interesting. Finally, I filled in another round of director, the whole process was like a roller coaster, and finally I got the offer two days before the end of Tencent’s approval.

1h30min video, this side is also the side OF the algorithm I have done the most.

Algorithm problem

  1. Serpentine fill number
  2. Parentheses matching
  3. Parentheses generates
  4. The sum of two Numbers
  5. Words reverse
  6. The longest prefix

Most of the problems are solved in seconds. Some problems only need to be explained, and some need to be written out. Finally, time complexity is analyzed.

basis

  • Implement the Promise idea manually
  • How to achieve a middle fit, fixed on both sides of the layout
  • The way to clear the float
  • Write a function using ES6 to determine whether a student in a class has passed
  • Vue bidirectional binding principle
  • HTTPS Handshake Principle
  • The implementation of uploading files (starting with tags)

Tencent’s second interview

30min telephone interview, this side is the face committee, selected a wechat pay eldest brother, the whole project was very cold and no feedback, I thought it was too cold, finally gave me too.

  • Enter the URL to display the process, as detailed as possible
  • How to solve the difficulties of the project. (I feel he is not interested, so I have to bite the bullet.)
  • Career planning

Tencent Director face

In 1h video interview, this aspect was the most miserable. The project was asked deeply and many non-front-end things, including distribution, database, Android, etc. Finally, I was taught that after the interview, I directly closed myself for two days.

  • Name a typical project
  • Difficulties and bugs of the project, how to solve them (mentioned one, did he say it was difficult…)
  • When I mentioned that browsers have a limit on the number of concurrent requests, he didn’t believe me and opened the shared screen to prove it.
  • As much detail as possible about what happens from entering the URL to page implementation (DNS resolution, TCP three-way handshake, four-way wave, browser parsing DOM)
  • Why three handshakes? Why four waves
  • HTTPS handshake procedure
  • Vue source code to see what parts
  • The difference between a non-relational database and a relational database
  • How do two threads communicate with each other
  • Is there a downside to applets cloud development
  • Do you know how the WebView communicates with the client
  • Know anything about distribution? Do you know Python, Go, Java? Have you considered writing a back-end Android? If I asked you to write backstage, would you do that?
  • Career planning, how do you understand the front end
  • If there is a freshman dormitory allocation system, how do you choose database, non-relational or relational, why, how to design allocation algorithm

Meituan comments on one side

Meituan comments to the business group of the store, 1h telephone interview, pass.

There are a lot of general basic questions that I forgot to record. Some of the more profound ones are:

Wechat applets

  • The life cycle
  • The difference between navigatorTo and redictTo
  • The way pages communicate

Vue

  • Keep alive – components
  • Vue-router hook function
  • Scenario question: how can I make the background color of the left bar change according to the page switch
  • How components communicate

Database three paradigms, deadlock causes and solutions

Meituan reviews two interviews

1H Video plane, pass

This scene try to ask too many things, the front end of the foundation almost asked a time, also did not write down.

  • The difference between the arrow function
  • How to catch all errors of a page, which errors of a page cannot be caught, how to catch a resource loading error (front-end monitoring)
  • How to encapsulate wx. Request as a Promise

Coding problem

  • Writing an inheritance request can be determined using instanceof
function Parent()
function Children()
Copy the code
  • What does the following code return
if( !('a' in window) ){
   var a = 10;
}

console.log(a);
Copy the code
  • What type of error does the following code report
obj = {
 a:1
}

obj = null;

obj.a;
Copy the code
  • Merge two ordered arrays.
  • Code according to the requirements.
var menus = [
    {
        url: ’/’,
        children: [].id:1.parent_id:0}, {url:’/ad’,
        children:[
            {
                url: '/ AD/product',parent_id:2.id:3.children:[]
            },
            {
                url: '/ AD/review',parent_id:2.id:4.children:[
                    {
                        url:’/ad/review/guest’,
                        parent_id:4.id:5.children:[]}]}],id:2.parent_id:0}]varUrl = '/ AD/product'function find(menus, url){
    // Returns the id of the root node corresponding to the URL

}
Copy the code

Meituan reviews three aspects

In the video of 1H, I did three questions. Although all of them had flaws, I finally gave them and got the offer.

  • Implement an ascending sort
  • Implement an observer mode (on, off, once)
function EventTarget() {
    this.events = {
        
    }
}

EventTarget.prototype = {
    constructor: EventTarget,
    on: function(event, cb) {
        if (!this.events[event]) {
            this.events[event] = []
        }
        this.events[event].push(cb);
    },
    off: function(event, cb) {
        
        if (this.events[event]) {
            
            this.events[event].forEach((item, index) = > {
                if (item === cb) {
                     this.events[event].splice(index, 1); }}}}),emit: function(event) {
        if (this.events[event]) {
            let cache = this.events[event].slice(); // make a cache to prevent reference problems
            
            cache.forEach(cb= >{ cb.call(); })}},once: function(event, cb) {
        let wrap = function() {
            cb.call();
            this.off(event, wrap)
        }
        this.on(event, wrap)
    }
}

// test case
let event = new EventTarget;

event.on('click'.function a() {
    console.log(1);
});

function foo1(){    
    console.log(2);     
    event.off('click', foo1);
}

event.on('click', foo1);

event.on('click'.function b() {     
    console.log(3); 
});

event.emit('click')
Copy the code

This is an interesting case to look at what happens if you don’t do a layer of caching.

  • Programming problem
// Write an algorithm to parse the following symbols into a JSON tree structure
let str = `<xml><div><p><a/></p><p></p></div></xml>`

// Here are my answers
function Node(tag) {
    return {
        tag,
        parent: null.children: []}}function foo3(str) {
    str = str.substring(1, str.length - 1);
    let arr = str.split('> <');
    console.log(arr);
    let reg = / / / /;
    let root;
    let currentParent;
    let stack = [];
    
    for (let tag of arr) {
        if(! reg.test(tag)) {let el = new Node(tag);
           if(! root) { root = el; } stack.push(el); }else {
            let el = stack.pop();
            if (el === root) {
                break;
            } else {
                currentParent = stack[stack.length - 1]; el.parent = currentParent; } currentParent.children.push(el); }}return root;
}
Copy the code

I feel that the overall difficulty of Meituan is ok. I got the offer for some algorithm questions even without writing them out. The main reason is that their interviewers write the questions by hand, and there will be some bugs in the test cases.

experience

Summed up some experience, want to enter the big factory students can refer to it ~

  1. Knowledge of at least one framework, supported by one or two projects, and familiarity with key source code is a plus (back pages are fine, but not recommended)
  2. Project experience is important, 3 or 4 are appropriate, highlight highlights and difficulties, if there is no particularly good project, implement a small demo, to show that you have studied the technical difficulties
  3. The more detailed the better, including the principle of encryption algorithm, DNS resolution, TCP are less asked, but at least familiar with the three-handshake four-wave process, operating system deadlock, process scheduling algorithm, page replacement algorithm
  4. The front end of the foundation to pass, the surface of this piece of general no problem, look at the surface of the problem, are routines to
  5. The algorithm brushed through the “Sword Finger Offer” and solved the simple questions in seconds. Within 10min, bugfree and Leetcode wrote about 200 questions, which were basically no problem
  6. Take a closer look at some of the bonus points, such as V8’s GC process and iterator efficiency comparisons

So much for today and will be supplemented later