“Time does not stop, creation, this article is participating2021 Year-end Summary Essay Contest”

Gaode Didi Meituan netease Kuaishou Tencent Jinshan 360 Baidu Zhihu and other large factory interview experience

A year and a half ago, I wrote aSwastika front end face, finally went to equip the bytes, because of the reason of some business adjustment, I run again, didn’t write a second interview are hung behind or I don’t want to face again, the attached department is hanged or face again after I turned down the other departments, according to a start time sorting, there are a lot of excellent company my face but forget recording, Momenta, Perfect World, Palm Reading, etc. It has been updated to 13,000 words,

Each family’s self-introduction and the reason for leaving part I omit ~

Writing in the front

  • The interview lasted for a whole four weeks with a very high density, averaging four homes a day. I was physically and mentally exhausted. It is not recommended to arrange such intensive interviews unless time is tight
  • Although the eight-part essay is a lot of useless, but the back also have to back
  • Algorithms and data structures is not a short period of time to practice, but the front there won’t be too hard to the algorithm of the topic, is the basic dynamic programming, backtracking, array traversal, linked list, binary tree, if their algorithm is less, looking for a job a month or two in advance the power button on the more classic topic brush a brush, met at the very least not did not train of thought, All kinds of sorting principle or to see, it is easy to be asked, and once the answer can not come up very minus points
  • Whether you write Vue or React (if you write NG instead of me), it’s easy to be asked the difference between the two. It’s recommended to talk from multiple perspectives, such as framework features, ecology, development experience, community review, performance, source code, etc
  • Have window project had better prepare a few more, had better be different types, such as business, partial of the backend, component library, engineering and emerging technologies, according to the content you’re good at least for two or three, some interviewers want to see what have you done have difficulty, a recruit fresh at that time is not working
  • The different role of the interviewer asks questions, to answer in different angles, such as ask you have same processed compatibility issues, on the front of the interviewer, you can answer met incompatible scene and solve the details, meet the leader of the interview can be more from the perspective of how to efficient validation for compatibility problems this answer, pay attention to the scene
  • Finally the amount of time the interviewer will ask questions, personally, I usually ask business content, technology stack, team size or future business and technical development direction, to the back of the interviewer I would ask the interviewer in the role of the team, according to his role combining his expression of the above questions can determine the preliminary team is on the edge of the, or core, Or is he just a pie painter
  • Overall, the best interview experience is Microsoft, humble, polite, I feel that Microsoft interviewers have a complete set of interview skills, such as
    • “Next, I will ask you some business-related questions. Please answer them without violating the company’s current principles. If you can’t answer my questions, you can tell me directly.”
    • “You can do this with any compiler you’re familiar with.”
    • “Please feel free to interrupt me if you have any questions about what I’m going to describe.”
    • For the questions I answer and the projects I describe, the interviewer will usually give a positive response and move on to further questions if there are any
    • In one round, I misunderstood the interviewer’s question and implemented something else. The interviewer’s first reaction was that he didn’t make it clear and said that the code I understood in this direction was implemented well
    • Later in the English interview, my English was poor, and the interviewer said a long paragraph of English, which I almost did not understand. The interviewer asked me whether I spoke too fast

Taptap

One side

  1. What treatment has been done to the skin, have you dealt with the skin that may change the size
  2. What practices i18N does within the team
  3. What problems webpack encountered in migrating Vite
  4. What practices CI/CD does
  5. How does JWT implement kicking and the difference between session and JWT authentication
  6. TCP three-way handshake http1.0, 1.1, 2 are different
  7. HTTPS. Why is HTTPS protected against man-in-the-middle attacks
  8. Bubble sort

Second interview

  1. I’m going to give you an array that’s already in ascending order. I’m going to give you a number, and I’m going to find out how many times that number appears in the array
  2. Shuffling algorithm, how do you verify that this shuffling algorithm can shuffle enough cards
  3. Node Stream is trying to fetch a large amount of logs. Due to memory limitation, it can only fetch part of the logs at a time. Now it wants to fetch 10,000 logs randomly from all logs
  4. Describe what the project did as a result of your initiative

jingdong

One side

  1. Let’s introduce promise and why it’s called promise
  2. How esModule differs from CommonJS and what are its main advantages
  3. How does Vite compile your code? How does vite handle commonJS packages
  4. Do you know how to convert to the combined API of ESM VuE3? What are its advantages
  5. This section describes HTTPS CORS
  6. Do you know about the micro front end
  7. Why do you use VUE on mobile h5 and React on PC management?
  8. Do you know how to manipulate git objects? Git reset/rebase
  9. You have danced frequently before, and each section has not been more than two years. Jingdong has a two-five principle. What do you think of this problem

Second interview

  1. Your small program is to use taro, do you know the principle of taro
  2. What is the architecture of your CMS system
  3. Did you know that WebPack now supports ESM?
  4. Is your component library company-wide or in-house, developed from scratch or based on other open source component libraries?
  5. Is vue3 useful? Why didn’t the team use vuE3?
  6. What syntax do you use for React? Do you know the principle of Fiber?
  7. How many people are on your current team and what do you want to do in the future?

The degree of grain full

  1. How to understand vUE one-way data flow
  2. What are the communication methods between Vue components? Have you used EventBus? What is the idea of EventBus
  3. Let me write a custom V-Modal
  4. $attrs $listener
  5. What is the Vue life cycle and what is it for? What updated conditions will trigger the Vue instance when beforeCreate is updated? What API will be called when the component is destroyed
  6. When will component destruction be triggered, and will custom and native events be unloaded during destruction
  7. Have you ever written a custom directive? What hooks does a custom directive have
  8. What is the difference between traditional front-end development and framework development
  9. There are two defects in Vue2’s data response formula. Do you know which two defects they are, why they exist and how to solve them
  10. How does Vue implement array listening, why Vue does not hijack array subscript modification
  11. Symbol, iterators, which are iterable
  12. Get the intersection of two arrays using Set
  13. Realize the Promise. All
  14. What’s the difference between animation and Transition
  15. Write an animation, a box, that starts with a zoom of 0, 50%, 1,100 percent, 0, starts and ends slowly, lasts for 2 seconds, delays for 2 seconds, and then stays at the end

