preface

First, I would like to introduce my personal information: I have two years of undergraduate experience in front-end development. Due to policy reasons, the company downsized and I resigned from the previous company. After taking some time off, I started applying for jobs. From August 22 to September 22, the interview lasted for a month, and 8 positions were finally passed the interview.

Judging from interviews this month, most interviewers will ask questions based on your resume. I have React, Vue, Typescript, and applets on my resume, so interviewers will ask about them all. In addition, I didn’t include Webpack in my resume, so the interviewer didn’t ask much about Webpack.

Surface by the classification

From my interview notes, I can divide the questions into these types:

  • JavaScript
  • CSS
  • General framework of
  • Vue
  • React
  • Webpack
  • Typescript
  • Browser & Web
  • Small program
  • Look at the code and say the result
  • Hand rip code & algorithm
  • Open questions

Here are all the questions I met during the interview for your reference. These questions will get you 70 or 80 percent of the time, and you’ll have no problem landing an interview.

JavaScript

  • The difference between a Map and a Set. The difference between a Map and an Object

  • What is the function of filter, every and flat

  • Let me tell you a little bit about Promise

  • What is the difference between “All” and “race” in a Promise

  • The difference between an arrow function and a normal function

  • What is the difference between let, var and const? What if you want an object property defined by const not to be modified as well?

  • The difference between heap and stack

  • The principle of closures

  • Implementation principle of Instanceof

  • The implementation principle of new

  • What are the data types? How do I determine if a data is an array

  • How does JQuery implement chain calls

CSS

  • CSS and JS two ways to achieve the div right 1000px animation

  • Opacity, display, opacity

  • Truncate the CSS in a single line

  • Flex layout

  • Flex: 1.

  • Transition, transform, translate

  • Said the landing

  • The parent element has variable width and height, and the scale is always 4:3

  • The CSS is vertically centered

  • The difference between pseudo-elements and pseudo-classes

  • Several properties and meanings of position

  • Talk about the box model

  • Responsive layout scheme

General framework of

  • The difference between Hash and history in router

  • Vue vs. React

  • How do VUE and React choose their technologies

  • CSS module principle

  • What about the virtual DOM? Why use the virtual DOM?

    • Follow-up: How does virtual DOM merge patch

  • Key functions in MAP and V-for

  • React Diff algorithm and Vue Diff algorithm

  • How components communicate

Vue

  • The difference between computed and Watch

  • Can Watch listen on properties of computed

  • The responsive principle of VUE

  • Vue life cycle

  • – Mounted returns the DOM directly

  • NextTick principle

  • Why can’t we use multiple headers in vue templates?

  • Why did VUEX design both mutation and Action? How about just one?

  • What is the difference between VUe2 and VUe3 in terms of data binding?

  • Vue mounts and unmounts the parent component lifecycle hook execution sequence

  • Optimization of VUE (equivalent to how to write readable, maintainable, and high-performance VUE code)

  • The principle of keep-alive, what’s the problem with using it? How to solve

React

  • UseEffect Specifies the function and execution time of the return function

  • SetState is synchronous or asynchronous

  • Realization principle of Fiber

  • Which two native apis are used for fiber scheduling (requestAnimationFrame and requestIdleCallback??)?

  • How are react composite events implemented

  • Points to be aware of when using Redux

  • What happens if Redux does not return new data

  • How does Redux distribute data? The connect principles?

  • What scene triggers rerendering

  • SetState returns the same reference, will render execute

  • How to use useEffect? When will useEffect return be executed? What is the principle of useEffect?

  • What is the difference between useMemo and useCallback, and how do they work?

  • How do useEffect, useMemo, and useCallback do dependency collection

  • What are the advantages and disadvantages of React Hooks

  • How does context work? How do I do dependency collection?

  • React lifecycle

  • PureComponent vs. Component

  • If the key is not set in the map loop, how does it change from four nodes A, B, C and D to three nodes B, C and D

  • How are React DOM bound events different from native events

  • Implementation principle of Hooks

