preface

Ha, it looks like after a job-hopping and everyone concerned about one thing, the first wave test summary response and comment, watch a lot of friends and thumb up, I will continue to follow-up interview some of the content, there are a lot of the interview I write my own answers is vague, but in the interview process is described in the table more. After all, there are so many words to write. I just wrote a general answer, if you are not satisfied with the answer you can check the standard answer.

2020 the first wave front interview | test summary

By the way, many friends say that the interview questions are too simple and are basic and so on. In fact, I am also a junior and intermediate level, so the interview position of the company and the corresponding salary are matched with this kind of questions, and the algorithm questions are rarely interviewed.

Salary range: 11K-14K

Technical ability: Those with strong ability and high expansibility can talk more with HR on their own

Interview advice: please don't be cold, chat please wait for each other to finish the answer, do not complain and say the shortcomings of the previous company

The basics of JavaScript need to be well understood, even if the principles and differences of some frameworks are hard to tell

The final summary: I am still in the interview, if your company in the recruitment of intermediate please contact me ha

Interview Questions

  • Describe the difference between React and Vue

If you’re familiar with this problem, describe it in terms of the differences, how it works, why it works, and talk about it for half an hour. I won’t ask you too many questions later.

1. Design Philosophy VUE's website states that it is an incremental framework with a bottom-up and incremental design. React advocates functional programming, so it advocates pure components, immutable data, and one-way data flow. Of course, two-way data can also be implemented manually, such as onChange andsetState to implement a two-way data flow. React is a rendering function that returns a virtual DOM tree in the middle of the rendering function. Vue uses webpack+ Vue-Loader as a single file component. React recommends JSX + inline style, which translates HTML and CSS into JavaScript, i.e'all in js'. 3. The build tool Vue provides CLI scaffolding to help you build projects very easily. React also provides create-react-app for this purpose, but it has some limitations. It cannot be configured, etc. 4. Data binding VUE is an MVVM framework that implements bidirectional data binding, updating the model layer when the view changes and updating the view layer when the model layer changes. In VUE, bidirectional binding technology is used, that is, the changes of the View can change the Model in real time, and the changes of the Model can be updated to the View in real time. React is a one-way data flow. Properties in React are not allowed to change, and states are allowed to change. React does not allow components to change their state directly through this.state. The state set by itself can be passedsetState to make the change. (Note: ReactsetState is asynchronous, so retrieving the DOM may be the same as before, so we need to use thesetState gets the updated new content in the second argument (callback function). Here's how React works if you want to know moresetHow is the asynchronous operation of State realized, and the update in Vue is through micro tasks, etc.] 5. Diff algorithm In Vue diFF algorithm implementation process: 1. Build a virtual DOM tree in memory 2. Render the virtual DOM tree in memory into a real DOM structure 3. When data changes, the previous virtual DOM tree is combined with the new data to generate a new virtual DOM tree 4. Compare the generated virtual DOM tree with the last one (diff algorithm) to update only the dom that needs to be replaced, rather than redrawing all of it. In the Diff algorithm, only the nodes of the two DOM trees before and after are compared at a flat level, without depth traversal. React diff algorithm implementation process: DOM structure changes ----- directly unmount and re-create the DOM structure ----- does not uninstall, but updates all child nodes of the same level. They can be distinguished by key ----- and follow 1.2 (the presence or absence of a key only affects the complexity of the diff algorithm, in other words, if you do not add a key, The diff algorithm will violently update according to the two-two strategy, but if you add a key, the diff algorithm will introduce some additional operations.)Copy the code

React updates nodes one by one, converting to the target node. The final insertion of a new node involves a lot of DOM manipulation. Diff consists of three operations: move, delete, and add. If a unique key is given to each node, React gives priority to move to find the correct position to insert new nodes.

Vue keeps track of the dependencies of each component without the need to re-render the entire component tree. React requires shouldComponentUpdate to render components whenever the state of the application changes.

What are the advantages of Vue and React? The more you talk, the more you understand, the better. I’ve only said three of them.

  • What are the common data request formats used by the front end? What are the features?

This question has been partially answered in HTTP, but the usage scenarios are described in detail here

Get/Post/Delete/Patch/Put often use the five, the other is not to say Usually: We use Get requests to Get data, we use Post requests to send data, we use Put requests to update data, we use Delete requests to Delete data, and we use Patch requests to apply partial modifications to resources. Get requests are cached, but Post requests are not.Post is a bit safer than Get because Get requests are contained in the URL (you can write to the body if you want) and the browser keeps a history of them. Post does not, but it is the same in the case of packet capture. 4. The URL has a length limit that affects Get requests, but the length limit is specified by the browser, not by the RFC. 5Copy the code
  • Re-wrap AXIOS. Describe your ideas and ideas for encapsulating AXIOS in your project
In terms of wrapping AXIos and so on, I have a simple article about wrapping AXIos for you to refer to. Typically, we rewrap Axios by introducing some Message and Loading components of the UI component for prompts. 1. Obtain the token information stored in the browser or the VUEX to determine whether to switch to the login page 2. Set the customized request header information after obtaining the token. 3. In the response event, use the switch to determine whether to redirect to the page or send a message based on the returned status codes and service requirements. 4. Encapsulate the return results of the request and response events, using promises. 5. Add request loading and prompt information. The simple version is similar to the preceding. The complex version needs to be encapsulated based on services.Copy the code
  • Please introduce this
In most cases, it can be summed up in one sentence: this always refers to the object on which the function is called. For normal functions, this refers to the caller who calls the function, the global callback is executed by the function, and this refers to the window. The arrow function's this search behaves the same as a normal variable, level by level in scope. Arrow function this cannot passbind, call, apply to modify directly (or indirectly). Changing the point of this in scope can change the this of the arrow function. Describe this problem, here we can expand to say how to change this to point to, throughbindThen talk about their differences. If you know more, you can talk about their implementation principle, or write by handbind, call, apply implementation.Copy the code
  • Please introduce throttling function and anti – shake function, simple implementation of throttling function and anti – shake function
