Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the front-end face classics, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

Before the interview

First of all, yes, the answers to the questions are not unique, most of them only provide questions, ha, and then the answers will be filled slowly! The answers at that time were not very complete. The interview process is relatively long. Since the beginning of the year, the interview has been intermittent, without detailed planning, and I don't remember how to answer some of the answers at that time.

There were still many companies interviewed at the beginning of the year, including Meituan, Toutiao, Ali, Kuaishou, Didi, Shopee, etc., as well as several unknown small companies. From the experience of all kinds of seniors, it is first to review the past and learn something new from a small company, ha, and sum up your knowledge through a small interview. But in fact, what I have encountered is that small companies do not ask too much about the principles and basics of the framework (there may be companies that pay attention to, but I have not encountered), and basically focus on the project experience I have done. So there is no new technical improvement in these interviews (after all, each interview is about learning, in terms of interview skills, at least you can talk about your project later.).

For the interview of a big factory, I can only say that it is very difficult. First of all, when I communicated with Kuaishou in the interview, the first few questions were also quite nervous. The answer was not on the point. The interviewer wore a cap, basically did not look at me, and occasionally looked at me. From the very beginning, I was not interested in me. I received a great blow. I was very fond of Kuaishou at that time. I took a day off to prepare for the interview. I didn't expect it to end badly.

Other interviews, the interviewer is very nice, although some passed and some failed, at least the experience is good, but also learned a lot of things. Because the interview questions are relatively similar, they will ask questions about your resume. Basically, they will talk about the project in about 20 minutes, discuss the technical principles and basics in 20 minutes, and write a few questions by hand at the last time. The algorithm or program questions are related to the interviewer's preferences, at least I don't feel particularly embarrassed.

At the same time, because the interview questions are similar, there is no special distinction between which company the questions come from.

The following are the interview questions that I try my best to remember, as well as the questions that are likely to be tested although I did not take the exam. I hope I can help the students who want to change jobs recently!

Face meridian part

For reference only, for reference only!

Since I have almost no React-related experience, the most frequently asked question about React is what do you think is the difference between vue and vue?

Ah. From this point of view, the resume is really critical. Actually, I've done it, but I'm not proficient, and it's not on my resume, so I won't, don't ask.

The following part of the interview is divided into eight aspects by me: (the following topic: star2: represents the frequency of the interview)

JavaScript Foundation

Css and optimization

Related to vue or react framework

Front-end packaging and other engineering

Browsers and common security issues

Cross-platform technology

Network related

A few algorithms

There is no Html-related things, on the one hand, there are really few related problems, in addition, there will not be too difficult problems, usually the common situation of development can be solved basically.

And because it is from my resume to ask questions, so some very common nodejs, serverless, GraphQL and so on are not in my interview questions, but are likely to appear in your questions, related questions can make up lessons on their own!

Native JS code

1. JavaScript to achieve the compression of uploaded images?

Answer: read the File object uploaded by the user, read and write it to the canvas, compress it with the API of Canvas, and then convert it to File (Blob) object after compression, and upload it to the remote image server. However, sometimes we also need to compress a base64 string and then change it into a base64 string and pass it to the remote database or File (Blob) object.

The idea is drawImage of File + Canvas.

You can take a look at Zhang Xinxu's article HTML5 file API plus canvas to achieve front-end image JS compression and upload

two。 Talk about the asynchronism of JavaScript?

Answer: setTimeout, MutationObserver, postMessage, Promise, async, await, generator

$nextTick of vue will be involved from MutationObserver and postMessage.

From generator chat to co.js implementation, the code is not long and the meaning is easy to understand, but I really haven't written it yet. I suggest you take a good look at it!

From Promise and setTimeout to the event loop that follows

3. Browser and nodejs event loop?

Answer: execute stack, promise is microTask,setTimeout, it is task

For many of these stages, you can see the complete model introduction here: html.spec.whatwg.org/multipage/w …

One thing to say: first of all, setTimeout is not special, it is also a task. In addition, after each execution of task and a large number of microtask (not necessarily after the full execution of a loop), the renderUi phase will be carried out, although not every event loop will be renderUi, but each interval, that is, the legendary 60hz frame 16ms.

The nodejs event loop is slightly different. More process.nextTick and so on.

4. Static methods for handwritten Promise or Promise

Answer: handwritten Promise try to write out the status of Promise, static methods, and .then, .catch. Of course, a more detailed restore can be seen in the Promise A + specification.

Static methods refer to Promise.allSettled Promise.all Promise.race and so on.

5. Handwriting throttling and anti-shaking

A: it's a clich é. The principle is very simple. It mainly depends on whether the function will be encapsulated, whether the encapsulation is advanced or not, and whether the situation is comprehensive.

6. Handwritten bind function

A: ditto.

7. Service worker usage

A: caching, progressive application, intercept processing

When talking about worker, you may also talk about web worker, shared worder and so on. If you are confident or your work has an in-depth understanding of this aspect, you can show it. Can show one's own advantage.

8. Strict mode

Answer: this's undefined, forbids with,arguments to be changed, assigns an exception to a read-only object, the variable needs to be declared first, and the first parameter of call,apply will not be converted.

As long as you can answer some.

9. Prototype chain and inheritance

Answer: very often ask, but casually find a high praise to explain, read it once, remember to often take the test point can.

10. Regular expression matching rules?