Webpack

  • Why is WebPack slow to pack? Why is Vite faster than Webpack? What can I do if I want to speed up Webpack?

    • Juejin. Cn/post / 684490…

  • Talk about the webpack compilation and packaging process

  • Let’s talk about tree-shaking. Can tree-shaking be used for both CommonJS and ESM

  • The difference between Plugin and laoder in Webpack, their execution timing, and common plugins and loaders

  • What does CSS-Loader do? You can’t use CSS-loader

Typescript

  • What are Typescript’s advantages over JavaScript

  • const func = (a, b) => a + b; Writing Typescript requires that both a and B arguments be of the same type, either number or string

  • Implement ReturnType

  • Implement DeepReadonly

  • Generate a new type based on an existing type: discard the width attribute in the type

    interface A {
  content: string;
  width: number;
  height: number;
}
Copy the code

Browser & Web

  • Introduce EventLoop

  • Why should there be both macro and micro task queues in EventLoop? How about designing one? When executing a piece of code, how does the program distinguish between macro tasks and micro tasks?

  • Memory leaks

    • A memory leak scenario in a project
    • Why does setTimeout cause memory leaks? How do I prevent setTimeout memory leaks? Why does clear timer not have memory leak?

  • Introduce HTTP caching

    • Follow-up: Which fields are used for strong caching? Which fields are used for negotiation cache?
    • Follow-up: What are the property values of cache-Control, Expires, etag and other fields?
    • Follow-up: In what part of the request are these fields stored?
    • Follow-up: What’s the difference between last-modify and Expires fields?
    • Follow-up: Can last-modify and Expires coexist?
    • Follow-up: How do you design HTTP caching if you don’t want a resource to use caching?
    • Follow-up: The difference between no-cache and no-store in cache-control

  • Introduce macro and micro tasks

    • Juejin. Cn/post / 688078…
    • Follow-up: Which are macro tasks? What are microtasks?
    • Follow-up: What is the difference between macro and micro tasks? Why design both macro and micro task queues? How about using a task queue? Why is that?
    • Follow-up: What you just said is that microtasks and macro tasks are identified based on the API. How does a complete application browser distinguish macro tasks from microtasks?

  • Priority of microtasks

  • How to understand that a script tag is a macro task

  • Differences between HTTP1.1 and HTTP2

  • Onload versus DOMContentLoaded

  • requestAnimationFrame

  • The process by which a browser loads a page

  • Why is the script tag at the bottom

  • The differences between defer and Async, and their loading and execution timing

  • DOM event model. Usage scenarios for event capture and event bubbling

  • The process from entering url to page presentation

  • How to design cache of CSS, JS and other files

  • 204, 304, 404, 504

  • Describe the same origin policy, cross domain, and its solution

    • Describe the implementation of Jsonp

  • XSS and CSRF concepts and defense modes

  • SessionSorage localStorage cookie The same system open two pages, two pages of sessionStorage shared?

  • What’s the difference between HTTP and HTTPS? Why is HTTPS relatively secure? How does HTTPS Encryption work?

  • TCP three handshake and four wave steps

Small program

  • Talk about the three-tier architecture of applets

  • What are the advantages and disadvantages of splitting the logic and rendering layers

  • Differences between applets and regular H5 frameworks (such as Taro and RN)

  • Applets on Android and iOS differences

  • Why do you use Taro? How does Taro achieve cross-end?

  • How does Taro work with React and Vue

  • Difference between Taro3 and Taro2

  • Taro’s optimization plan

  • Small program volume compression scheme

Look at the code and say the result

  • eventLoop

    setTimeout(function() {
	console.log(1);
}, 0);
new Promise(function executor(resolve) {
  	console.log(2);
  	for (var i = 0; i < 10000; i++) {
    		resolve();
  	}
  	console.log(3);
}).then(function() {
  	console.log(4);
});
console.log(5);
Copy the code

  • Closure. Say the result, then rewrite it to print one number every 1s using Promise and async, respectively

    function print(n){
    for(var i = 0; i <n; i++){setTimeout(console.log, 1000, i);
    }
}
print(10);
Copy the code

  • scope

    var a = 20;


function bar() {
  console.log(a);
}