This is one of my more outrageous, ask a variety of API, no actual nutrition, to be honest, pretty boring, the interview experience is also mediocre

BOSS hired straight

  1. Talk about the most complicated project
  2. What have you done in accessibility projects
  3. Do the night mode has not considered the user set a timer to switch the mobile phone night mode
  4. What are the kernels of Android and Apple webView that your H5 project relies on respectively
  5. What optimizations have been made on Lottie animations, and have you considered using CSS animations on low-end machines
  6. If you make an animation of the earth itself spinning, and there’s an airplane going around it, and the airplane’s propeller is going around itself, what are the points that need to be considered
  7. I did on CI/CD
  8. What problems have webpack encountered in migrating Vite? Why was Webpack slow before? Was there any optimization
  9. What the common tools within the business refine
  10. Do these projects that oneself play introduce once, basically be doing what
  11. What are you looking for this time

Qihoo 360 (Security Guard)

  1. Do you write more Vue or React?
  2. Career planning
  3. CSS implements a sector
  4. Ask the output, and why (I don’t remember the specific code, but this examination point, the following questions are also)
var a = { name: "Sam" };
var b = { name: "Tom" };
var o = {};
o[a] = 1;
o[b] = 2;
console.log(o[a]);
Copy the code
  1. Ask the output
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(() = > {
  console.log("setTimeout");
}, 0);
async1();
new Promise((resolve) = > {
  console.log("promise1");
  resolve();
}).then(() = > {
  console.log("promise2");
});
console.log("script end");
Copy the code
  1. Ask the output
const promise1 = Promise.resolve("First");
const promise2 = Promise.resolve("Second");
const promise3 = Promise.reject("Third");
const promise4 = Promise.resolve("Fourth");
const runPromises = async() = > {const res1 = await Promise.all([promise1, promise2]);
  const res2 = await Promise.all([promise3, promise4]);
  return [res1, res2];
};
runPromises()
  .then((res) = > console.log(res))
  .catch((err) = > console.log(err));
Copy the code
  1. What does Vue’s nextTick do? React composite events and native events
  2. What is the difference between Webpack and Vite, and what is the motivation for cutting Vite
  3. What was the previous development model, was one person responsible for a module or was it allocated according to requirements
  4. Know about the micro front end

HR invited me for a second interview on site. I said THAT I could not go to Beijing. HR said that they would help me coordinate the remote interview, but they never contacted me again

Momo

  1. What tools have you made before
  2. What are the mobile compatibility problems encountered
  3. How do I limit the number of concurrent Promise requests
  4. Implement this pipe
const fn = pipe(addOne, addTwo, addThree, addFour); // The four functions passed into pipe are already implemented
fn(1); // 1 + 1 + 2 + 3 + 4 = 11
Copy the code
  1. Did you know about Vue3, why you haven’t used Vue3 yet, did you know about Proxy, what’s the difference between it and defineProperty, what’s the difference in performance
  2. What should Vue do if it wants to reuse templates
  3. Did you make a skeleton screen? How did you do it
  4. Have you ever done lazy loading
  5. Do you have React Native experience
  6. MySQL optimization

Scott

One side

  1. What do you do if you implement a three-column layout that requires three columns of the same width to wrap multiple elements
  2. Rem or VW for mobile adaptation? What is the principle of separation? What plan do you use?
  3. What ES6 syntax is used and what features are commonly used
  4. Promise to talk in detail about what problems we can solve
  5. What will happen if P succeeds? If P fails and enters B, will the following C or D continue if B fails again
p.then(a, b).then(c).catch(d);
Copy the code
  1. What are the four attributes of this class? What is the difference between fn and f
class A {
  static a = 1;
  b = 2;
  fn() {}
  f = () = > {};
}
Copy the code
  1. Implement a node asynchronous function promisify
  2. What is the Vue life cycle
  3. What is the principle of keep-alive and how can you achieve similar effects without using it
  4. Difference between V-if and V-show

Second interview

  1. Tell me about your previous projects
  2. If you need to implement a full-text translation function, how do you deal with the tag part of rich text, and how do you backfill the data after translation
  3. Typescript implements a string type with left Spaces removed
type A = " Hello world! ";
type B = LeftTrim<A>; // 'Hello world! '
Copy the code
  1. If you need to implement a bullet-screen component, how do you design the props and state of the component, how do you implement it internally, and what can be optimized

On three sides

  1. Introduce a challenging project
  2. What improvements have you made to accessibility
  3. What have you done with i18N
  4. What kind of product do you make
const data1 = {"a.b.c": 1."a.b.d": 2}
const data2 = {"a.b.e": 3."a.b.f": 4}
// Merge the above two objects into a JSON, where. Needs to be processed into the corresponding hierarchy
Copy the code
  1. What is your understanding of Serverless
  2. What is the future direction of development
  3. What are your technical expectations

drops

One side

  1. Previously done SSR is what kind of server rendering, isomorphism
  2. Describe your responsibilities in your last job
  3. This paper introduces the single example model and its application in front end
  4. Introduce the prototype chain
  5. Introduce front-end inheritance
  6. HTTP, TCP, seven layer network architecture
  7. What is the maximum number of resources that chrome can load at one time, and what should I do if I want to load more resources at the same time
  8. How does http2 multiplexing work
  9. Implement a call method that changes the reference to this
  10. Find the NTH term of the Fibonacci sequence
  11. Have you heard about the cross end? Taro, Uniapp
  12. Do you have Devops experience
  13. Do Docker and K8S have relevant experience
  14. What do you know about JSON Web tokens and how they differ from other authentication methods
  15. Do you know network security, how CSRF defense, SameSite has several values

