May intermediate front-end interview report

At the front end, the interview time is 5.7-5.19, a total of two weeks. Xi ‘an, salary range 10-15

For personal development reasons, I returned to my hometown Shaanxi province from Hangzhou. I interviewed 7 or 8 companies and ended up with 2 offers. Take notes on the interview. It’s not the questions that matter, it’s how to categorize the dizzying questions into your body of knowledge.

Company A

Company profile: start-up company, bank project, 20+ employees, need to travel. Technical stack: Front-end VUE + back-end Spring problems:

• Url input to the page display process
• What does VUEX include
• Vue project optimization
• Computed is different from Watch
• Vue-router Hook introduction
• Vue-router lazy loading implementation

Thinking: there are few problems, the browser principle +vue family bucket, the reason for tension between computed and watch is not answered

Company C (offer)

Question:

• Which es6 syntax has been used
• Basic data types
• Let the var difference
• What is a closure
• Whether sibling variables and child variables of the closure can be obtained
• What is this
• What are the scopes
• What is block-level scope
• How to use other JS variables in current JS
• How do I add new methods to an array? (Examine prototype, inheritance)
• Double class three class difference
• How do I determine if two arrays are equal? Do I use double or triple? (it is a pit, double and third class can not work)
• Undefined and null
• Is 0.1+0.2 equal to 0.3 in the third-order case
• What is the difference between Staic and Assets
• How does the jQuery property selector get the third input node

Vue

• What component libraries have been used
• How is MVVM implemented
• Diff algorithm understanding
• V – if v – show the difference
• Single page multiple page difference
• Difference between computed and watch
• What is the difference between location.href and vue-router
• The life cycle
• What does the mount phase do
• How to deal with multiple environments in a project
• What does v-Once do
• How to implement lazy route loading
• What is the principle of lazy image loading

Other:

• How familiar are you with Python and Node on your resume?
• Can you introduce the project of the official account
• Take a look at your applet project
• Are there any other projects we can show?
• How does the front end address cross-domain issues

Thinking: mainly focused on JS foundation and VUE, the problem is not difficult, can be said to be intermediate front-end problems.

Company E

1. MVC and MVVM are introduced separately
2. What is the two-way flow of MVC data?
3. Explain two-way data binding
4. Which of the three frameworks are bidirectional binding “Vue Angular”?
5. How does Angular implement bidirectional binding? Dirty Check
6. What’s the difference between React and Vue? “Vue has a lot of built-in instructions, template syntax, React is a component of everything”
7. If I’ve been writing vue, now I’m learning React, what’s the difficulty? “Es6 Syntax, JSX Template Syntax”
8. What happens to the Url input to the page display? “Navigation phase DNS resolution TCP connection TLS verification initiate request receive response Connection disconnection. Parsing phase HTML JS CSS is parsed separately, HTML is parsed as DOM object, split tag text, JS is processed by v8 engine, CSS is parsed as CSSOM layer tree, rasterized”
9. How is DNS resolved? How did you get the address
10. Does DNS resolution take time? How to optimize “time consuming because to see if there is a cache”? (Failed to answer, was told to look at the DNS pre-resolution)
11. How does v8 parse a piece of JS code? “First into AST tree, then into machine code, finally into bytecode, and execute bytecode. The browser has optimized real-time compilation technology for duplicate JS code, and if it finds a code that is frequently used, it executes machine code directly without converting bytecode.”
12. The first time the client initiates the request, the second time the server responds, and the third time the client receives the reply and knows that the server is connected and tells the server to request data.
13. Know the cycle of events
14. Where does the queue for events come from?
15. Continue the event loop. What you said about macro tasks and micro tasks
16. Which are defined as macro tasks and which are defined as microtasks
17. Are promises microtasks? “No promise. Then is a microtask.”
18. HTTP request: get, post, Option, and restful PUT, delete
19. Get the post difference
20. Talk about restful specifications
21. How is cross-domain resolved? Jsonp iframe proxy nginx reverse proxy Websocket, backend configuration response header In local development, it is useful for chorme plugins to turn off CSRF detection and resolve cross-domain problems. What is the principle of proxy cross domain? (I don’t know this, but after being told devSever is configured in Webpack, Node starts the server and the browser requests the server for local service.)
22. Have you ever done a small program? Have you ever seen applets cross domains? “No” means that cross-domain only occurs in the browser, so the principle of proxy to solve cross-domain is to start the Node server and forward services from other ports to the local, so that cross-domain will not be avoided.
23. Has Webpack ever been useful? What configurations have been made? What are the optimization measures for devServer in different environment configurations? Tree shaking, Routing lazy loading, code segmentation
24. What performance optimization measures have been taken? “Resource file loading, code compression Sprite, CDN resource server”
25. Since webpack has been used, the image files are packed into Base64. Do you think they are bigger or smaller? “Smaller” in fact, the size of the picture is 30% larger after packaging. Because when you have a lot of images, SVG and so on have a lot of ICONS, does every SRC request require a network request, does the network request take up resources? So loading Base64 reduces the number of requests
26. Has Nodejs been in touch? “Resume in that public number project is done by Node” native node? Koa is a Node framework based on Express. It is very simple in nature, outsources other applications as middleware, and centers on the Onion ring model. Koa is express based. “HMM, yeah.”
27. Talk about the Onion ring model “similar to currization, where the inner middleware returns values as parameters for the outer middleware”
28. How about the Currization of “parameters separated are the same as those in parentheses”? “It can be implemented by intercepting its GET and apply methods.”
29. Have you ever written your own middleware? “No, I’m using someone else’s” Node service online running, how to check console result “error unified capture, global processing, put in log, view log” what is the log library? “Koa – logger”
30. How does the Node service start in the background? “Supervisor Configuration, then Start the process”
31. Webpack taking too long to pack? How to solve the “second problem of code splitting, the framework similar to VUE which is almost unchanged into the CDN cache, other files modular splitting, component library according to the need to load, the first problem of packaging time too long although often encountered, but also can not be solved. However, I am aware of a recent move for VUE3 to replace WebPack with a new framework to address the issue of development environment packaging for too long.”
32. How to compress and transfer large file resources in network request? Do you know the GZip format? “Yeah, gzip compression was set in nginx configuration.”
33. Can you tell us more about the oss large file upload of your resume
34. What is your role in the team?
35. What do you mean by norms? Or where do you see the specifications? “Vue official document has been written clearly, recommended optimization strategy and specification”

