After graduation, the blogger worked as a front end in a start-up company. She felt that the project had no difficulties and the direction was not promising, so she decided to look for opportunities. I have met 4 companies that I want to go to in Shenzhen. Students who have job hunting ideas recently can check themselves. Part of the answer part is simple or part of the answer is long.

tencent

One side (60 min)

  1. Shared desktop to do two questions: minimum stack, word distance. Do it in 15 minutes, then ask me what I think
  2. What are the highlights of the project? A specific implementation of a feature in the project?
  3. Why typescript? What are the benefits?
  4. React class components and function components? Have any hooks been encapsulated?
  5. What about let and const?
  6. How does ES6 Map work? Arrays and linked lists. Objects can perform similar functions. Why Map? The object key can only be a string, and the object type will call toString, which will normally be[Object object]
  7. Why did ES6 introduce Promises? What other ways to write code asynchronously? The generator and async/await
  8. What is the format of the HTTP packet? Does it have to have content-Length? Content-length is only available for fixed-length requests, while transfer-encoding:chunked header is available for variable length requests, excluding content-Length
  9. What about cross-domains? How to prevent cross-domain? Reverse proxy or CORS header
  10. How does the server determine that the request is cross-domain? Determine the Origin request header
  11. How do I take cookies across domains? Set withCredentials:true for front-end Ajax and access-Control-allow-credentials :true for back-end ajax. If access-Control-allow-origin is the wildcard character ‘*’, you can only set cookies :secure The cookie can be carried only when HTTPS is enabled
  12. What about cyber security? I told him about XSS and CSRF and corresponding prevention methods
  13. How about the HTTPS handshake?
  14. Handwritten binary search tree, using ES6 syntax, only implement insert and find methods? How complex is the worst-case search time? Degenerate into a chain, O(n). How to optimize? Rotate the subtree height during insertion.

Second interview (40 min)

The second one seems to be the business leader, who makes more visits to the project

  1. Talk about the project business? Daily visits? After talking about the business process, he told me that all the difficulties of my project were in the back end, and the front end was not involved. I don’t know how to answer this.
  2. How about optimizing list rendering with large amounts of data? The interviewer told me that I was just using someone else’s long list library. There was no difficulty. I was stunned and didn’t know what to say.
  3. How to locate a performance problem in a project? Frequent garbage collection triggers are observed in the Chrome control panel’s flame map. Can you see the garbage collection on the flame map? To see.
  4. What about V8’s garbage collection mechanism?
  5. Project details
  6. Why Redux-Saga? Why Redux? Talking about the need for project status management and the benefits of Redux, the interviewer was not satisfied.
  7. Why Typescript? Static typing increases project maintainability and so on. What do you do if your colleague doesn’t write type? Talk to colleagues about the benefits of TS and promote them. How to do after promotion or do not write? Don’t know how to answer…
  8. Why React? React is easy to maintain, there is no SEO requirement for middle and background applications, and colleagues in the company have React technology stack. The interviewer wasn’t happy either
  9. Isn’t nginx something on the back end? Why put it on the front end stack? It’s for the reverse proxy. Isn’t that back-end? Answer cross domain is browser concept so I understand is front-end do. What if nginx fails? How to get front-end resources without nginx startup service. The interviewer was not satisfied with my answer either…
  10. React uses Fiber before and after? When will requestIdleCallback be executed? The callback passed to requestIdleCallback is invoked after the UI renders for free time. So you think requestIdleCallback is executed after UI rendering? Yes. (Slightly deceiving, I think I got it right)
  11. Do you think you have any advantage in investing in Tencent in this year (1.5 years)? A good at communication and learning. He says it’s not an advantage.

I was criticized for the simplicity of the project and many of the interviewers I answered well were not satisfied with it. Of course, I received a rejection letter the next day.

Ali.

One side (60 min)

  1. Talking about ideas, do not use JS only CSS to achieve a tooltips component, mouse slide shows the content of cheongsam
  2. Look at the code to determine the output, which is what this points to. By the way, the difference between an arrow function and a normal function
  3. What happens to a new object procedure
  4. Look at the code to judge the output, macro task micro task related.
  5. What about the prototype chain?
  6. Talk about Redux and why Redux?
  7. Why not use Redux for another project? The data flow is relatively simple and there is no need to introduce additional complexity
  8. Why Redux-Saga?
  9. Talk about immer, talk about the advantages of immutable data, the immer principle, okay?
  10. Is setState synchronous or asynchronous?
  11. React’s virtual DOM and its benefits
  12. React diff policy and diff details
  13. Compare version numbers
  14. Algorithm problem, find the shortest path of two nodes in the binary tree, tree node data structure is as follows:
type Node = { left? :Node; right? :Node; parent? :Node; depth:number }Copy the code

Two surface (20 min)