Second interview

  1. How have you grown at each stage of your previous job
  2. Some of the projects you’ve worked on that have been really exciting
  3. What would you like to do if you were in your previous department
  4. What are your views on TDD
  5. How does one set of mobile code adapt to multiple terminals

On the second day, we talked about the project in front of each other. Finally, we kept telling me the future development trend of the department for a long time. To tell the truth, I was a little sleepy and didn’t know why I hung up

The little red book

  1. Introduce a difficult project
  2. If the user wants to define a color to generate the corresponding skin, how to make the scheme
  3. What problems did Webpack have migrating Vite
  4. Vue vs. React
  5. The Diff algorithm for Vue and React differs
  6. Write a method to determine whether a string is valid XML
const str1 = "<html><div>123</div></html>"; // true
const str2 = "<div><div>123</div><div></div></div>"; // true
const str2 = "<html><div>123</html></div>"; // false
Copy the code
  1. To find a string in a matrix, you can move it up, down, left, and right, but cannot go back. Return true if the string is found
const str = "abcde";
const matrix = [
  ["0"."0"."0"."0"."0"."0"],
  ["0"."0"."a"."b"."0"."0"],
  ["0"."0"."0"."c"."d"."0"],
  ["0"."0"."0"."0"."e"."0"]];Copy the code
  1. A frog can jump 1, 2 or 3 steps at a time, but there are several ways to jump up to N steps

The front blowing force time is a little long, resulting in the back of the algorithm to do the problem time is not enough, hung up

Meituan (Wine Tour)

One side

  1. Difficult projects you’ve done in the past
  2. Browser caching mechanism
  3. HTTPS
  4. What is the principle of throttling and anti-shaking
  5. An introduction to event loops
  6. The output
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(() = > {
  console.log("setTimeout");
}, 0);
async1();
new Promise((resolve) = > {
  console.log("promise1");
  resolve();
}).then(() = > {
  console.log("promise2");
});
console.log("script end");
Copy the code
  1. Why is 0.1 + 0.2 not equal to 0.3? Why is there an error? How to solve it
  2. How does large number addition work
  3. Why does V-for have a key
  4. Why does Vue’s data have a function instead of an object
  5. Introduce the virtual DOM
  6. Diff algorithm
  7. What is the difference between WebPack and Vite, and what is the migration process like
  8. What do you think of front-end engineering

Second interview

  1. I was mainly responsible for the company’s business and technology before
  2. What is the technology selection and architecture
  3. Are there efficiency tools in the r&d process
  4. Which node frameworks do you use, how does memory monitoring work, and which node frameworks do you know about
  5. Vue and React have read some of the source code, what is the principle of the V-Model, what are the pros and cons of the virtual DOM
  6. What are typescript’s advantages over JavaScript
  7. Export and Module. exports
  8. How are Node memory leaks monitored
  9. What is the difference between fs.readFile and stream when node reads a file
  10. What are your strengths and weaknesses

A lot of node monitoring related to chat, to tell the truth, not how contact

zhihu

One side

  1. Introduce difficult projects
  2. What problems have you encountered with Vite
  3. Does Esbuild know about it
  4. When you break up big projects, do you have any problems that you didn’t have before
  5. How do you ensure downward compatibility within the group toolkit
  6. What is the difference between the following two ways of writing, what effect will occur, and if not, how can we get the same effect
export default class App extends React.Component {
  state = {
    cnt: 0
  };
  render() {
    return (
      <>
        <button
          onClick={()= > {
            this.setState({ cnt: this.state.cnt + 1 });
            setTimeout(() => {
              this.setState({ cnt: this.state.cnt + 1 });
            }, 1000);
          }}
        >
          add cnt
        </button>
        <div>cnt: {this.state.cnt}</div>
      </>); }}export default function App() {
  const [cnt, setCnt] = useState(0);
  return (
    <>
      <button
        onClick={()= > {
          setCnt(cnt + 1);
          setTimeout(() => {
            setCnt(cnt + 1);
          }, 1000);
        }}
      >
        add cnt
      </button>
      <div>cnt: {cnt}</div>
    </>
  );
}
Copy the code
  1. Ask the output
const p1 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    resolve(1);
    throw new Error(a); },2000);
});
const p2 = p1
  .then((val) = > {
    console.log(val);
    return val + 1;
  })
  .catch((err) = > {
    console.log(err);
    return err;
  });
Promise.all([p2, Promise.reject(3)])
  .then((val2) = > {
    console.log(val2);
  })
  .catch((err2) = > {
    console.log(err2);
  });
Copy the code
  1. Write a binary tree traversal, depth first and breadth first
  2. Infer: What does infer do to implement a Pick and a Omit

Second interview

  1. What are the essential differences between SSR and CSR, Nuxt and DIRECT rendering EJS
  2. What is the weight of Vue and React
  3. What problems will PureComponent introduce and when will it be needed
  4. Vue’s single-file development mode, this explains how vue-loader is implemented.
  5. What happens if the template language is changed.
  6. How script tags in.vue files are read by babel-loader since babel-loader can only convert js files.
  7. How is vue scoped implemented, how does the DOM hash correspond to the style hash, and how is it guaranteed that the hash generated is the same every time
  8. What is the difference between babel.config.js and.babelrc? When should it be used, and what happens when it is used together
  9. At what point is the render function invoked by Vue, and by whom is the render triggered by subsequent state changes
  10. The difference between Vue and React in data update, will Vue’s data hijacking bring additional problems? Is Vue3 optimized for these problems
  11. What does $set and $forceUpdate do
  12. How do Vue and React implement asynchronous DOM updates? Are there other ways to do Vue asynchronous updates? Besides MessageChannel, are there any other apis that are similar in use
  13. How does common code do extraction and determine if a resource should be extracted
  14. What else does Portal do besides drop components into the corresponding DOM
  15. How do you make requests? Axios is an isomorphic tool. How does it differentiate between Node and browser environments
  16. How does AXIos internally convert XHR’s callback to promise’s and handle request exceptions

