Let’s document my front-end interview

The owner of this building is 24 years old and has worked in the last company for nearly two years, base Chengdu. Objective: 10K+, interview questions that I can remember and most of which I have not answered, summary after the interview, and the answers are for reference (welcome to correct)

1. First interview, a company that does cyber security (9-12K)

  • Date: The morning of June 15, 2021
  • Result: Failed
  • Interview Questions:
  1. Let’s talk about repaint and reflow
Answer:1.Browser rendering mechanism:1.First, the browser parses HTML to DOM, CSS to CSSOM, and then combines DOM and CSSOM to generate a render tree.2.Once you have the render tree, and know the style of each node, the browser calculates the location of the node and draws it to the interface.2.Backflow: When the position or size of some elements of the Render Tree changes, causing the browser to rerender part or all of the document, it is called backflow. An operation that causes backflow:1.Page first render2.The browser window changes3.Change of node content4.Add or remove nodes...3.Redraw: When a change in the style of an element on a page does not affect its position in the document flow, the browser assigns the new style to the element, a process called redraw. An operation that causes a redraw:1.background 2.Visibility (visibility Settings, except display: None)----> Simple memory is: changes in color, background, border, outline, etc. will cause redrawing4.Conclusion: Repainting does not necessarily cause backflow, backflow does cause repainting5.Performance: reflux has a great influence on specific gravity drawing.6.Avoid performance impact: H5, CSS:1.Avoid table layouts2.Avoid unnecessary DOM hierarchies3.Using transform to do deformations and shifts does not cause backflow to Javascript aspects:1.Avoid frequent manipulation of DOM nodes and CSS properties with JS2.For a large number of DOM operations, using code document fragments, the documentFragment (so that it can be inserted only once) is as follows: HTML: <ul ID ="list"></ul>

const list = document.querySelector('#list');
const fruits = ['Apple'.'Orange'.'Banana'.'Melon'];
const fragment = document.createDocumentFragment();
fruits.forEach(fruit= > {
  const li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
});
list.appendChild(fragment);
Copy the code
  1. CSS3 animation to understand how much
  2. How can pages load faster regardless of network bandwidth? (Web Performance optimization)
Ignoring this before the interview, the question was poorly answered, and the interviewer gave crazy hints and failed to answer. First, there's the age-old question: What happens from the moment the user enters a URL to the moment the page appears? In other words, optimize within these processes. Then, the following will be analyzed:1.User input URL2.The browser parses the URL to resolve the host name and port number3.The browser converts host names to IP addresses (the browser first looks up its own DNS cache list, and if it doesn't have one, sends a query request to the default DNS server and caches it)3.through3The secondary handshake establishes a TCP connection with the server4.The browser sends HTTP request packets to the server5.The server processes the request sent by the browser and returns a response6.After the request response processing is complete, pass4The second wave disconnects the TCP connection7.The browser parses the returned document and displays the processing results on a page.1.Reduce the number of HTTP requests, solutions: combine files, such as js, CSS files; Optimize the image and merge multiple ICO images together using CSS Sprite.2.Using content delivery Network (CDN), principle: that is, multiple servers are deployed in different geographical locations, so that users can access the server closer.3.CSS at the top, JS at the bottom. How it works: JS loading and execution blocks the render thread. If we put it in the head tag, we can add the defer attribute to the script tag.PSRemember, by the way, that there are two options for loading JS resources asynchronously: defer and deferasync
    defer: Tells the browser to download the JS script immediately (without blocking the rendering thread) and wait until the page has been parsed.async: tells the browser to download the js script immediately (the download process does not block the renderer thread), and to execute it immediately after downloading it will block the renderer thread. -- So it's addedasyncThere should be no code to manipulate the DOM in your javascript script.4.Js files are dynamically loaded and imported on demand5.Reduce DNS lookups, solution: use DNS pre-resolution, such as <link rel="dns-prefetch" href="www.baidu.com">,! Use it with caution because multiple DNS lookups may occur6.From the perspective of static resources: a. Compress files JS, CSS, images (generally less than 8KB images, base64 processing) b. Tree-shaking remove unused code7.Use browser cache a. Use external JS files and CSS files, the browser will cache, avoiding multiple requests to B. < META http-equiv= < META http-equiv= < META http-equiv="Cache-Control" content="max-age=7200"/>  / / 7200 seconds
    <meta http-equiv="expires" content="Mon 01 Aug 2019 00:00:00 GMT"/>  // Set the expiration time
    
    8.Avoid empty SRC or href, which can result in a request being sent once and possibly returned404