Think about it: The director asks about

• JS based
• Principles of browsers
• Network protocol
• Principle of the framework
• Webpack performance optimization

In addition, when answering question 1, you tend to use the term B to support/describe it, which leads to question 2, such as KOA -> Onion ring model -> Corrification. When you are familiar with related terms, it seems that the hole you dug will become the direction of the interviewer’s questions.

Company H(Final entry)

Question:

1. Read the resume, not computer major, training? “Yes.” Then you have a lot of catching up to do.
2. Do you know HTML and CSS? How do you learn with all those tags and attributes?

• Did you take notes? “Yes, I usually take notes.”
• May I have a look? “Turned on my phone and handed it to the interviewer.”
• Um, are these all articles from your collection? “Well, they’re all written by themselves, read books or attend events.”

3. What about JavaScript? Like this. Why don’t you write a Yang Hui triangle? (The interviewer hands me the pen and paper and then reads my blog. I write pseudocode, I stop my pen, and I say, “This part doesn’t work. I’ll tell you what I think.”

• Well, you can print one line and create an array. If there are n lines, then there are n arrays. “… makes a lot of sense. “Each element of the Yang Hui triangle is actually permutations and combinations. You just print each value with permutations and combinations.

4. Deep copy, okay? “Yeah, I know.” Let me write it down. There are a couple of things you need to do, you need to deal with the different types of objects (re, time, etc.), and you need to deal with the depth of the reference loop, like it loops through, makes it 10 levels recursively, and then jumps out.

• When I heard to write, I really wanted to cry without tears, because WHEN I saw this problem, I thought who would let me write this. I finally wrote it out and I handed it in, and I didn’t write it out for the loop call

5. Last problem, iterate through nested objects, each object has key, value, children (array), print out the key, value of each layer. (This question is not described, I think it is easy, or I think it is easy, actually do not understand the meaning of the question.)
6. What are the methods used by the React component to pass values
7. React Provide and consume because of what?
8. During the React upgrade, some components are unavailable and the screen is blank. How do I locate the fault

Reflection: After the introduction of the company, the interview was over and the interviewer was reading my blog almost the whole time, which is one of the reasons I chose this company.

Mind mapping

From the above several companies interview situation, we can see that 10-15 salary range interview depth is still some, the algorithm is not very high requirements. Browser principle and JS, ES accounted for a larger proportion, frame next, so to draw an interview should have knowledge system, and then constantly adjust, supplement.

conclusion

• Great oaks from little acorns grow. Take a solid step along the way and produce some reusable lessons
• Adjust in the process of the interview, and the interviewer to learn about the current employment situation.
• Recognize and acknowledge your weaknesses. If you don’t have an answer to an interview question, remember it. Don’t fall into the same trap twice
• Usual accumulation is very important, reading, video, training, column
• When I came back, I found that the Internet is not the only way to go. For example, not everyone has such strong motivation to learn, so how can they support themselves? Investment/entrepreneurship/part-time work, then I can do good network, at the same time spread influence, there is a lot to learn.
• At present, Xi ‘an (second-tier Internet) companies have passion, willing to learn, progress of technology or a lot of, so no matter you are now in Beijing, Shanghai, Guangzhou and Shenzhen or second-tier cities, we must correct the mentality, study hard, don’t let the waves beat dead.