The second interview asked more details, a lot of local details actually did not pay too much attention to, hung up

Tencent (Watch)

One side

  1. Implement the OB and Watch methods, hoping to execute them once when the method is passed to the watch function, and then fire the corresponding console each time a property on data is modified
  const data = ob({ count: 0.foo: 'test' });

  watch(() = > {
      console.log('watch-count', data.count);
  });
  watch(() = > {
      console.log('watch-foo', data.foo);
  });

  data.count += 1;
  console.log('showcount', data.count);
  delete data.count;
  data.foo = 'test2';
Copy the code
  1. Enter a string. If square brackets are encountered, repeat the string in square brackets n times. N is the number before the square brackets, or 1 if there is no number
const test1 = "a2[b]a2[b2[c]]";
// abbabccbcc
const test2 = "2[3[c]]a2a";
// cccccca2a
const test3 = "[abc][d]3[e2]4";
// abcde2e2e24
Copy the code

Second interview

  1. How does Vue2 differ from 3, how does it rely on collecting and distributing updates, and how does Vue ensure that parent component rerendering does not result in child rerendering
  2. How does webpack load and contract asynchronously
  3. Vite dependencies and prebuild Are all dependencies used merged together or are each individual packages installed with multiple versions of the same package?
  4. Node process management? What are the options for multiple processes? 4.1 How can worker suspension be detected? 4.2 What is IPC communication? 4.3 If a cluster is used to start multiple processes, is the child process multiple or one port? 4.4 Is a Worker a process? Does it have a separate PID? 5.5 How do I Communicate Data between Processes
  5. How are Node memory leaks monitored? How does it work? Is memory for monitoring processes or for monitoring dockers?
  6. What are the ways webpack can play Polyfill
  7. If http1.1 server needs to process the request in order, then why do the following images appear in a page first? Do you understand HTTP streaming
  8. What does front-end engineering do? What does git CI/CD do? Like Lint, security checks, cyclomatic complexity? Are lint’s rules customized by your business? Are component and automated tests done? Has the line on line been matched? How to test small traffic online?
  9. How does Taro build multiplatform compatibility? How does Taro compile the React code into a runtime, what does the runtime look like, and how does it execute in a NATIVE applet DSL
  10. How to do front-end monitoring alarm, what monitoring indicators are there, what are the alarm strategies, what indicators and dimensions are concerned about, how to monitor the white screen
  11. What optimizations have been made, how are animations cut, how are FPS monitors

This is really kind of… Difficult, a lot of completely is my knowledge blind area, especially node part and Taro part, hang convinced

jinshan

One side

  1. What are the main projects I have done
  2. What are the methods of Vue sibling component transmission
  3. Introduce Vuex
  4. Let me introduce the diff algorithm
  5. Websocket, what does it have to do with HTTP
  6. An introduction to HTTPS
  7. Use three positive words and three negative words about yourself
  8. Tell me about the last book you read
  9. Have you ever done something that has nothing to do with code but is a little bit more proficient
  10. What are your expectations for your next job

Second interview

  1. How you feel about your last company, how you grew up, what you don’t like
  2. What was the size of the previous team
  3. What was the business like before
  4. What are your expectations for your next job

Netease (Lingxi)

One side

  1. What are your expectations for your next job and what efforts have you made to plan it
  2. Introduce a difficult task
  3. Why did you migrate your project from SSR to CSR
  4. How to determine if next is called multiple times and an error is thrown
  5. Event loop What happens if new events are continuously generated during the Poll phase of a Node event loop
  6. How does Node handle json.parse for large strings
  7. Let’s talk about redraw and rearrange in the browser
  8. Introduce the composition layer of the browser
  9. What if a page needs to work on both PC and mobile, and what is the difference between REM and VW solutions
  10. Typescript defines how an object should be defined, if the key used to define the object must be a string
  11. What does Watcher cleanDeps do
  12. How does computed and Watch work
  13. What do I do if I have an object in data and I don’t want it to be deeply listened on
  14. Given any two-dimensional array, print all permutations and combinations. Such as[['A','B'], ['a','b'], ['1', '2']]And the output['Aa1','Aa2','Ab1','Ab2','Ba1','Ba2','Bb1','Bb2']
  15. Given any two-dimensional array, output all permutations and combinations of array elements. Such as[['A', 'B', 'C'],[ 'A1', 'B1', 'C1'],[ 'A2', 'B2']]And the output["AA1A2", "BA1A2", "CA1A2", "AB1A2", "BB1A2", "CB1A2", "AC1A2", "BC1A2", "CC1A2", "AA1B2", "BA1B2", "CA1B2", "AB1B2", "BB1B2", "CB1B2", "AC1B2", "BC1B2", "CC1B2"]

Second interview

  1. What does the Node service migration to light service do
  2. What framework do you use for RPC, the difference between GRPC and thrift, protobuf
  3. How much does Serverless know about it, what it is suited for, and what has been written in it
  4. How do you deal with compatibility issues such as inconsistent API versions provided by clients
  5. What are the problems with webpack migrating Vite? Has Snowpack learned about it and how it differs from Vite
  6. Are you familiar with React? What are the best practices of hooks
  7. What performance optimizations have been done
  8. What are the performance indicators of a page? How do you monitor them? How do you monitor the performance of Node services
  9. Implement an iterator for sequential traversal in a binary tree with the best time complexity, the worst, and the space complexity

