preface

Recently, I interviewed several companies in a week, and finally got the offer of netease which I was interested in, so I rejected other interviews. As for some other big companies, I didn’t submit my resume. For a variety of reasons (food), I plan to study hard for now.

I wish you all a successful autumn recruitment and become offer harvester.

The most interesting is netease Youdao third round of technical interview, because there is no specific answer, interested can have a look, I will first put the third round of interview scenarios out of it, some other basic words, you can pass again.

Netease youdao

On three sides

The third round of interview was a little brother, the interview was about 70 minutes, originally was a remote interview, but because of the voice problem, so I chose the telephone interview, the little brother is also very good, give me a feeling is very strong feeling, indeed, the next question, I know not easy.

The first scenario problem

Live scenes, for example, you should know, you need to implement a scene like this, such as a teacher to click somewhere, such as U disk, you need to display the U disk animation effects, such as this time, the teacher to click on the computer screen, you need to show a small computer animation effects, to this appearance, need in a given point in time, Complete a specific animation effect.

  • Well, the problem, in my opinion, is that animation is an exception, and if it’s direct post-processing, it doesn’t have much to do with our front end, so the next question is how do we deal with time synchronization, how do we start showing animation at a specific point in time
  • Second question, if we can get to a certain point in time of the animation, then, little brother, put forward a new problem to us, is when your network congestion, such as delay time, this time, the effect in caton, that need to be 5 seconds to play out, may need to 7 seconds, then you are how to solve animation synchronization?

Well, I have never done this kind of question before, so it is very difficult to answer it. If you know something about it, you can comment and leave your answer. I am open-minded to learn.

Second scenario question

There is a scene, in an input box input content, how to more efficient to prompt the user you input information, for example, you input Tmall, then the corresponding prompt information is Tmall mall, Tmall group, how to obtain this information fastest, there is no need to send requests to achieve?

  • For example, when the data request, as far as possible to send fewer requests, so you can do anti-shake and throttling processing
  • Next little brother, gives a new scenario, when your server is down, data can not be accessed, then how to design a small local database
  • And then the question is how do you design a local data, optimized point, which is as fast as possible, as fast as possible per query
  • My first idea was to design key-value in this way, but then I was questioned by my brother. For example, if you follow your idea, if the keyword isday.TmallIf data is designed in this way, there will be data duplication, which is obviously unreasonable.
  • I’ve been thinking about it for a long timeThe prefixOverlap, so is there a data structure that can solve this problem? 👇
  • Dictionary tree, we can build a local preread dictionary tree, in this case, according to the user input content, dictionary tree search, the time complexity is about O(m+ N), so greatly speed up the search efficiency.

Of course, if there is a better solution, you can leave your answers and see how you solve the problem.

The third scenario problem

If you have used Git versions before, can you implement a Git Diff algorithm that compares the difference between two files? How to mark out the different positions of the two files, and how to find out the difference, and explain the idea in detail.

  • At first I thought diff algorithm, like the virtual DOM algorithm in VUE, but it doesn’t feel right. Diff is optimized, so it obviously doesn’t make sense, so this method doesn’t make sense.
  • So two files, how to quickly find the difference between the two files? I thought about this question for a long time. Well, AT that time, I seemed to have some ideas, such as comparing line by line. In this way, it is not very reasonable
  • Little brother tipped me off if we were going to lookLongest common substringIt’s time for me to remember that this is two stringsLCS“Should be a classicDynamic programmingThe question, the last question, I really didn’t think of this, is maybe I haven’t seen this kind of dynamic programming problem for a long time.
  • I think the core is dynamic programming to solve the LCS, and the rest of it, and you can go and look at some of the articles, which are pretty good, but I won’t open them up here.

How Git generates diff: Myers algorithm

Well, three aspects, the test is you think about the problem, and how to combine the problem analysis, may also test the algorithm, well, harm, quite difficult.

One side