The interview with the worst attitude, the shortest time… I was dismissive throughout the interview, felt like the questions were casual, and ended the interview so quickly that I had a particularly bad impression of Ali

  1. Talk about the architecture of the project?
  2. How about the React Router principle? The two implementations of hashChange and popState based on history of hash are discussed. Route is used to determine whether a Route match will render components, and Link will not trigger popState on a Link to actively trigger replacement components.
  3. What is the specific implementation of a module in the project?
  4. What are the two most difficult components to package in a project? Said two, not satisfied, said too easy
  5. React performance tuning? All performance optimizations that will be used in React development are covered

Bytes to beat

One side (60 min)

  1. Look at the code output, var global pollution related
  2. Promise, async\await, setTimeout, etc
  3. Implement a Memo function? It’s done with closures. Then he said that if the internal value of the closure is undefined at the beginning, the result is also undefiend, so it cannot be judged. Then I changed a symbol. He said to memorize it according to the entry, right? I’m going to put an object in the closure with the key being the string after processing the input parameter.
  4. Rip the code, write an input N, return 0 to N-1, completely out of order. I wrote the Shuffle algorithm. Student: Complexity? O (n). You can’t use sort(()=> math.random ()-0.5) because V8 implements sort to use quicksort for up to 10 elements and more, so it’s not completely out of order
  5. Handwritten deep copy, just base types, objects, and arrays. I wrote a recursive version. Why use map to store object references? Prevent references from pointing to different objects than the original. What objects can “for of” be used on? If there is an iterator, there is[Symbol.Iterator]Properties. What about the iterative version? Copies are made similar to the tree’s sequence traversal execution. What else?JSON.parse(JSON.stringify(obj))
  6. What about JSX? Simplify the process of writing React. CreateElement, which is compiled by Babel. What are the three parameters to React. CreateElement? Type, props, children. What is the type of the first parameter? Lowercase is the string type, uppercase is the reference type
  7. What about the React event? React event triggering process and the benefits of implementing a set of event mechanism. Did you encounter any bugs related to React events? The React event mechanism causes the React event to fire earlier than the React event. How to solve it? Use React. CreatePortal to mount the child component to the parent component level. This way, the component’s native events do not emit to the parent component, but the child component’s React events do. React17 changed the mount event object from Document to root Element. Why did you do that? If multiple React projects are mounted to document, it will cause event collisions. If you mount it to your own root node, it will not.

Second interview (50 min)

  1. How do you optimize project rendering? From the network, JS execution, node rendering three aspects.
  2. A large amount of data is flushed in the front end and read from the memory. What if the background data changes? Get a Websocket to tell the front end to retrieve data if it changes. Is there a better way? Not yet.
  3. One render time in the project, I think there is room for improvement. If you could continue to improve, what would you do? Do the demand when the product and customer feel satisfied with the rendering speed so no further optimization, may look at the source code to see where the time-consuming.
  4. How does the V8 engine execute JS? We talked about lexical analysis, parsing, generating abstract syntax trees, interpreting generated execution bytecode, compiling hot code into machine code, etc. Bytecode saves memory and so on. What optimizations were made during V8 implementation? Variable promotion or something like that. The interviewer said V8 makes specific optimizations for resources such as CPU to put variables in the best place, which is also a benefit of just-in-time compilation.
  5. Ask project highlights
  6. How does large file fragment upload work? In the File. The prototype. Slice. What types of Web worker and main thread are passed? Serialized to a string for delivery, the bloB type in the project avoids copying big data by locking shared data between threads.
  7. Online collaboration scenarios, how to resolve conflicts? I didn’t know that. I didn’t answer very well
  8. Algorithmic problem: stock buy and sell once

Three sides (55 min)

  1. Algorithm: rain water. Train of thought is right, the boundary always gives a problem, did under the interviewer prompt.
  2. You introduced esLint code detection. How does that work? Generate abstract syntax tree to code, syntax detection. Are there other places where abstract syntax trees are used? Babel will translate the higher version of JS code or TS code written to generate the lower version of JS code that will run in the browser
  3. Project difficulties and highlights? It describes the uploading of large file fragments and the calculation of MD5 to the Web worker to avoid the delay caused by occupying JS threads for a long time. Resource sharding download? Range or if-range two HTTP headers. What is the status code? If-range Returns 206 and the corresponding byte Range If the flag is not expired, or 200 and all data otherwise
  4. How do you study? Based on business learning, I usually browse nuggets, Zhihu, medium and so on
  5. Something you’ve seen recently? Multiple SVGS on a single page will flash under HTTP1.1, type Sprite and unpack the code that introduced Sprite.
  6. Why look at opportunities these days? Work content is relatively simple and want to change direction
  7. Why didn’t you enter the big factory after graduation? University fun, not good study so no face
  8. Is there anything you want to show yourself? I worked as the head of the front end of a project and was independently responsible for the type selection of the front end project and the declaration cycle of the 0-1 project.
  9. Talk about the technical selection of the project? Actually React family bucket
  10. How do you assign work to your colleagues?

