Before the interview

First of all, the answer to the question is not the only one, most of them only provide the topic, the answer will slowly fill up! None of the answers were particularly complete. The interview process was quite long, intermittent from the beginning of the year, without detailed planning, and I don’t remember how I answered some answers at that time.

There were many companies interviewed at the beginning of the year, such as Meituan, Toutiao, Ali, Kuaishou, Didi, Shopee, and several unknown small companies. From the experience of various predecessors, it is to take a small company to learn something new, to summarize their knowledge through a small interview together. But in fact, what I have encountered is that small companies do not ask too much about the framework principles and foundations (there may be companies that pay attention to them, but I have not met them), and basically focus on the project experience they have done, so there is no new technical improvement in these interviews (after all, every interview is learning, in terms of interview skills, At least you can make your own projects more exciting later…) .

For companies interview, I can only say that still can be difficult, first communication and fast worker interview, the original are more nervous, a few questions answered not on the point, the interviewer with a cap, basically didn’t look at me, and occasionally I glances, a pair of have no interest in me from the start, received a very big blow, great affection to quickly at the time, Specially asked for a day off to prepare for the interview, did not think of bleak end 😭.

Other interviews, the interviewer is very nice, although some passed some failed, at least the experience is good, and also learned a lot of things. Because the interview questions are relatively similar, will ask for your resume, basically about 20 minutes will talk about the project, 20 minutes to discuss technical principles and foundations, and finally time to write a few questions, algorithm or procedure questions are related to the interviewer’s preference, at least I think there is no particularly difficult questions.

At the same time, because the interview questions are similar, there is no special distinction between the questions from which company, hope students to imagine…

Here are the interview questions I tried to remember, as well as the ones I didn’t take, but which are likely to take, in the hope of helping those who are thinking of changing jobs recently!

Surface after the part

Fyi, FYI, FYI!!

As I have almost no React related experience, the most popular React question I ask is how do you feel different from VUE?

Ah… In this regard, the resume section is really critical. Actually, I did, but I don’t know, it’s not on my resume, so I don’t know, don’t ask…

The following interview part is divided into eight aspects: (🌟 in the following topic represents the frequency of interview.)

  • JavaScript based
  • Css and optimization
  • Vue or React framework
  • Front-end packaging and other engineering
  • Browser and common security questions
  • Cross-platform technology
  • Network related
  • A small amount of algorithm

There are no HTML-related things, on the one hand, there are few related topics, and there are not too difficult problems, which can be solved in the common situation of normal development.

Nodejs, Serverless, GraphQL and so on are not included in my interview questions, but are likely to be included in your questions. You can make up for the questions by yourself!

Native JS code

  1. JavaScript to upload the image compression?

A: Read the File object uploaded by the user, read and write it to canvas, compress it using Canvas API, and then convert it into File (Blob) object after compression, and upload it to the remote picture server. Sometimes, however, we need to compress a Base64 string into a Base64 string and pass it to a remote database or turn it into a File (Blob) object.

The idea is File + Canvas drawImage

You can see zhang Xinxu’s article HTML5 file API and Canvas to achieve image front-end JS compression and upload

  1. How about asynchrony in JavaScript? 🌟

Answer: setTimeout, MutationObserver, postMessage, Promise, Async, await, Generator

From MutationObserver, postMessage is involved in vue’s $nextTick

From the generator will talk about co.js implementation, the code is not long, the meaning is easy to understand, but let me write really did not write, I suggest brothers have a good look!

From Promises and setTimeout to event loops

  1. Browser and NodeJS event loop? 🌟

A: Execution stack, promise is microTask, setTimeout is task

Many of the stage, can see from here the complete model is introduced: html.spec.whatwg.org/multipage/w…

SetTimeout is not special, it is also a task. In addition, renderUi stage is performed after each execution of task and a large number of microtasks (not necessarily all in one loop). Although renderUi is not performed for each event loop, each interval is 16ms at 60Hz.

The NodeJS event loop is slightly different… More process. NextTick etc

  1. Handwritten promises or static methods of promises

A: Write promises by hand. Try to include Promise states, static methods, and. Then,. Catch. Of course, A more detailed restoration can be found in the Promise A+ specification.

Static methods refer to promise.allSettled promise.all promise.race, etc.

  1. Handwriting throttling and anti – shake 🌟

Answer: Cliche, the principle is very simple, mainly depends on whether the function can be encapsulated, and whether the encapsulation is advanced, consider whether the situation is comprehensive.

  1. Handwritten bind

Answer: Same as above.

  1. Use the service worker

A: Caching, progressive application, interception processing

You may also talk about Web workers, shared worders, etc. If you are confident or your job has an in-depth understanding of these aspects, you can show them off. Can reflect their strengths…

  1. Strict mode

Arguments are not allowed to change, arguments are not allowed to change, assigns values to read-only objects throw exceptions, variables need to be declared first, call, apply first arguments will not be converted…

If you can get some answers.

  1. Prototype chains and inheritance

Answer: very often ask, but casually look for a praise number of high explanation, read again understand, remember often test point can.

  1. Regular expression matching rules?

Answer: this really has no way, can only be the regular expression rules for systematic learning, of course, often test may be mailbox, URL matching.

CSS and optimization

  1. Flex layout 🌟

A: Teacher Ruan Yifeng’s Flex article is clear and easy to understand.