On three sides

  1. Implement a function that passes in an array where each item represents the starting and ending positions of a line segment, calculates the total length covered by all line segments, and writes test cases
lineCoverage([
  [0.1],
  [2.3]]);/ / 2
lineCoverage([
  [0.2],
  [2.3],
  [3.4]]);/ / 4
lineCoverage([
  [0.2],
  [1.3],
  [2.4]]);/ / 4
lineCoverage([
  [0.5],
  [1.3],
  [2.4]]);/ / 5
lineCoverage([
  [0.6],
  [2.6],
  [6.7]]);/ / 7
Copy the code
  1. Calculate the force buckles within a matrix that all 1 cover the region (island problem)
// howManyDots(canvas:number[][]): number
// // Upper, lower, left, and right are regarded as the same
/ / [0, 0 and 3,
/ / (0, 0),
/ / [0, 0]]
/ / = > 1

/ / [,1,0,1 [1],
//  [0,0,1,0],
//  [0,1,1,0]]
/ / = > 3

/ / [,1,1,1 [1],
//  [0,0,0,1],
//  [1,0,0,1],
//  [1,1,1,1]]
/ / = > 1
Copy the code

Convenient bee

  1. How does Vue go from modifying properties to rendering to the page
  2. See the code
/\*\* - Goal: - Implement a simple observer mode (or publish-subscribe mode) \*/const shop = {
apple: 5.// Apples 5 yuan
potato: 2.// Potatoes are 2 yuan
tomato: 3.// Tomatoes 3 yuan
orange: 7.// Oranges 7 yuan
}

    /** * Now we have a convenience store instance object, the goal is to need to increase the price of goods monitoring, when the price of goods changes, trigger the corresponding event. * 1. Xiaoming pays attention to the change of apple price * 2. Xiaogang pays attention to the change of orange price * 3

    class Pubsub {
      constructor() {
      }

      list = {};

      // Add listener, listener, and listener methods,
      // prompts that you can use the remove method as the return value of the listening method
      listen = (key, listener, callback) = >{}// How to publish messages
      publish = (key, price) = > {
        /** How to define the publishing method? * * /}}// Specify a Pubsub instance object
    const pubsub = new Pubsub();

    const event1 = pubsub.listen('apple'.'Ming'.(listener, price) = > {
      console.log(`${listener}Watch apple's latest price is${price}Yuan `);
    })

    const event2 = pubsub.listen('apple'.'jack'.(listener, price) = > {
      console.log(`${listener}Watch apple's latest price is${price}Yuan `);
    })

    const event3 = pubsub.listen('orange'.'xiao gang'.(listener, price) = > {
      console.log(`${listener}The latest price of Orange${price}Yuan `);
    })

    const event4 = pubsub.listen('orange'.'jack'.(listener, price) = > {
      console.log(`${listener}The latest price of Orange${price}Yuan `);
    })

    /** * What logic should be added to enable us to listen for changes in property values in shop? * Tip: How is bidirectional binding implemented in VUE? * Vue2.0 or VUe3.0 implementations are available */

    /** We set an observer method to make the shop instance object observable **/
    const observable = () = >{};const newShop = observable(shop);

    newShop.apple = 6;
    /** Apple price change will trigger the event ** console.log will output: The latest price of apple is 6 yuan **/

    newShop.tomato = 10;
    /** No one cares about the price of tomatoes, no event will be triggered **/

    newShop.orange = 11;
    /** The latest price of orange is 11 yuan **/

    console.log(newShop);
    /** ** enter newShop **/

    console.log(newShop.apple);
    /** ** enter the new apple value of newShop **/
Copy the code
  1. If you need to achieve scan code login, single sign-on, what is the plan

Do business is not very interested in the follow-up did not continue to face

Kuaishou (Commercial)

  1. Why did you use SSR before, and why did you migrate from SSR to CSR
  2. How does an offline package work
  3. Implement shouldComponentUpdate in hooks. Implement shouldComponentUpdate in hooks. What is the difference between useCallback and useMemo
  4. Why do you choose VUE on mobile terminal and React on PC? Is there any difference between the two in performance
  5. What performance optimizations have been made
  6. What is the rationale behind vite, and are there any issues with migrating vite
  7. What do you know about Serverless, what’s the implementation behind it, and what have you done with it
  8. Reverse a linked list
  9. The complete permutation of a string

The questions are basically answered, the questions are written out, but I don’t know why I failed

Blue lake

One side

  1. The main technology stack
  2. How do you collaborate with the client
  3. Do you know the features of the new Vue version
  4. Are there any design patterns available at work
  5. What about typescript decorators? How does a class decorator handle this
  6. Have you ever used abstract classes
  7. For example, the difference between Map and object. If you need a dictionary, both of which are in the form of key: value, how should you choose the two
  8. What is the difference between Map and WeakMap
  9. Js garbage collection mechanism
  10. What is the time complexity of binary search, just a brief description of the process, how does O(logN) work out, what is the time complexity of TopK, what is the time complexity of quicksort
  11. What is the output of this? Who does this refer to
class A {
  constructor() {
    console.log(this.name); }}class B extends A {
  constructor() {
    super(a);this.name = "B"; }}const b = new B();
Copy the code
  1. Enter a binary tree and two nodes and print the last common ancestor of each node

Second interview

  1. If you were to implement a calculator, what would you think about

A more open question, say and write

On three sides

  1. Look at what you value more and what interests you about new opportunities
  2. The current salary
  3. What sort algorithms have you been exposed to, what’s the idea of merge sort, how many merges have you gone through when you merge an array
  4. What was the most challenging project
  5. Did you go through a painful phase
  6. Are you learning anything new lately
  7. Is there any engineer in your previous job that you admire or admire
  8. What is the difference between the front-end cache policy, Last-Modified and ETAG, and what are the applicable scenarios for each

baidu

One side

  1. Work through each project according to my resume
  2. Traversal a tree structure, output all leaf nodes
  3. Write the method that gets the parameters after the URL

It’s a simple round of interviews

Second interview

  1. What was the main business in your last company? What were you responsible for? What was more iterative
  2. How did you implement the skin change plan
  3. How is the internationalization scheme done
  4. What are the schemes for synchronizing between pages and their application scenarios
  5. How to solve the problem that different project keys overwrite other people’s keys
  6. How is the technology selection of the business considered
  7. Write on/emit/ Off (on/emit/off) 7.1 What should I do if I want to separate the successful and failed methods of the subscriber? 7.2 What should I do if I want to trace the failed methods to which the subscriber reported the error? 7.4 Now we want to add the dot reporting function to all subscribers, and provide the global switch. 7.5 If we need to add a dot to a single subscriber, how do we design
  8. What if I wanted to add some reporting functionality to all methods on an object

This round of interviews took about an hour and a half, and it was really just adding and adding to one feature, and it was really testing the robustness of the code when you think about it

On three sides

  1. Why do you consider doing the front end
  2. What is the core of being a product engineer or software engineer
  3. Introduce a representative project
  4. What business are you mainly responsible for? What is the proportion of C-end and B-end of work
  5. What opportunities have you seen so far? How do you think about your next job? What direction do you want to work in
  6. What is the overall development process
  7. What is the pace of work
  8. Personal strengths and weaknesses

Big xinjiang

One side

  1. What kind of mentality do you have for your next job? What kind of requirements do you have for your next job
  2. What kind of business are you interested in and what do you want to do in this business
  3. If you want a value in the DOM to be bidirectionally bound to a variable in js, how can you do this with native JS? React and Vue do this separately
  4. What is the difference between proxy and defineProperty, and what are their advantages and disadvantages
  5. What is the difference between a browser making a request and a Node making a request, and what default behavior does the browser do for making a request
  6. How to understand threads and processes
  7. Why is Vite much faster than WebPack, what is the difference between ESM and commonJS, why ESM loads faster, and how to understand ESM static
  8. What packaging optimization has been done
  9. What needs to be done in CI/CD to make the process better
  10. What are you studying recently

Second interview

  1. Tell me about your business
  2. Why refactor some projects
  3. How do you do component libraries, what is your role in them, and how do you deal with the call relationships between components
  4. Bangs how do you fit
  5. Have done the monitoring of the process from open to full display of small programs
  6. Explain your understanding of TDD
  7. Is it useful for agile development and how effective is it for code quality assurance
  8. What have you done to improve development efficiency
  9. What has been done in terms of performance optimization
  10. How to Study at ordinary times
  11. What are your considerations for this job change
  12. What kind of product would you most like to make, regardless of money

Meituan (buying medicine)

One side

  1. Output, reason, and explain the relationship between the call stack and the scope chain
let a = 3;
function func(a) {
  a = 10;
  console.log(a);
}
func();
console.log(a);
Copy the code
  1. Make a Promise. All
  2. An array becomes a nested object
["a"."b"."c"."d"] = > {a: {b: {c: {d: null}}}}
Copy the code
  1. Explain the loop of events
  2. Explain browser rendering: Redraw, rearrange, how to optimize?
  3. Vue vs. React

Second interview

  1. What’s your main business in your last company
  2. What is the focus of technology development on the B and C sides
  3. How is the technology selection considered
  4. What are the plans for the next step
  5. How do you create a technology product
  6. Please write a lottery program that has an array of staffIds for participating in the lottery. Rule 1: the same employee can not win the lottery repeatedly. Rule 2: each round to execute the lottery program, input is the round to draw the number of winners N, the winner will print out the number
  7. What are the advantages of migrating Webpack to Vite, what problems have you encountered, and how do you test it after migrating

On three sides

  1. What part of the business were you responsible for in your last job
  2. What is the back-end architecture
  3. How to understand SSR and how to apply it in the project
  4. What has the B side done? What is the architecture

Netease (Media)

One side

  1. What do browser request headers and response headers remember and what do they do
  2. Negotiation cache and strong cache
  3. What are response headers and cross-domain dependencies, and how have cross-domain dependencies been addressed before
  4. What is the difference between access-Control-allow-origin and a specified domain name
  5. Is it allowed to carry cookies across domains? What should I do if I want to carry cookies? If a.com is my domain name, I should send a request to B.com
  6. What are the differences between host, origin, and refer in the request header
  7. In what scenarios will an options request be made
  8. ! In what scenarios is important used, and how are CSS selector weights calculated
  9. Box model margin overlay, how to solve box collapse, how to create BFC
  10. Is there any way to return true for a==1&&a==2
  11. What is the difference between object.create (null) and creating a {} directly
  12. New what a function does
  13. An understanding of the event loop
  14. Vue and React source code read which parts, which is the most impressive
  15. This section describes the vue-Router mechanism
  16. The diff algorithm is a brief introduction
  17. What front-end engineering has done
  18. How can I gradually reduce typescript errors in projects
  19. Have you ever written a Webpack plug-in
  20. What is the principle of Babel conversion
  21. What performance optimization has been done
  22. How does offline storage work
  23. What design patterns have been used
  24. How to deal with all kinds of online exceptions and how to catch static resource loading failures
  25. How does Node interprocess communication work
  26. What is the implementation of the KOA middleware principle
  27. How do you define the security of a dependent package
  28. What performance optimizations node has done

Second interview

  1. What did you do in Git CI, and what was your motivation
  2. What barrio has done
  3. What is the ratio of front-end and back-end work in the business
  4. Have you upgraded to Vue3? What are the advantages of Vue
  5. Which does Vue or React think is more elegant
  6. Have you made technical solutions to improve team performance
  7. What was your greatest growth in your last company
  8. What is the annual OKR this year
  9. What are you looking forward to in your next job

On three sides

  1. Projects with highlights
  2. What is the scaffold used, have you made the scaffold yourself, what is the principle of Vite, how to distinguish the environment
  3. Vue3’s composite API
  4. Do typescript and Vue2 encounter compatibility issues
  5. Why migrate SSR to CSR
  6. What is the principle of offline package? Is there any offline package incremental update
  7. Do you know the bridge principle
  8. Do you have any knowledge of page exception monitoring
  9. React optimizations
  10. What performance optimizations have been done
  11. Write an EventBus containing emit/on/off
  12. Highlights from previous jobs
  13. Has the component library ever done that

Qihoo 360 (Qihoo Dance Company)

One side

  1. Do more 2B or 2C
  2. What is the difference between weird mode and standard mode
  3. How do I perform CSS screen adaptation
  4. Does the mobile end experience sliding penetration problems
  5. Have you encountered mobile browser compatibility issues
  6. Js data types are stored on the stack while reference data types are stored on the heap
  7. What are the common judgment methods of data types
  8. What is used in ES6
  9. What are the methods of Promise
  10. What is the state of a new Promise returned by the chained call to the Promise’s then
  11. What are the application scenarios of await and promise
  12. What is the difference between ESModule and CommonJS? Have you been exposed to other modularity solutions
  13. What the browser knows, what the kernel has, how many processes are opened when chrome opens a TAB, and which threads are opened
  14. What are the ways to load JS asynchronously
  15. Does loading CSS and JS block DOM rendering
  16. What’s the difference between strong cache and negotiated cache? Does the strong cache communicate with the server? If it doesn’t communicate, does it have a status code
  17. What are the properties of cookies
  18. What does Samesite do
  19. What is the difference between cookie and storage
  20. What versions of HTTP are available, what is bad about 1.1, what causes queue header blocking, and has 2.0 completely solved queue header blocking
  21. What’s the difference between get and Post
  22. What engineering has done
  23. Vue vs. React
  24. What is the difference between SSR and CSR? What are the applicable scenarios? What is isomorphism
  25. Have you ever written a Webpack plugin
  26. Is Babel configured, preset or plugin has the higher priority
  27. How does the project code specification work, and how do you avoid someone who skips the code specification locally
  28. Git commit limitations
  29. How is the conflict between EsLint and Prettier resolved
  30. What is the difference between CI and CD besides GITLab’S CI/CD
  31. Does Docker know anything about it? Does docker actually use it

Second interview

  1. Before, it was mainly Vue or React, which was used more? Have read some source code
  2. What’s the difference between Vue3 and previous versions
  3. How was the applets developed before
  4. What did Node know about SSR and how did it work before
  5. What are the expectations of the next job
  6. What is known about WASM before
  7. I have a rectangle on the screen, and I have a diagonal line, and if I click on the rectangle, how do I tell if I click on the rectangle above the diagonal, or below the diagonal, or on the diagonal
  8. If I wanted to draw a diagonal to this rectangle, what could I do
  9. How was the previous data visualization done
  10. There is no technical precipitation, such as communication in the technical community or writing articles
  11. Have you done any administrative work other than coding
  12. What do you know about Serverless
  13. What is the demarcation of responsibilities in the current division of work
  14. What front-end engineering is doing

Tencent music

One side

  1. What are the main technology stacks
  2. What are the main businesses
  3. What are the main technical solutions
  4. What is the background of SSR migration to CSR, what are the respective advantages, and why does the server render pages faster than the client
  5. What are the first screen performance optimizations
  6. Which protocols have been used
  7. What are the accessibility challenges and how are screen reader features implemented
  8. What internationalization has done
  9. What aspects of refactoring have been done, and what optimizations have been made for refactoring
  10. What problems webpack encountered in migrating Vite
  11. What you know about Serverless and what you do with it
  12. What is the process of test-driven development, and what can be done to improve TDD efficiency
  13. What are the problems with front-end security
  14. Explain the HTTPS
  15. What are the common HTTP status codes
  16. Are you familiar with the browser process model
  17. What is the browser rendering flow
  18. An introduction to event loops
  19. What is the implementation principle of Vue slots
  20. What performance optimizations have been made

Second interview

  1. Vue or React
  2. What are the advantages of Vue’s composite API
  3. What are the general ways to encapsulate repetitive logic in Vue2
  4. If you need to display UI components by calling apis, how to do this (e.g. Toast, Dialog)
  5. The differences and usage scenarios between useCallback and useMemo
  6. To package a common component or tool, you generally need to produce what paradigms of files
  7. What is the difference between commonJS and ESM module import and load execution
  8. How does node call RPC and what do we know about thrift
  9. What are the advantages of SSR and CSR
  10. What framework does Node use
  11. What solutions can be optimized if the page becomes jammed due to a large number of DOM updates
  12. How does the skin change program work
  13. If you execute location.href = url in js, what are the security implications of this behavior
  14. CSRF principle, what is the overall attack link, what are the solutions
  15. What are the methods of XSS and what should be filtered if any

On three sides

The interviewer didn’t apologize for being late for five minutes. He asked me to turn on the camera but didn’t turn it on by myself. He kept puA during the whole interview. Here’s what the interviewer said

I don't have any difficulty in understanding your project. You haven't done the client before, and you don't understand why you need to solve the problem of many errors in the code. I understand that the programmer of Toutiao probably won't write the code with errors all the time. I just don't think toutiao is really helpful for your growth and the architecture itself is problematic and I think you still have a lot of problems with the basic computer thinking and I have a lot of programmers from Toutiao who have used this, how come you haven't used itCopy the code

Microsoft China

One side

  1. Why do you choose to do the front-end industry
  2. What is the difference between Vue and React
  3. Describes a previously refactored project
  4. Pros and cons of typescript
  5. Have you ever experienced a situation where a requirement was impossible or difficult to implement, and how did you handle it
  6. The most challenging problem I’ve ever done
  7. To achieve a similar wechat chat list page layout, have the following requirements
1.There is a suction top column, the internal content does not need to be implemented2.A button bar with a suction bottom, there are four buttons inside, button function does not need to do, only need to achieve layout3.The middle list is scrollable// If fixed layout is used, the scroll bar will be full screen
// But if you use absolute and limit the screen height to 100%, you can limit the scrollbar to the middle and even hide the scrollbar
// Pay more attention to these details, as well as BEM naming, 1px border, etc
Copy the code
  1. Longest increasing subsequence forcings
  2. Longest continuous increasing subsequence forcings

Second interview

  1. What are the main businesses I did before
  2. What is the size and division of labor of the team
  3. Previous projects that were challenging
  4. Why should SSR migrate to CSR? If not, how can WE achieve the effect of CSR offline package
  5. Search rotation sort array forcings

On three sides

  1. Previous projects that were challenging
  2. Vue vs. React
  3. Vue data bidirectional binding principle
  4. Which Vue lifecycles are triggered the first time a page loads
  5. Do you know the filter principle of Vue? If you need to implement a filter, which can realize the function of capitalizing the first letter of a string, how do you do it? What I really wanted was a method of ‘ABC’ => ‘ABC’, but the interviewer was positive about my implementation)
  6. Use CSS to create a Tooltip: there is a Button on the interface. Hover hover displays a Tooltip with rounded corners and a small triangle below
  7. An understanding of closures, their application scenarios and disadvantages
  8. What happens from entering the URL to rendering the page
  9. English test (to tell the truth, I did not understand, my English level is very poor, directly kneel)

All around

  1. Projects that have been challenging
  2. What barrio has done
  3. Merges two ordered array force clasps
  4. The interviewer asked me what the time complexity was, and I said O(n). The interviewer asked me if there was a way to solve this problem, and I said I could loop backwards based on the old way. The interviewer asked me why the time complexity of pop is O(1). I said I didn’t know. The interviewer gave me time to learn about the amortization algorithm.

Five surface

  1. Expectations of your next job
  2. Projects with challenges
  3. The reasons for SSR CSR migration and the problems encountered
  4. The interviewer told me how to achieve O(1) for every query and deletion without Map. I had no idea. The interviewer asked me what to use for query O(1), I said hash, and what to use for insert and delete O(1). The interviewer suggested that I could use a two-way list, and I made it.)