function foo(fn) {
  var a = 10;
  fn();
}


foo(bar);
Copy the code

  • scope

    function bar() {
  var a = 20;
  return function() {
    console.log(a); }}var foo = bar();
var a = 10;
foo();  / / 20
Copy the code

  • scope

    var a = 20;


function bar() {
  console.log(a)
  var a = 10;
  console.log(n)
}
bar()
Copy the code

  • EventLoop

    const promise = new Promise((resolve, reject) = > {
  console.log(1);
  resolve(5);
  console.log(2);
}).then((res) = > {
  console.log(res);
})


promise.then(() = > {
  console.log(3);
})


console.log(4)


setTimeout(() = > {
  console.log(6)})Copy the code

  • EventLoop

    async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}


async function async2() {
  console.log('async2 start');
}


console.log('script start');


setTimeout(function() {
  console.log('setTimeout');
}, 0);


async1();


new Promise(function(resolve) {
  console.log('promise1');
  resolve();
}).then(function() {
  console.log('promise2');
}).then(function() {
  console.log('promise3');
});


console.log('script end');
Copy the code

  • Prototype chain

    function foo() {}const bar = new foo()

console.log(bar.__proto__)
console.log(bar.__proto__.__proto__)
console.log(bar.__proto__.__proto__.__proto__)
console.log(bar.__proto__.__proto__.__proto__.__proto__)
console.log(foo.prototype)
console.log(foo.prototype.prototype)
console.log(foo.prototype.prototype.prototype)
Copy the code

Hand rip code & algorithm

  • Handwritten fast row
  • Handwritten deep copy
  • Handwriting throttling and anti – shake
  • Handwriting limits the number of concurrent requests
  • Handwriting bracket matching
  • Handwritten red envelope algorithm (pay attention to balanced allocation and floating point calculation accuracy)
  • Array to heavy
  • Put odd numbers first and even numbers after. The time complexity is O(n). Space complexity O(1) (can’t use splice)
  • Array to tree structure
  • Parse out all parts of the URL
  • Implement a compare function to compare whether two objects are the same
  • Spiral matrix
  • Addition of large Numbers
  • Find the most common English words
  • Id =list. The 10000 LI nodes under the UL node are in reverse order. Consider performance.)
  • Implement a function that evaluates “1+12-31+100-93”
  • Check whether the list has rings
  • Handwritten useReducer
  • Handwritten useDidMount
  • Handwriting useDidUpdate, analog componentDidUpdate
  • Handwritten usePrevious
  • Climb the stairs
  • Deletes a node in a one-way linked list
  • Currie,
  • Dash to uppercase
  • A one thousand – bit integral
  • Use ES5 to implement es6 let keyword

Open questions

  • Realization of Antd grid layout

  • Hijack all a tags. When clicking, no jump will occur, but a prompt box will pop up indicating that a certain url will be jumped. Click “confirm” to jump, and click “cancel” to skip

  • Two promises, implemented in serial and parallel form, are printed only if both promises return results, success is printed, otherwise FAIL is printed

  • What are the optimizations for long lists? How to design a virtual list

  • How are burial sites intercepted and reported

  • How to implement an unburied data report

  • If hash routing is used, how can the page automatically scroll to the last anchor point after refreshing?

  • What performance optimization work has been done

  • Achieve a multi-level menu, menu hierarchy is uncertain

  • How do I monitor and troubleshoot memory leaks

  • The simulation implements the Sleep function in Java

  • Implement the splice method of an array

  • This section describes how to switch from page A to page B and transfer the operations performed on page B to page A

  • How does Sentry implement error monitoring

  • Is it possible to draw a GIF to a Canvas? If possible, tell me how you can do it.

  • If you were asked to build a project, what combination of technical solutions would you use?

  • How to do technology selection?

  • Handwriting implements lazy loading of an image

    1. Load the image to the specified height

    2. Consider rearranging and redrawing

    3. Consider performance

    4. Load the thumbnail first, then the full image

    5. Pay attention to the fault tolerance of image loading

  • Write a function that passes in a promise with the number n, n(s), which returns no promise, reject

  • Understand the SSR?

  • Let me tell you something about deep copy

  • Envisage front-end development direction

  • How do you design a framework like Elementui that can be distributed as a single package or as a multi-package

  • If you could design a single test framework, how would you design it?

  • How to realize lazy loading of modules? How does the import syntax work

  • What design patterns have you used? What are their use scenarios and application cases? What benefits do you see from using design patterns?

  • When I switch from page A to page B and then return to page A, how do I keep page A in the same state as the previous one

  • Know anything about Vue3 and act18

  • The difference between Nginx and Node middleware proxies

  • What problems does Node middleware mainly solve

  • Tell me about the most rewarding project you have worked on. Describe the functions, goals, and problems the system solves.

  • What do you think of the abundance of any in Typescript? What are your thoughts and actions in the face of such a scenario?