A: there is really no way to do this. We can only systematically learn the rules of regular expressions. Of course, mailboxes may be the ones that are often tested, and url matches.

Css and optimization

1. Flex layout: star2:

A: teacher Ruan Yifeng's flex article is clear and easy to understand.

The commonly used api and two-column, three-column layouts, and so on, are a little difficult for me. Previous projects are highly compatible and have hardly used flex layouts. If you use unused advice, the layout will be common in a few hours.

two。 Optimize the scrolling effect of long list

Did not answer, said a few js's plan did not answer correctly.

The interviewer replied: transition optimizes animation and layered rendering

As analyzed later, you can use transform to force layering, and the second can use content-visibility to not render invisible elements, just set the value to auto. The third is that for some animation effects, you can use will-change to accelerate gpu on the parent element, and delete it after use.

3. Responsive layout: star2:

A: it may involve css function, rem/em distinction, media query.

4. What is BFC?

Answer: block-level formatting context, I always use layout!

Q: what forms BFC? What is its function?

A:

Body root element

Floating element: float value other than none

Absolute positioning elements: position (absolute, fixed)

Display is inline-block, table-cells, flex

Overflow values other than visible (hidden, auto, scroll)

Function, for layout: 喜悦: (please don't answer that, please see the following article for details)

Recommend a BFC article

Related to vue or react framework

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Vue responsive principle and bi-directional binding implementation code?: star2:

What's the difference in the principle of vue3 response?

Vue's diff algorithm, how to compare nodes?

Compile implementation of vue? : star2:

How does vue customize directives? How to write api specifically?

How does vue3 optimize the performance of vue2 (in terms of compile and runtime)?

What's the difference between react? Do you know hooks?

A: (although I can't, but I can say something else, for example, vue3 also has hooks, its use and some advantages? )

Have you ever used TypeScript? What are the advantages and why do you use them? For a specific scenario, use TypeScript for type definition.

Answer: there are many vue projects, but ts uses less, and it has also been used. When writing the front-end monitoring sdk, check the type of the interface. It is like a document, each interface has a definition, and then read it later to instantly understand the meaning. (there are still many benefits of strong typing, but personally, I find it extremely troublesome to write, and of course some people like it very much. )

Vue's keep-alive usage scenario, and how it works? : star2:

Front-end packaging and other engineering

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Webpack and rollup use?

Tree-shaking principle? : star2:

How do you write webpack loader and plugin?

Are you familiar with vite, different from webpack?

Contribution to vite and its use in practical projects?

Vite-electron-quick Git address

The pr history of the code by merge

How to catch errors uniformly? How to catch asynchronous errors in vue?

Self-written JS error captures SDK Git address

Browsers and common security issues

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

For the browser page loading process, the more detailed the better: star2:

Browser cache: star2:

Cross-domain problems and handling: star2:

V8 fast array slow array, hidden class or other modules?

What do xss and csrc mean? How to prevent it? : star2:

A: Meituan's two articles are presented, and the interviewer asks the next question directly!

Xss prevention

Csrf prevention

Cross-platform technology

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

How to realize the function of small pallet when using electron?

What is the widget stateFullWidget stateLessWidget difference of flutter?

How does js Bridge work? : star2:

Flutter's rendering engine?

Network related

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Related to dns, what is the dns server and how to query dns? : star2:

Oauth3.0 and jwt single sign-on, etc.

The difference between http/https? Why is https safer? Why is https not very safe?

The difference between http1.x and http2.0? The advantages of http2.0, and in some cases will be slower than 1.x?

Https encryption principle?

Http2.0 compression header and the principle of parallel request?

How to connect to tcp?

A small amount of algorithm palindrome string, central diffusion method

Bubble, quick row: star2:

Binary search: star2:

Binary tree: star2:

Dynamic planning (did not encounter this test, may be too difficult, the interviewer saw me take a simple half-day to win, do not consider this directly, boss can pay attention to it)

Project questions in the interview

It is probably for you to design the technical selection of a system, or how to design a component library and design a system. Personal guess for the scum of me, this question is to see if there is no awareness of owner, and can also see which technologies I am more interested in?

In addition to the system, there are also some scenarios, such as how to use authentication to control the login time design to maintain a seven-day login state.

Because there is almost nothing on my resume about the nodejs server, but the interviewer always wants to ask.

I can only say that I have been the server of my own blog.

Server code Git address

But it's very crude. We can only say that it has been developed: 喜悦:

Summary of the principle of the framework can only be said roughly, really deep into a certain part of the specific code and implementation can only write a framework, many details do not pay attention to.

The algorithm is still very weak, but the interviewer is very affable and good at finding people. (you'd better brush it, otherwise it will affect your salary and success rate: hushed:)

Before sending your resume, it's best to find people inside the company through various channels to learn about the business in advance and help you make good offer decisions in the later stage.

Have the courage to say no, for some offer treatment is not satisfied, do not like the business, you should believe in yourself, do not surrender because there is no better offer, a job is a short year or N years, in order to live a happy life to choose carefully!

The first job-hopping is very uneasy, and I feel the same way when I started looking for a job when I didn't graduate. I really have to believe in myself and proceed methodically. If there is anything I can do to help, please feel free to contact me, such as resume revision, tweeting, at the very least, you can talk about the troubles, people will have distress.

After reading the above, do you have any further understanding of the front-end classics? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.