Six sides

  1. English self introduction
  2. Why do you choose to do the front end, what is the motivation of doing the front end
  3. What have you done in pursuit of the ultimate experience
  4. What indicators will be concerned about and how to do detection
  5. What was the iteration speed in previous work
  6. Where do you see yourself in the next three to five years
  7. Have you done an automated test plan? How to do an automated test for compatibility
  8. How can YOU effectively test for UX restore
  9. If a PC page needs to be adapted to a mobile phone screen, what needs to be paid attention to, what problems may need to be solved, and how to test

Quick Hand (advertising)

  1. What are the main technology stacks
  2. What are the difficulties of the previous refactoring projects
  3. What are the considerations behind the move from SSR to CSR
  4. What is the approximate size of the project
  5. After project optimization or reconstruction, generally from what aspects to evaluate the effect is good or bad
  6. Do you know the principle of bridge, do you have any problems, and do you have any special treatment in some scenes without bridge
  7. Have you ever made an evocation app? Have you ever met any problems? How to judge whether the evocation is successful
  8. What is the approach to internationalization
  9. How does the skin change program work
  10. What are the differences between small program and H5? Have you seen how the bottom of small program is implemented
  11. Why do you want to do Vite migration, migration has encountered any problems
  12. Write a react-hooks system that counts back to start, pause, restart, isRunning
  13. Implement a method that requests the URL by passing in an array of urls and a number, and limits the maximum number of requests based on the number