Copy the code
  1. What do you know about Network security (Front-end direction)
I just answered HTTP/HTTPS... There should be a lot, see friends can add. This question doesn't seem to be asked much. XSS: Cross-site scripting attack ----> Induces the victim to execute malicious code on the client in a specific way. (Stolen account password and other information)CSRF: cross-site request forgery ----> Embezzle victim information and send forgery requests.Copy the code

5. React Hooks? How much do you know? UseEffect how to unload components, how to control updates, and what happens when the second parameter is an empty array?

  1. What’s with the temporary dead zone?
The browser preparses our JS code before it executes. Will do two things:1.Variable name promotion: only promotion declaration, not promotion assignment2.Function promotion: The whole function promotion we usually sayvarThere's a variable promotion,let,constNo, but there is. The following code can be verified:let a =10;
    {
        console.log(a) // If no promotion is declared, according to the scope chain, the output should be 10. But the report was wrong
        let a =5; } to summarize:let,constThe initialization process is divided into declaration and assignment. The distance between declaration and assignment is called temporary dead zone.Copy the code
  1. HTTP/HTTPS
  • Self-criticism: because it is the first interview, many questions did not answer… It’s a little awkward. I need gas

2. Second interview, a financial fund software company (6-10K)

  • Date: The afternoon of June 15, 2021
  • Results: The salary was 7200-7500, and the average monthly bonus was about 2000 yuan orally (credibility questionable). — Finally decided not to go, because the salary is not high, and there are frequent business trips for 2-3 months, the company is small, and you feel that you can’t learn any skills
  • Interview Questions:
  1. Written test: the question is very simple, and the interviewer talked to me, she told me that basically can get more than 90 points.
  2. Interview: I talked about the project, but I didn’t feel very in-depth. I met with three people from the interviewer to the general manager. In the process, I talked about technology and drew cakes. I really wanted to leave my appearance.
  • Self-criticism: The interview questions will be basic, let me have an illusion, “only to meet the second offer??” So I came back from the interview and lay in bed all night without studying… I shouldn’t have been lazy.

3. The third interview, a start-up company, making intelligent hardware (less than 50 employees, salary 10-18K)

  • Date: The afternoon of June 19, 2021
  • Result: Unknown, waiting for notification
  • Interview: only interview, no written test. One of the two interviewers was very interested in the content of my last job, so I basically watched it on my phone. I think it was the chief technical officer. The other one should be the head of the front end, who will ask me questions.
  1. How to use the React route to transmit parameters when a page is redirected?
The main methods of parameter transmission are as follows3A:1.Params parameter routing Link (with parameters) : <Link to={`/demo/test/${id}/${name}`}> details </Link> Register Route (declare receive) : <Route path="/demo/test/:id/:name"Component ={Test}/> Receive parameters:let {id,name}=this.props.match.params
    
    2.<Link to={`/demo/test? id=${id}&name=${name}`}> details </Link> Register Route: <Route path="/demo/test"Component ={Test}/> Receive parameters:let {search} = this.props.location.search Note: The received parameter is in the format of:? Id =xxx&name= XXX --> You can import queryString for parsing3.State parameter routing Link: <Link to={{pathName='/demo/test'.state: {id:xxx,name: XXX}}}> Details </Link> Register Route: <Route path="/demo/test"Component ={Test}/> Receive parameters:let {id,name} = this.props. Location. state Note: Refresh can also hold parameters other: encoding modethis.props.history.push({ pathname: "/about".state: {id: XXX}}); PS:this. Props. History. Push () withthis. Props. History. The replace () is the difference?Copy the code
  1. What optimizations have been made in the React framework? PureComponent? www.bilibili.com/video/BV1wy…