All around (55 min)

  1. Frantically skimming on project details and going through everything on your resume
  2. How to locate memory leaks? Locate the fault on the Performance panel and Memory panel
  3. How about gitlab-CICD optimization on your resume? How to connect the front-end project to GITLab-CICD and pipeline optimization, and to the company’s container management platform
  4. What about networking, rendering, and JS execution optimizations? Have you considered batch rendering for large data volumes? For example, put it in the web-worker and then pass it to the main thread? Not considered, because the batch loading of nodes will flash, and does not match the consistency display requirements in the requirements.
  5. Explain the principles and precautions of HTTPS handshake, CSS, and CSRF
  6. Knowledge of online documentation? Just before I was asked about the scene of conflict resolution, I was stumped, so I talked about several diff algorithms for conflict resolution
  7. What are you studying recently?

Five surface (60 min)

  1. Talk about project business
  2. When you’re halfway through writing a module on your resume, the interviewer says you’ve got it.
  3. Manual tear code:
['a'.'b'.'c'.'aaa'.'a'.'c'.'aaa'.'aaa'], add the number of occurrences in the array after the corresponding character.'a1'.'b'.'c1'.'aaa1'.'a2'.'c2'.'aaa2'.'aaa3'] and then write a time complexity and space complexity of order nCopy the code
  1. Let’s talk about virtual lists
  2. React Features? About concurrentMode. How to implement concurrent in React-Fiber? The link list node as the execution unit can interrupt with requestIdleCallback and browser exchange execution rights.
  3. Scenario question: Conduct wechat scanning code login in application A, and talk about the interaction process of PAGE A, server A, wechat APP and wechat server.
  4. What have you learned recently?
  5. What is the role of the current team and how can you improve with the team?

Dried small shrimps

Side (55 min)

  1. Look at the output, task queue dependent
  2. The var variable declaration is related to the output
  3. Write an array flattening function by hand, write recursive and non-recursive versions
  4. How do I change this? Call, apply, bind. Write a bind by hand
  5. Why can’t hook be put in a conditional judgment? Because hook is implemented by linked list, the hook is called to move the list to the next node value.
  6. Will React – Fiber
  7. Talk about controlled components and uncontrolled components
  8. Let’s talk about useCallback and useMemo. Can you implement useCallback with useMemo? Yes, just return the function
  9. So useEffect, does useEffect know that it’s first mounted? I don’t know. I usually use useRef to store a value.
  10. A handwritten promise can only be sent three requests at a time, executed as quickly as possible, and returns a promise containing the return result:
//arr is an array of functions that return promise
function promiseAllCtrl(arr, limit=3) {
  let result = [];
  let running = [];
  let index = 0;
  function run() {
    if (index >= arr.length) {
      return Promise.resolve();
    }
    let p = arr[index++]();
    running.push(p);
    result.push(p);
    p.then(() = > {
      running.splice(running.indexOf(p), 1);
    });
    if (running.length >= limit) {
      return Promise.race(running).then(run);
    } else {
      return Promise.resolve().then(run); }}return run().then(() = > Promise.all(result));
}
Copy the code

Second interview (30 min)

  1. What was the most difficult thing in the project and how did you solve it
  2. Why redux-SGA? It has finer granularity of process control than something like Redux-Thunk, and is written synchronously. Story – saga weaknesses? Generator returns any, which is not a good combination with ts
  3. What are the alternatives to Redux? UseReducer is similar when used well
  4. Would you still use Redux if you had to refactor? I said that I would not consider replacing Redux for the time being. Firstly, my colleagues are used to it. In fact, redux development tool is more comfortable to debug, and redux-Devtool is easy to use.
  5. How to locate performance problems? Use the React-devtool to see the component rendering frequency, the performance panel of the browser to see the rendering process details, and the Memory panel to see the memory
  6. How to locate the problem of a long blank screen? Webpack-bundle-analyze can be used to check the subcontracting situation. Reduce the size and number of JS loaded on the first screen as much as possible. Lazy loading of components and separate unpacking of large third-party libraries can be used. And dynamic import when less-used libraries are triggered
  7. How do you study at ordinary times?
  8. Why do you want to see new opportunities?

Surface after feeling

The interview is really tired, the face for almost a month or so, every night, or sometimes the interviewer is not available in the evening to arrange for the day to ask a mask. I was looking forward to Tencent and Ali, but unfortunately I met some unfriendly interviewers in the second interview. Except for these two interviewers, all the other interviewers were quite nice.

Finally took the offer of byte and shrimp, weighing the decision to go byte.

advice

I believe there are many people like me, who did not enter a big factory after graduation, and then work on a relatively simple project, no bright spot. In this case, you need to familiarize yourself with the business, summarize the project, take the initiative to do some performance optimization, and know how to locate and find problems, and how to improve the project, and so on. And keep learning to improve themselves, to give the scene can come up with the best solution.

There is the foundation, this is the most important, look at the above questions will find a lot of repeated questions, are the need for in-depth understanding, rather than recite, so that no matter what way to ask you, you can answer. There is no need to have a firm grasp of network and JS. For example, I use React in my development, so I need to have a general understanding of the implementation process and implementation principle of React, not to look at the source code in depth.

For algorithm questions, it is enough to refer to offer and Leetcode top200 once. In fact, it has already spilled over, because it will not be so difficult to ask, just want to check your solution idea and coding method.

I wish you all can get the desired offer~