conclusion

Before I start sending out my resume, I do two weeks of interview preparation, so what do I prepare for?

The first is to prepare the resume and self-introduction. Make a list of all the projects you’ve worked on and find the ones where you gained the most or where there were technical difficulties and put them on your resume. It’s very important not to include skills you don’t know or are not familiar with just to make yourself look good! This is not a good idea. The interviewer will often ask questions based on skills and projects that you have covered in your resume. If you are asked a question that you don’t know and you can’t express it well, you may be at a disadvantage. At the same time, it is best to make an abstract summary of your project, such as who the project users are, how the project helps them, and what the project responsibilities are.

The second step is traversal. Need large quantities to see the face of the net, the more near the time of the face of the more can be used for reference. Pay more attention to the technology written in the resume and used in the project, pay more attention to the knowledge of native JS, technical framework, build packaging and performance optimization direction, and for CSS and HTML these interviewers can ask the scope is relatively small, all possible CSS topics are actually encountered, but also recorded in the article.

The third step is to make an outline. According to the interviews on the Internet, I collected the questions that interviewers might ask and recorded them in a unified document. Then I classified them according to the labels and concerns of the questions, and the final classification result was almost the same as the questions encountered in the actual interview.

The fourth step is to fight one by one. For the knowledge points sorted out, I suggest that every answer should be written down with a pen or edited by the computer. In many cases, knowing has nothing to do with being able to express it well. Not only should you know what it is, but ideally you should be able to express what you know in clear language when the interviewer asks you questions.

In addition to the above four points, the other thing to pay attention to is the algorithm. It is very difficult to train the algorithm in a short period of time. More importantly, it requires daily exercise and the cultivation of flexible thinking consciousness, so as to analyze the algorithm ideas that need to be used in the shortest time. Of course, if it is just for the interview, it is not so complicated, the front-end interview may involve a lot of algorithm questions, you only need to be able to do these common questions on the line, and do not even need to draw conclusions.

In addition to preparing, one more thing must be done: review and summarize. For the questions we encountered in the interview, we must timely recall and record, especially for the questions we did not answer, timely check the gaps, find an answer that can make the interviewer satisfied and record, this memory will often be more profound.

How to choose Offer

After three weeks of interviews, I found some companies that satisfied me in all aspects, so I decided to stop sending resumes and finish all the interviews in the process in the remaining week.

During this period, MY feelings were mixed, because more than one offered me exciting salaries, and I needed to choose the company most worthy of my joining from these offers. Salary may be part of the story, but it’s not the whole story.

This problem has been bothering me for a few days. I can’t eat or sleep well. Until I saw an article about how to choose Offer, it relieved my anxiety and enabled me to focus on which company is more suitable for me. The article links: www.jianliben.com/article/det…

After reading the article, I extracted three key points from the article:

  • Main reference indicators: industry, enterprise, position, hourly wage

  • As an ordinary person whose main purpose is to make money, I recommend that you find a job that you don’t hate, even if you can’t find a job that perfectly matches your interests.

  • I have met many children who blindly choose offer based on salary when they just graduated. When the pace of work is too fast and the work pressure is too high, they will fall into self-doubt and self-denial, and then interrogate themselves with such soul: Do I live to make money?

I also hope this article can help you sort out your ideas better and find suitable companies and positions smoothly.