I mentioned two things:1.Load components as needed2.PureComponent uses normal Component2Question:1.The component will rerender () even if the state data is not changed as long as setState () is executed2.Render () is an inefficient way to render() only when the component's state or props data changes. Reason: shouldComponentUpdate() in component always returnstrueShouldComponentupdate () compare the old and new state or props data and return if there is any changetrueIf not, returnfalsePureComponent overrides shouldCompoentUpdate() to return only if the state or props data changestrueNote: This is a shallow comparison between the props and state data, if only the internal data of the data object has changed, returnfalse. Instead of modifying state data directly, generate new data.3.Hooks in useMemo/useCallBack??Copy the code
  1. Have you ever used Redux? Let’s talk about Reducer, let’s talk about pure functions
1.Reducer:2.Pure function: a special class of functions that must have the same output (return) as long as they have the same input (argument). The following constraints must be observed: a. Parameter data cannot be overwritten. B. There are no side effects, such as network requests cannot be sent and I/O devices cannot be called. C. Cannot be invokednew Date(),MathRandom () and other impure methods.Copy the code
  1. Are you familiar with JS native? Promise? Besides then and catch, how else can I get the return value of a Promise?
  2. Lazy loading? How did you use it in your project
I use lazy loading in projects mainly to load components on demand. Steps:1.import {lazy} from react
    2.const Test = lazy(() = >{import('./Test')})
    3.import {Suspense} from react
    4.Wrap up our registered routes in Suspense as follows <Suspense fallback={<h1>Loading process of the transition components, we can customize</h1>} >// The component specified by fallback cannot be imported by lazy loading, it must be imported normally.
        <Route to='/Test' component={Test} />
    </Suspense>
Copy the code
  1. Hook understand? What do you know? How do you implement lifecycle hooks in function components? How do I uninstall components in useEffect?
  2. How to implement modularization of CSS code in CRA (create-React-app)? Moudle???
  3. What customer validation did you pass on the project? What do I use to make network requests? What about the Axios interceptor?
  4. What UI framework? Know antD?
  5. Know anything about VUE?
  6. Do you know RN?
  7. How do you configure WebPack in CRA?
  8. Block-level scope? Tell me something about?
There are two types of scope in ES5, global scope and function scope. ES6 added block-level scopes. Block-level scope:1.In ES6, a block-level scope is defined with {}.2.uselet,constDeclared variables have the concept of a block,varDeclared variables have no concept of block-level fields.3.Declaration inside a blockletandconstVariable, cannot be accessed across blocksCopy the code
  1. If you want to get state immediately after setState, what should you do?
    // Use the second argument of setState ({state object}, callback) to pass in a function where the latest state can be retrieved. The following
    setState({count:1},() = >{
    console.log(this.state.count)})
Copy the code
  • Self-criticism: As you can see, small companies are more focused on people who can use React immediately, asking a lot of React questions. I failed to answer some basic knowledge about React due to my poor memory. Now we should review this part again.