The interview process is 50 minutes, basically introduce myself, I spent one minute to introduce my school experience, then the question and answer period.

All the way down the little brother patient guidance, very gentle, this is my phenomenon of the interviewer should be like, will also be patient to prompt you, if there is a question, will help you, guide you how to answer.

H5 new features

Resume above wrote this content, so was asked, harm, at that time the brain a meng, did not answer completely, here in good combing again?

  1. Local Storage feature
  2. Device compatibility HTML5 provides an unprecedented open interface for accessing data and applications
  3. Connection feature WebSockets
  4. Support Audio Video SVG Canvas WebGL CSS3
  5. Range of features

Add drag-and-drop apis, geolocation, SVG drawing, Canvas drawing, Web Worker, WebSocket

Then I answered local storage, and the next convenient question?

Localstroge sessionstoge distinguishes application scenarios

Communication between VUE components

Have asked this question several times interview, this question I think so, depending on your project at ordinary times what are often use the way, so I always answer three ways, instead of eight kinds of method of communication between components on the net, I can’t remember, also think about to communicate with the interviewer, how do you use in the project.

Traverse object methods

  • For in traversal can also be used, but the name of a property that is not inherited can also be obtained, as determined by hasOwnproperty
  • Object.keys() is an enumerable property and method name
  • Object. GetOwnPropertyNames () can get array contains its own enumeration or not enumerated attribute name string, if is an array, still possible to getlengthattribute

Programming problem 👇

Array to heavy

I can use O(n). I can use O(n)

  • Set
  • With object properties, I think that’s what he’s trying to test, so why don’t I post you a code?
let unique = arr= > {
            let obj = {}
            return arr.filter((ele) = > {
                return obj.hasOwnProperty(typeof ele + ele) ? false : (obj[typeof ele + ele] = true)})}Copy the code

Flattening of arrays

let flatArr = (arr) = > {
            return arr.reduce((res, ele) = > {
                if(Object.prototype.toString.call(ele).slice(8, -1) = = ='Array') {
                    return [...res, ...flatArr(ele)]
                }else{
                    return [...res, ele]
                }
            },[])
        }
        let arr = [1.2.3[2.3.4.5]].console.log(flatArr(arr))
Copy the code

Of course, there are many ways to implement it, it’s up to you to implement it, the simplest is to recurse objects.

Depth traversal