Common apis and two-column, three-column layouts, etc., are a little bit more difficult for me. The previous project was highly compatible and had little use for Flex layout. Use unused suggestions and you’ll have a common layout in a few hours.

  1. Optimized long list scrolling

Did not answer, said a few JS scheme did not answer the point.

Transition optimizes animation and layering

You can use transform to enforce layering. You can use content-visibility to unrender invisible elements and set the value to auto. Third, for some animation effects, you can use will-change to accelerate the GPU on the parent element and delete it after use.

  1. Responsive layout 🌟

A: May involve CSS functions, REM/EM distinctions, media queries…

  1. What is BFC?

A: Block level formatting context, I always use layout!

Q: What forms a BFC? What does it do?

A:

  • Body root element
  • Float element: float a value other than None
  • Absolute position elements: Position (Absolute, fixed)
  • Display inline-block, table-cells, flex
  • Overflow values other than visible (hidden, auto, Scroll)

Function, in order to layout 😂 (do not answer ha, specific can see the following article)

Recommend a BFC article

Vue or React framework

  1. Vue responsive principle and bidirectional binding implementation code? 🌟

  2. Vue3 response principle, what’s the difference?

  3. Vue diff algorithm ideas, how to compare nodes?

  4. Compile implementation of Vue? 🌟

  5. How does VUE customize instructions? How to write the API?

  6. What are vue3’s performance optimizations for VUe2 (compile and Runtime)?

  7. What’s different about React? Do you know hooks?

A: (although I can’t, I can say something else, like vue3 also has hooks, its use and some advantages?)

  1. Ever used TypeScript? What are the advantages and why? For specific scenarios, use TypeScript for type definition.

A: THERE are many VUE projects, but few TS projects. I have also used them. When I write the front-end monitoring SDK, I conduct type check on the interface. (There are many other advantages to strong typing, but I personally find it extremely difficult to write, and of course some people like it very much.)

  1. How does vue keep-alive work? 🌟

Front-end packaging and other engineering

  1. Webpack and rollup use?

  2. The tree – shaking principle? 🌟

  3. How to write webpack loader and plugin?

  4. Are you familiar with Vite, the difference from Webpack?

  5. What contributions have you made to vite and how have you used it in actual projects?

  • Vite – electron – quick Git address

  • Pr history of the code being merged

  1. How are errors caught uniformly? How are vUE asynchronous errors caught?
  • Write your own JS error to catch SDK Git address

Incidentally ask a git small 🌟🌟

Browser and common security questions

  1. The browser page loading process, the more detailed the better 🌟

  2. Browser cache 🌟

  3. Cross-domain problems and handling 🌟

  4. V8 Fast array slow array, Hidden Class or some other module?

  5. What do XSS and CSRC mean? How to prevent? 🌟

Answer: the United States group of two articles put out, the interviewer directly ask the next question!

  • To prevent XSS

  • CSRF protection

Cross-platform technology

  1. How to realize the function of small tray when using electron?

  2. Flutter widget stateFullWidget stateLessWidget difference?

  3. How does JS Bridge work? 🌟

  4. The rendering engine for Flutter?

Network related

  1. DNS related, what is the DNS server, how to query DNS? 🌟

  2. Oauth2.0 and JWT single sign-on

  3. The HTTP/HTTPS to distinguish? Why is HTTPS more secure? Why isn’t HTTPS very secure?

  4. What is the difference between http1.x and HTTP2.0? Are http2.0 advantages, and in some cases slower than 1.x?

  5. How does HTTPS Encryption work?

  6. Http2.0 compression header, and parallel request principle?

  7. TCP connection mode?

A small amount of algorithm

  • Palindrome string, center diffusion method

  • Bubbling, quick drain 🌟

  • Binary search 🌟

  • Binary tree 🌟

  • Dynamic planning (did not meet this test, may be too difficult, the interviewer saw me simple half a day to win, this directly not considered, big guy can pay attention to)

Project questions in the interview

Maybe it’s to design a technology selection for a system, or how to design a component library, design a system. For me, the question is to see if I am an owner, but also to see what technology 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 my resume has almost nothing to do with nodeJS, but interviewers always want to ask…

Can only say that have done their own blog server…

Server code Git address

But very rudimentary… Can only say that the development of 😂

conclusion

  • For the framework principle can only say a general, really into a specific part of the code and implementation can only write a framework, many details are not noticed.
  • The algorithms are still weak, but luckily the interviewers are all amiable and good at finding beauty in people hahaha… (had better brush a brush, otherwise affect your salary and success rate 😯)
  • Before sending the resume, it is best to find people in the company through various channels to understand the business in advance, which can also help the decision of excellent offer in the later stage.
  • We should have the courage to say no. We are not satisfied with some offers or business. We should believe in ourselves and do not surrender because there is no better offer at present.

The first job-hopping was very uncomfortable, and I had the same feeling when I started looking for a job before graduation. I really had to believe in myself and proceed in an orderly way. If there is anything I can do to help, please feel free to contact me, such as resume revision, internal promotion, at least, you can talk about your troubles, people will have trouble ~

I wish you all a bright future and a satisfactory offer.

Hope my article can be helpful to you, feel free to comment if you have any questions, welcome criticism, see will reply ha ~

At last! Pull an inside push!

The company Shopee

15 days annual leave, 14 days sick leave, free snacks, drinks and fruits, orange Day every month, plenty of afternoon tea, activities, games, no overtime!!

Welcome to click on the image link to scan code delivery ~