4. Interview 4, a medical technology related company (8-15K)

  • Date: The afternoon of June 21, 2021
  • Result: Unknown, waiting for notification
  • Interview: only interview, no written test. The interviewer took my resume and looked at it. He always wanted to ask me about VUE, but I knew nothing about VUE. I thought to myself, I didn’t even have a VUE on my resume. Why did you call me here if YOU wanted VUE? After chatting for a while, the interviewer said they also had React related needs. But he doesn’t seem to know React at all… So the whole process asked me some JS, CSS basics
  1. What are the new attributes in H5? www.cnblogs.com/vicky1018/p…
  2. What are the new properties of ES6?
  3. What do you think of the virtual DOM?
  4. How to understand the MVVM framework? How is it different from MVC? www.jianshu.com/p/0ae3c0d83…
    1.MVVM (Model -- View -- Viewmodel) is a software architecture pattern.2.In short, MVVM is an improved version of MVC. Let's start with MVC: in MVC, M is simply the data model retrieved from the network, V is our view interface, and C is our ViewController. The ViewController is responsible for scheduling between the View and Model. As the business becomes more and more complex, the view interaction becomes more and more complex, resulting in the Controller becoming more and more bloated. Again, MVVM: So to solve this problem, MVVM comes on the scene. He puts both the View and Contrller in the View layer (taking some logic out of the Controller), and the Model layer is still the data Model returned by the server. The ViewModel acts as a UI adapter, meaning that each UI element in the View should find its corresponding property in the ViewModel. In addition, any UI-related logic removed from the Controller is placed in the ViewModel, thus relieving the Controller of its burden. Here is the MVVM schematic:Copy the code

View layer: View display. UIView and UIViewController, the View layer can hold the ViewModel. ViewModel layer: View adapter. Exposure attributes correspond to the View element's display content or element state. In general, ViewModel attributes are recommended to be readOnly. We'll explain why in practice. Also, the ViewModel layer can hold the Model. Model layer: Data Model and persistent abstract Model. The data model is well understood and is pulled back from the serverJSONThe data. The persistent abstract schema is in the Model layer because it was not described in detail when MVVM was born. As a rule of thumb, we usually package database and document operations into Models and provide external operation interfaces. (Some companies separate data access operations into a single layer, called the DataAdapter layer, so there are many variations of MVVM in the industry, but it is essentially MVVM). Binder: The soul of MVVM. Unfortunately, MVVM does not have a place in the English word MVVM. Its main function is to do two-way data binding between View and ViewModel. If MVVM does not have Binder, it is not very different from MVC.Copy the code
  1. What happens when you enter a URL to a page display?
  2. How to implement inheritance in JS?
    1.In the ES6:classInheritance mode, usedextendsThe keyword. Used in constructorssuper() calls the parent constructor. 2.ES5In:a. The constructor inherits inCHILDMethod callPARENT.call(this) is equivalent to givingCHILDInstance sets a number of private properties or methods. Attribute: Inherits only private attributes or methods from the parent class, regardless of its prototype chain.b. Stereotype chain inheritance lets properties and methods in the parent class be on the stereotype of the subclass instance.CHILD.prototype = newPARENT(); CHILD.prototype.constructor = CHILD; Features:1.Inheritance is done by putting the parent class's prototype on the prototype chain of the subclass instance, and calling these methods is done based on the __proto__ prototype chain lookup mechanism.2.!!!!!!!!! Subclasses can override methods on the parent class (causing other instances of the parent class to be affected) c. Parasitic composite inheritance: CALL inheritance + is similar to stereotype chain inheritance1.CHILD of the PARENT. Call (this);
       2.CHILD.prototype = Object.create(Parent.prototype);// Create an empty object with its __proto__ pointing to the parent's prototype
       3.PARENT.prototype.constructor = CHILD; Features: Private and public parent classes are private and public property methods for subclass instances, respectively (recommended)Copy the code
  1. Px, REM, EM,vw/vh, percentage difference?
I don't usually use VW/VH very much, so LET me write that down. Vw and VH are Viewport units, which on the desktop is the Viewport area of the browser. Mobile means Layout in Viewport Viewport1.Vw :1vw equals the width of the viewport1%
    2.Vh :1vh equals the height of the viewport1%
    3.Vmin: equal to the smaller of vw and vh4.Vmax: equal to vw and the larger one in vh, REM /em, both of which are units of relative length.rem: Is determined by the font size of the HTML element, relative to the root layoutemFont size can inherit from the parent element, as opposed to its own elementCopy the code

  1. Div to simulate textArea?

    Add div property contenteditable = true;