Tencent (Advertising)

One side

  1. What are your expectations for your next job
  2. React read the source code
  3. Vue vs. React
  4. What is the difference between Proxy and DefineProperty in Vue
  5. Vue – principle of the router
  6. Are there best practices for mixing JS and TS development
  7. Why is Vite faster than Webpack
  8. What are the similarities and differences between Rollup and Webpack results
  9. Ask the output to explain the relationship between the function call stack and the scope chain
function bar() {
    console.log(project);
}

function foo() {
    var project = 'foo';
    bar();
}

var project = 'global';
foo();
Copy the code
  1. Ask the output, if you want to print 123 in the loop, what can be changed
for(var i = 0; i < 3; i++){
    setTimeout(() = > {
        console.log(new Date, i);
    }, 1000);
}

console.log(new Date,i);
Copy the code
  1. How to understand asynchrony of JS
  2. How do I understand closures
  3. Find the length of the longest unrepeated string of a string
  4. Determines whether an object is a circular reference object
  5. How is the esLint specification specified within the team
  6. What happens from entering the URL to rendering the page

Second interview

  1. Main business responsibilities
  2. How does the skin change program work
  3. How does the internationalization program work and what languages are included
  4. What is the principle of the offline package solution
  5. What does Node mainly do
  6. What are the security problems encountered? How is CSRF signing done
  7. Unidirectional list inversion
  8. Quick sort

On three sides

  1. What business are you responsible for
  2. Do you have any experience with people
  3. Prints the index of the second most frequent element in the array
  4. The difference between idempotent and non-idempotent
  5. Get requests whether images can be uploaded
  6. Have you encountered front-end security issues
  7. How to deal with online problems