The nature of throttling and stabilization: Both of these things exist as closures. They cache time information as free variables by wrapping the event's corresponding callback function, and finally usesetTimeout to control the event firing frequency. Anti - shake function: there is a button, he provides to view your future wife's appearance, when you click the query several times in a certain period of time, he will only take the query operation after you click the last time. Throttling function: When you play LOL, clicking on a magnification move will not work for a period of time after you release a big move, because there is a cooldown. I'm not going to write the code here, the easy version is very easy, the full version is usually packaged using LoDash.Copy the code
  • Tell me about Eventloop
Understanding the Event Loop is the first step to understanding how Vue optimizes DOM operations. There are two types of asynchronous queues in micro-task and Macro-task event loops: Macro (Macro Task) queues and Micro (Micro Task) queues. Common macro-tasks include:setA Timeout,setThe Interval,setImmediate, script, I/O operations, UI rendering, etc. Common micro-tasks include Process. nextTick, Promise, MutationObserver, etc. You also know that when we execute JS code, we are actually putting functions on the execution stack, and when asynchronous code is encountered, it is suspended and added to the Task queue when it needs to be executed. Once the execution stack is empty, the Event Loop takes the code that needs to be executed from the Task queue and puts it into the execution stack for execution, so it is essentially asynchronous or synchronous behavior in JS. So the order of Event Loop execution is as follows: So the first thing you do is you execute the synchronous code, which is a macro task and when you've done all the synchronous code, the stack is empty, and you check to see if there's any asynchronous code that needs to be executed and you execute all the microtasks and then you render the page if necessary and then you start the next Event Loop, and you execute the asynchronous code in the macro task, which issetThe callbacks in Timeout include process.nextTick, Promise, and MutationObserver, where process.nextTick is unique to Node. Macro tasks include script,setA Timeout,setThe Interval,setImmediate, I/O, UI rendering. A lot of people here have the misconception that micro tasks are faster than macro tasks, which is actually wrong. Because a macro task includes script, the browser executes a macro task first, followed by a microtask if there is asynchronous code.Copy the code
  • Please use an example to visually describe the prototype chain

Ha, I have sent a vivid analogy to this question at the boiling point, which made the interviewer laugh.

Every school has an ancestor. Apprentices learn skills on the mountain, learn to remember the teacher's teachings, display a martial arts. Just one day against the enemy, in the face of the enemy's weird martial art, the teacher seems to have never taught the crack of the law, then shouted a master save me, a flash of white light fell on the head, master's soul possessed, a set of excellent and sharp boxing killed the enemy unprepared. But the enemy is also very difficult to deal with, I am afraid that the door legend from the sky to the palm law to make the enemy. You secretly worried in the heart, urged the father quickly hair recruit, then only listen to the body spread the voice of the father: "MD this broken palm method lazy didn't learn, I went to my master also called to ask..." Each FunctionX has a prototype. Apprentice (object) in the mountains who (= new FunctionX), well remember that master teach after down the mountain, to cast skills (http://object.xxxobject.xxx). Just one day against the enemy, in the face of the enemy's weird martial art, it seems that the teacher has not taught the crack method (object object has no YYy method), then shouted a father to save me, a flash of white light fell on the head, grandfather (__proto__) soul possession, A set of excellent and fierce boxing to kill the enemy unprepared (continue to look for the prototype yyy method). But the enemy is also very difficult to deal with, I am afraid that the door legend from the sky to the palm law to make the enemy. You secretly worried in the heart, urged the father quickly hair recruit, then only listen to the body spread the voice of the father: "MD this broken palm method lazy didn't learn, I went to my master also called to ask..." (If there is no YYY method in the prototype, then continue to find the prototype of the prototype, is called the prototype chain)Copy the code
  • Describe Reflow and Repaint
Backflow: When we make changes to the DOM that result in a change in the DOM's geometry (such as changing the width or height of an element, or hiding an element), the browser recalculates the element's geometry (which also affects the geometry and position of other elements), and then draws the calculated results. This process is called backflow (also known as rearrangement). Redraw: When we make changes to the DOM that result in a style change without affecting its geometry (such as changing the color or background color), the browser doesn't have to recalculate the element's geometry and simply draw a new style for the element (skipping the backflow shown above). This process is called redrawing. From this we can see that redrawing does not necessarily lead to backflow, backflow does lead to redrawing. By comparison, backflow does more work and costs more. But these two are ultimately sexual, so neither is good. In development, we try to minimize the amount of backflow and redraw as much as possible from the code level.Copy the code
  • Describe what an execution stack is
The execution stack can be thought of as a stack structure for storing function calls, following the principle of first in, last out. When we start executing our JS code, we first execute a main function and then execute our code. In accordance with the principle of "first in, last out", the last function is popped first on the stack.Copy the code

The end of the

So far in 2020, most of the interview questions of the companies I’ve been interviewing with have included the above content, but I didn’t include some code diagrams or other questions, which are too easy and I’m sure you can do it. I’ll fill in some details later.

Finally, I hope the interview content I summarized can be helpful to you in the interview in 2020.

❤️ do me a favor

If you find this article inspiring, I’d like to ask you to do me a small favor:

  1. Like, so that more people can see this content (collection does not like, is a rogue -_-)

  2. Pay attention to the public account “Tomatology front-end”, I will regularly update and release front-end related information and project case experience for your reference.

  3. Adding a friend may not help you a lot, but there are some business issues that can be discussed and exchanged.