const tree = {
	name: 'root'.children: [{name: 'c1'.children: [{name: 'c11'.children: []}, {name: 'c12'.children: []}]}, {name: 'c2'.children: [{name: 'c21'.children: []}, {name: 'c22'.children: []}]}// Depth-first traversal prints the name
// ['root', 'c1','c11', 'c12', 'c2', 'c21', 'c22']
Copy the code

This problem, I began to think of recursion writing, after writing, and then the little brother asked me the shortcomings of recursion, and how to optimize, do not use recursion method how to achieve?

During the interview, I didn’t write it out, I was too nervous and not in the state. When I rechecked, I wrote the realization of stack.

function solve(root) {
            let stack = [],
                result = [];
            if(! root)return [];
            stack.push(root)
            while(stack.length) {
                let node = stack.pop()
                if(node == null ) continue
                result.push(node.name)
                for(let i = node.children.length-1; i >= 0; i--) {
                    // This is the point of the interview and should be pushed from the back node
                    stack.push(node.children[i])
                }
            }
            return result
        }
Copy the code

The addition of linked lists?

This is the topic of LeetCode, I seem to have written it, in the last question of the interview, I was confused, I had no idea what I was doing, in fact, the linked list questions were routine, I did not master the routine.

This I wrote a topic, after the problem brush, should encounter linked list problem, can be easily solved.

The 9 basic operations of the “Algorithms and Data Structures” list

Second interview

About time arrangement, calculated that generally is spent 50 minutes, was a little sister, little sister good gentle, my impression is that small and medium-sized elder sister is very nice, I remember I do Promise when the written test, I made a mistake, she also specially asked me again, then I think I know is wrong, however, this process is little sister smile, alleviate the embarrassment, But also patiently to guide me, give her praise ah.

ES6 syntax, Promise

const promise = new Promise((resolve, reject) => { console.log(1); resolve(); reject() console.log(2); }) promise.then(() => { console.log(3); },() => {console.log(" failed status ")}) console.log(4);Copy the code

After I see, directly said the answer, this is not good, because in general, the interviewer of the topic must be a little pit, the next time to pay attention to, finally the interviewer little sister or smile told me, should do so, and then how.

Talk about map and set

Well, I talked to her about how to use them, and the differences between them, and what kind of situations they’re used in.

By the way, I talked about Weakmap, and then the difficulty here is not a lot, is that you need to understand what the difference between the two data structures is, give an example to illustrate the situation.

Front-end performance optimization

This problem is too big, and for a real development experience of 0, this problem is very life, so, I prepared from the URL to page rendering this piece to say, there are a lot of optimization points, you can go to understand.

  • Build the request line
  • Check the cache.
  • DNS resolution (how to optimize)
  • TCP HTTP (such as reducing the number of requests, HMM, there should be other optimizations, CDN?)
  • Browser rendering process (there are optimizations in this, such as how to avoid backflow and redraw commonly)
  • Anti-shake and throttling treatment
  • Webpack optimization can also be said, if you have confidence

Other problems

In this interview, I feel that it is not the same as the interview, asking some standard answers, but more to communicate with you about technical problems, such as the problems you meet, how to solve. The sister also mentioned that if you need to do technical sharing, what technical sharing do you think you can share with the team?

I feel so embarrassed. I am an intern. I feel that I have been studying the problems of Webpack packaging recently, and I am able to write basic content.

Other side by

This is the problem of some other companies, such as like, graffiti, etc., the problem is very basic, so I took over, mainly feel simple, so I dropped.

You said you’ve been working on Webpack. Tell me

This question was directly mentioned when I introduced it. Recently, I have been writing my blog and studying Webpack. I will talk about some configuration of Webpack, such as Loader, plugins and common Loader.

And by the way, ask me to explain the principle, which I don’t know for the moment.

ES6? Say it

Well, just follow your usual routine, like arrow functions, expansion operators, Promise, and then sort of say those three… .Too nervous

In fact, many of them have been used, so let me record them here

  • ES6 Class
  • for… Of and the for… in
  • Object deconstruction
  • Rest/Spread operators
  • Template string
  • const let

closure

Well, this question, a platitude question, let it go, different people, have different understanding of this.

A bosom friend technology

The interview lasted for 80 minutes, I think I was about to be asked down, really, this process is too long ah, but, the little brother is also very nice, the process has very carefully listen to me, well, listen to me a person in so bara Bara for a long time.

  • The prototype

  • closure

  • scope

  • Enter the ENTIRE URL process

  • HTTPS is different from TLS handshake

  • Browser cache

  • HTTPS how to ensure security, TLS handshake process chat

  • Vue communication mode

  • Vue data responsivity principle, how to rewrite the array

The above answers, I will not comb, I wrote before the blog has been involved, so, good preparation, in fact, there is no big problem.

You can see what I’ve combed before, basically covering all of 👇

❤️ thank you

If you find this article helpful:

  1. Click “like” to support it, so that more people can see this content.
  2. Follow public accountThe front-end UpUp, regularly push good articles for you.
  3. If you feel good, you can also read TianTian’s recent article (thanks to Digg friends for their encouragement and support 🌹🌹🌹) :
    • Configure WebPack4 from shallow to deep (580+👍)
    • Reinforce your HTTP body of knowledge (860+👍)
    • 21 High-frequency JavaScript handwritten interview questions for Good (580+👍)
    • 18 Browser interview questions (740+👍)
    • 54 JavaScript interview questions (620+👍)