5. Interview 5, an educational tool APP company (8-12K)

  • Date: Afternoon of June 24, 2021
  • Result: Unknown, waiting for notification
  • Interview:

1. Null and undefined

Nguyen event:nullsaid"No object.", that there should be no value.undefinedsaid"Missing value", is that there should be a value here, but it is not defined yet.Copy the code

2. Describe the process of the new keyword

Blog.csdn.net/Kreme/artic…

    1.Create an empty object object,let obj = new ObjectCreate object new object, is to create a stack obj, this obj actually refers to the corresponding address in the heap.2.Set the prototype chain - set the implicit prototype of the new object obj, that is, the _proto_ property pointing to the display prototype object of the constructor Person, obj.proto = Person.prototype3.To change the Person constructorthisBind to the new object obj and execute the constructor Person using either call() or apply()let result = Person.call(obj)
    4.Save the address of the object initialized in step 3 to the new object, and determine the return type of the constructor Person. Because if the constructor returnsthisOr basic data types (number, number, string, string,BooleanBoolean,null.undefined), the new instance object is returned. If the constructor returns a reference type, the reference type is returnedCopy the code

6. Interview 6, an E-commerce company (12-18K)

  • Date: The afternoon of June 25, 2021
  • Result: Pass one side, wait two
  • Interview:

One side

1. Closure concept? How do I form a closure? What about memory leaks caused by closures?

Concept: A combination of a function bound with references to its surrounding states. It allows a function to access its outer function scope from within. Formed: Formed by closures3A. Function nesting b. Internal function referencing local variable of external function c. Outside of both functions, there are variables that refer to internal functions advantages: Can prolong the storage time of local variables of external functions Disadvantages: Prone to memory leaks Handling memory leaks: Where appropriate, set the function returned by our closure tonull. So the natural memory is freed up.PS: What actions can cause memory leaks? A. Unexpected global variables, such as forgetting to add variables when defining them in a functionvar. That's about as long as it takeswindowA new variable b.setTimeout was added to thesetIntervalForget to clear c. Variables in closures are always referencedCopy the code

2. What design patterns do you know? Singleton pattern? Factory model? The way

3. How to determine that two objects are identical?

4. What about deep copy? 5. Describe how you optimized the render process that is not required in React.

6. How about the React lifecycle?

7. How to speed up page loading? (Performance optimization, mentioned earlier)

Second interview

Time: 2021/6/29 PM

Result: Pass

Department manager interview, asked about the project on the resume, about 30 minutes, after the end of direct call HR. Then I will go back and wait for the notification. I will be informed that the offer will be sent around 5pm.

7. Interview 7, a middleware company (with its own development mall? (10-15K)

  • Date: The morning of June 28, 2021
  • Results: should be through one side, oral notification will call follow-up communication
  • Written test: vertical center, box model, program execution, two algorithm questions
  • Interview: 1. Value transfer between components? Have you ever used context? 2. Other than split(), do you have any other ways to split strings? 3. What are the similarities and differences between arrow functions and ordinary functions?
    
Copy the code

4.ES6 map, set?

Copy the code

I can’t remember the other questions. I didn’t ask them in depth. The interviewer knew a colleague at my last company, and after a short conversation, no further questions were asked. Then he called his leader to come over and asked about the project according to his resume. Then he told me he was going to a meeting and that he would call me when he was free for a follow-up conversation.

  • Self-perception: The interviewer told me that the branch in Chengdu was newly established last year, and the headquarters was in Beijing. However, the company was not large, and the technical department should have dozens of people. Chengdu currently has 10. Wait and see what happens next

8. Interview 8, a software company for Sinopec/CNPC (7-12K)

  • Date: June 30, 2021 morning

  • Result: pass, call me the next day, salary 9K, provident fund is relatively low, bilateral plus altogether 400.

  • Written test: CSS with two questions. An algorithm problem, and a program interpretation problem.

  • Interview: A little sister interviewer, about three years older than me, doesn’t feel like a technical genius.

    1. Events bubbling up? Understand? Tell me the

    2. What DOM events do you know?

    3. Asked ComponentDidMount.(She said the wrong word and I corrected her.)

    4. Asked about the project on my resume.

– Self-perception: Because it is a traditional industry, I don’t want to go there, and the company gives me the impression that the boss is a middle-aged man who is greasy.

9. Interview # 9, a Company doing Online education (10-18K)

  • Date: The afternoon of June 30, 2021
  • Result: Failed
  • Interview: Two rounds of interviews, overall difficulty, personal feeling is the most difficult among these interviews.
    The first interviewer

1. Write his Mac code to me (since I haven’t used Mac before, I don’t know how to switch case, embarrassing…)

The first algorithm: array flattening// I implemented two types: 1.flat() 2.toString()Second algorithm: implement array deduplication// I implement two ways: 1. Use set; 2. Store in an object, if there are duplicate, do not save
    // The interviewer asked me to recurse again: not complete.
Copy the code

2. How many states does a process have? (Operating system)

3. How is HRM of Webpack implemented?

No answer. He told me: first listen to our code file, if there is any change, recompile the code, and then use WebSocket to actively push the compiled content to our browser... (Probably)Copy the code

4. What is a Hash table?

Second interviewer

1. What is the difference between instanceOf and Typeof? (In depth)

This question is not our standard answer. They also asked about the coupling between them, which is very in-depth. It's worth taking a closer lookCopy the code

2. Suppose we enter something in the input box and the request is sent, but it also receives a response from the server (assuming 10s, the result is returned). We immediately make a second request within this time, and its result is immediately returned and displayed in our content. But 10 years later, the first request, the result came back, and then overwrote the result of the second request. Please propose a plan to solve this problem.

Hear this problem ---- meng force tree meng force fruit, meng force tree below you and I... And then I thought about it20Seconds: This can be used to stabilize the request. After the first request is made, set a setTimeOut(), and cancel () if the request is made within the time period. Then the interviewer says, yes, but there's something wrong with this plan. You can't set the interval correctly. And then he frantically suggested I keep thinking, but I can't remember either. Seeing that I couldn't remember, he said he could assign a number to each request, for example1.2.3.. It then brings the request to the server every time it makes a request. When the server returns, it returns to the client. And then compare if1<2, don't1.And then he says there's something wrong with that, and he makes me think again... I continued to be confused, and then he said the third option, and I didn't want to listen, so I didn't rememberCopy the code

3. This time, give me a Thinkpad for deep copy by hand?

Since I've seen it before, no3I wrote it down in a minute.Copy the code

The end of the interview: He went to the first interviewer and figured out that he would not want me.

– Self-criticism: There is no solution to the actual problem

10. Interview 10, a company doing the background of medical drug website (8-15K)

  • Time: The morning of June 31, 2021
  • Result: Pass
  • Interview:

1.PureComponent? What is shallow comparison?

2. What is the packaging process of Webpack?

3. The closure? What problems can closures solve?

– Self-perception: Told me I passed the interview the next day, 11K basic salary plus quarterly project award. I turned it down because the company only had about 10 developers and it was also a traditional industry.

11. The eleventh interview, a company that makes home decoration APP. (15 to 25 k)

  • Date: The afternoon of July 1, 2021
  • Results: I passed the first interview (I failed to answer many questions, and the interviewer also gave me a second interview).
  • Phone interview: really hate phone interview, can’t hear the questions clearly, I repeated several questions twice, I was embarrassed (like ear problem).

1. Merge algorithm?

2. Quicksort?

– Self-perception: It was quite difficult. I thought I could not pass the first interview, so I called me the next day to tell me that I had passed the first interview and prepared for the second on-site interview. But I don’t plan to go, I have accepted the offer.

Results:

Get the first6The offer of the interview, not to mention the specific salary, there is a range above, also reached my expectation.7month6At work,Copy the code

Interview summary and feelings

I've been too tired recently. Fill it up later.2021/7/3 晚23:35
Copy the code