preface

To briefly introduce my basic case to the original poster is a university of macau software professional undergraduate class of 2018, a senior last semester through daily practice in 360 enterprise security group of south China Base (Base in zhuhai, now renamed surprising essence group), 18 years for positive as a front-end developer, to November this year there have been two years development experience. In the former unit, I was mainly engaged in the page development of toB terminal. In addition to the daily business system development, I also participated in the project of two/three dimensional data visualization and large screen, and got some experience related to project research and development management.

After the interview

I started to determine my job-hopping intention in September this year, and conducted targeted review and exam brush from September to October. In early November, I started intensive interview process, and I have sent posts in the following companies (mainly Boss) :

  • Offer harvest: Bytedance, Kuaishou, Pinduoduo, Didi, OPPO
  • The technical side passed, but the HR side was not continued due to the late process: Youzan, Baidu, Ali Lazada, Meituan
  • Hang: Ping An, enterprise wechat, Huanju YY, Webank

During this period, I often went back and forth to three places in the Pearl River Delta. At the end of November, I finally determined the offer intention, and finally got a satisfactory offer. The experience in these three months also made me some new insights:

  • Your resume should have a strong point as a stepping stone (for example, I have visual development experience), can let you get the interview opportunity, can better in the interview process of new perspective, meaningful dialogue;
  • Stay calm and humble. Unanswered questions are not a fatal flaw, and the interviewer is exploring the technical boundaries of the candidate through questions and answers.
  • Interview questions are almost the same, after each round of interview, it is best to make a review of the record summary of the questions, and constantly iterate out the most comprehensive answer.

Interview preparation

Although as a software development engineer, need to rely on persistent exercise, accumulation and precipitation to improve personal technical level; However, in the ordinary business development, there are few opportunities to cover every aspect of the technology, especially for the workplace rookie like me, about a year after graduation, it is essential to make adequate preparation for the interview.

  • Algorithm: thoroughly read “Sword Finger Offer”, try to reproduce 60+ questions in it, take notes on skills and try to draw inferential examples; From September to October, we will brush 140+ channels of Leetcode in a concentrated way, which will be more efficient according to the “Exploration” module on the Website of Licou.
  • Professional Technology: From CSS, JS, HTTP basic grammar, the three major framework, principle and front-end browser security several big column to review the outline or brain figure, systematically, have the time plan to review the memory of knowledge, at the same time try to knowledge in relation to the actual business in the work, you will find in this process in addition to consolidate their knowledge, It can also establish a personal knowledge map and have a clearer understanding of their overall level, so as to check and fill gaps in a more targeted way.
  • Summary: In addition to the basic technical knowledge, the comprehensive ability of the candidate is also the focus of the interview investigation. Under the “big front end” mentality, we need to consider: front-end performance optimization, Node.js tool chain, exception monitoring, deployment packaging and other issues; In terms of comprehensive soft skills, we need to summarize the following points in advance: the understanding of business system, the promotion of R&D process, the solving of development problems and the practice of team collaboration.

Here are some of the blogs/articles that gained a lot in preparation:

  • Hu Yu’s blog includes JS In-depth series, JS thematic series, etc
  • Front End Engineer Manual
  • The Book of Shaders
  • Detailed process for browser rendering: redraw, rearrange, and composite are just the tip of the iceberg

The title record

The questions involved in each round of technical interview are recorded in the form of a running ledger for reference to the current business direction of each company and the tendency of the interview. The complete answers will not be sorted out for the time being. PS: Late interview arrangement is too intensive and many questions have not been recorded in time, please forgive me ~πŸ˜…

😼 Promise. Resolve ()

Pinduoduo [Phone side]

  1. How do YOU use Echarts in React projects, in which life cycle instantiation diagrams (componentDidMount), and in what scenarios do you use Echarts’s advanced features
  2. Project I18N scheme, how to introduce I18N in the visual diagram
  3. What are the problems fixed by react-hooks and how do you use the Hooks method to emulate the functionality of Class Components
  4. If the Function Component executes multiple times, useRef() will generate a new object each time
  5. What’s new for React16 vs. 15?
  6. What are controlled components and uncontrolled components
  7. What is the technology stack for the React project? Talk about redux-Saga concepts, apis, and usage
  8. Three main features of Redux

    Single data source, State is read-only, and pure functions are used to modify State

  9. Does the project use TypeScript, how are enumerations written in TS, and how are they implemented in native JS
  10. How can the WebPack configuration be optimized, what are the policies, and what needs to be configured in Webpack if the project is going to use TS
  11. Is ES6 used in the project and how ES6 is used (Babel uses @babel/preset-env)
  12. Take some examples of properties under the window object
  13. A little bit about closures
  14. How to implement polyfill of Promise with native JS, what should we pay attention to
  15. What are the character entities of HTML? (❌)
  16. What are the problems that front-end modularization is designed to solve? What are the current modularization specifications? What are the differences between CommonJS and ES6
  17. Common front-end security issues involved, and how to prevent
  18. Use LESS/SASS. How to write functions in LESS
  19. Programming problem: Given an array of length 32, how do I convert it to a two-dimensional array of length 4*8

Pinduoduo 【 Second interview +coding】

  1. Detail the technical architecture of a recent project I worked on. Why did you migrate the UI component library
  2. What is a Web Worker, and the combination of Echarts and Web workers
  3. React and Vue compare the advantages and disadvantages of MVVM bidirectional binding process
  4. React/Vue Hooks: react-hooks API: react-hooks API: react-hooks API: react-hooks API: react-hooks API: useEffect
  5. What are high-level component HOC and Render Props, and what is the difference between them
  6. Talk about the general process of Vue SSR in the blog system
  7. Page skin solution

    The tag requests the new theme’s style file, the React Context API, CSS variables, and finally the use of localStorage to save the user’s last selection

  8. Programming problem: array deduplication

Pinduoduo [Three sides of the video]

  1. React vs. Vue, where do you see these MV* frameworks heading
  2. Have you done any project performance optimization, from the business and tool chain aspects
  3. Recent technical difficulties
  4. Have you participated in the open source community and contributed code to open source projects? Describe the development work you do in your spare time
  5. Are there any common components or tools maintained within the team? How do you think maintaining common logic is different from individual development, and how do you coordinate the needs of different developers
  6. The composition of the team, the difficulties encountered in teamwork, and how to solve them;
  7. What is your future career plan? What is the most important thing to lead your team/subordinates
  8. What books have you read recently? Have you written technical articles

Bytedance [Video side]

  1. What level of knowledge WebGL has and what basic functionality it has; How is WebGL used in the project
  2. What is the Brightness, Contrast and Edge Detection of the GLSL Shader

    When answering, I forgot the algorithm of contrast and did not answer the question. I talked about the adjustment of Luminance. Brightness is RGB+ Brightness coefficient; Edge detection and image sharpening use the Convolution Kernel to deepen the color difference gradient between the center pixel and the surrounding pixel to make the edge more prominent

  3. What is the relationship between brightness, contrast and RGB channel of original pixel

    The brightness is directly added to the original RGB with the color+ Brightness factor. The contrast is multiplied by the difference between the original color and the middle value of the brightness factor (color-0.5)*contrast+0.5

  4. Whether node development has been conducted; Briefly introduce the functions and principles of the webPack plug-in you developed
  5. Vue response principle; At what point does the REACTIVE principle Deps array subscription publishing center collect dependencies?
  6. Vue Template -> VDOM -> real DOM;
  7. The render function created by the Vue Template is a recursive call to createElement.
  8. Programming: Promise scheduling is related. JS implements an asynchronous Scheduler Scheduler with concurrency limits, ensuring that at most two tasks can be run simultaneously

Bytedance [Video 2]

  1. How to prevent/reduce node.js program crashes, any practical cases
  2. How to tell if a point is inside a regular polygon
  3. Limitations of Web workers; How to generate dynamic Web Worker instances using dynamic JS code (ArrayBuffer + url.createObjecturl)
  4. Iframe script execution will block the main page render thread and JS thread, from different browser kernel to analyze
  5. The difference between webSocket and TCP Socket, websocket handshake process, why based on HTTP request handshake
  6. What mechanism is used to calculate the weights of CSS selectors
  7. What are the post-processor and pre-processor of CSS and what are the differences
  8. When do Ajax cross-domain requests occur, and how do browsers handle Ajax cross-domain requests
  9. ES6 arrow function and ES5 ordinary function differences
  10. The Promise’s then method can be called by chaining, and how it holds values in the process; How does the then() method handle callbacks in then if they return a Promise/ an object with a THEN attribute (if the value of the then attribute is function or non-function)/neither of those cases
  11. Why not use Object.defineProperty in Vue to convert arrays into responsive data, and what is done with arrays

Bytedance [Video three Sides]

  1. Describe the most challenging projects you have worked on
  2. The idea and implementation principle of Vue virtualization list
  3. Other ways to optimize tree chart rendering
  4. Brief idea: Without using Promise or other JS asynchronous controls such as async/await, design a Web request Scheduler class that ensures that the callback functions for each Ajax request are executed in the order in which the request was originated
  5. Project development process, remote collaboration process assurance
  6. Do you have a particular business direction you want to do? Future work and technical planning

Kuaishou [Video side]

  1. Six written exams and a few simple programming questions
  2. Hand write bind and apply
  3. Several methods of horizontal and vertical centralization
  4. Extend the flex: 1
  5. Implement the componentDidMount/componentDidUpdate life cycle effect for stateless components using React Hooks
  6. The role of the second argument to setState
  7. The use of useCallback
  8. React Differences between controlled and uncontrolled components
  9. The difference between HTTPS and HTTP
  10. How is CSRF defended
  11. The principle of Promise all/ Race/Finally
  12. The difference between throttling and anti-shake and application scenarios
  13. Explain the 0.3-0.2 = 0.99999999…
  14. The native DOM API is related to creating nodes, inserting/removing nodes, and selecting nodes
  15. The difference between element.style and getComputedStyle()
  16. The output of the following code is 
    // counter.js
let counter = 10;
export default counter;
// index.js
import myCounter from "./counter";
myCounter += 1;
console.log(myCounter);
Copy the code
  17. Please use JavaScript to implement a function that solves the integer N such that %2==1, %3==2, %5==4, %6==5, %7==0

Kuaishou [Video Part 2]

  1. Output code results: function promotion problem, JS asynchronous event loop problem
  2. React Hooks advantages, what problems do you solve, useEffect call timing
  3. Webpack optimized methods and configurations
  4. Webpack plug-in development principle, a brief introduction to your plug-in
  5. Webpack Watch’s own cache mechanism
  6. Describe the most challenging project, what work did you do and what optimization did you do
  7. How to determine circular references of modules (DFS topological Ordering)

Kuaishou [Technical End on Site]

For this interview, I booked a plane ticket from Zhuhai to Beijing and flew to the headquarters of Kuaishou. The drop from 24 degrees Celsius to minus one degree Celsius in November really froze me, a Cantonese

  1. Project technology selection, why there is Vue and React
  2. Project r & D management process
  3. Automated delivery of front-end projects
  4. Team situation, the biggest difficulty in team communication, personal role in the team

OPPO – commercial

A telephone communication, are very basic front-end issues, such as closures, cross-domain, Vue responsive, HTTP foundation and so on; Second on-site interview, HR telephone interview

Didi – Two wheels business

The technical aspects are telephone communication and THE HR video, but the questions behind are not recorded

  1. Webpack packaging process, briefly webpack plug-in development and functions
  2. Commonjs principle
  3. What is middleware in Koa/Express
  4. How to improve the robustness of Node.js applications
  5. How to understand the HTTP protocol
  6. RESTful API
  7. HR aspect: how to ensure the process of project remote collaboration, and what work has been done to promote the process; What is the idea of starting with a project from zero

😿 Promise. Reject ()

Ping An Life Insurance

  1. Data Kanban development process, is the data Kanban static data or real-time rendering?
    • Static data How much data is there, and how is performance optimized when there is a large amount of data
    • Technical scheme of visual kanban real-time rendering
  2. What other advanced features have you used in Echarts besides plain bar chart line chart
  3. How Canvas differs from SVG, and how they are used in Echarts

    Canvas is suitable for drawing scenes with a large number of graphic elements, such as thermal diagram, large-scale scatter diagram and line graph in geographic coordinate system or parallel coordinate system. SVG essentially generates DOM nodes, which will cause great burden to browser rendering. SVG has the advantage of using less memory (especially important on mobile), slightly better rendering performance, and no blurring when using the browser’s built-in zooming capabilities; And because the DOM nodes are generated, it is easier to use the DOM API directly for user interaction in development

Enterprise wechat [Video hanging at the same time]

  1. How is the permission system implemented in the project
  2. The implementation principle of the Vue virtualization list
  3. Webpack optimizes packaging strategies, internal mechanics, and principles of plug-in development
  4. Suppose there is now a wechat public article page, which can display articles, pictures, videos and reader messages. From the perspective of security and interactive performance, how to optimize

    Security: user input when editing the page to prevent XSS attack, sensitive character filtering, external chain resource whitelist filtering, image resource desensitization processing into local resources; Optimization: critical request path optimization, event listener throttling, non-first screen resource lazy loading, code compression, server rendering, take advantage of caching, enable HTTP2

  5. What are the advantages of HTTP2 over HTTP1.1, and what problems do they solve

    Header compression, data framing, multiplexing, server push

  6. Webpack realize hot update process (Webpack – dev – the realization of the server and HotModuleReplacementPlugin)
  7. Vue generates VDOM process and Vue responsive principle
  8. Which projects have you seen source code for, and why
  9. Have you developed applets and have any TypeScript development experience
  10. Introduce the basic situation of the current team, and the contribution within the team (technology sharing, maintenance tools)

YY [Hanging on site]

  1. How to optimize the large images that need to be displayed on web pages, in terms of requests and performance
  2. Implement Adblock policies
  3. WebGL rendering process; What is a GLSL Shader and what does it do
  4. Shader implements the idea of a light filter
  5. WebGL FrameBufferObject concept
  6. Whether you have an understanding of animation, the concept and application of FLIP; Vue Transition source code underlying principle
  7. Unidirectional data flow model of Vuex; What are the advantages of using state management libraries as opposed to storing data directly in variables under Windows

Webank [There is no follow-up on the scene]

  1. What are the problems with using Websocket
  2. How do I manage data between different modules in REdux
  3. Talk about the implementation of specific requirements for controlling data flow using Redux-Saga
  4. An optimization for an input box that listens for input events and sends a request each time an input is triggered
  5. Anti – shake function and handwriting implementation
  6. Have a look at Vue code what their own experience
  7. The principle of Vue-router, the difference between History mode and Hash mode, why does the history mode switch modules in app first and then manually update routes
  8. Describe the unit tests in the project, how many use cases there are, and how they work
  9. Programming problem: Take all the string elements of an object and concatenate them into large strings
  10. Open question: a total of 103 participants in the 1V1 competition, design a elimination mechanism

Unfinished processes πŸ‘¨πŸ’»

[Video + phone + online coding]

  1. CSS selector, what is the priority,! The performance of the important
  2. Display: inline and inline-block
  3. Float: What is the BFC and what is the BFC
  4. The use of webSocket in a project, the handshake process
  5. How Babel works, how it works, and how to Polyfill it
  6. The difference between === and ==
  7. JS basic type
  8. Webpack optimizes and configures policies
  9. The role of the Service Worker; How is the cache policy divided and how is the cache handled for same-origin/non-same-origin resources
  10. What are the main problems solved by SSR
  11. Coding: traversal and mirroring of binary trees; Implement EventEmitter

Baidu – Infrastructure Department [Telephone third round technical interview]

  1. Project technology selection, why use Vue/React in different scenarios
  2. Principle of HTTPS, CA, digital certificate, and trust chain of digital certificate;
  3. What efforts have been made to optimize the business development process; Project development specifications: API specifications, warehouse and branch specifications, requirements/development/test specifications
  4. What happens from entering the URL to rendering the web page
  5. Coding: Find the path from the root node to the destination node

Meituan [Over the phone]

The rest of the process needs to go to Beijing headquarters and give up the process

Ali LAZADA [Over phone]

Two weeks have passed and still no news. I thought it was cold… The senior who contacted me for the interview told me that it was not cool yet but the process was slow. At this time, I had already received the offer and did not continue to wait for 🀣

  1. Flexbox common rules, how to center vertically
  2. How does CSSOM find the DOM node and generate the Render Tree, CSS selector weight priority
  3. Service Worker registration timing and page resource request proxy related issues; Resource caching policy
  4. How SSR is done; How to optimize the high CPU/Memory of server rendering caused by SSR
  5. What happens from entering the URL to rendering the browser
  6. The difference between HTTPS and HTTP The browser caches the lookup process

About the technical end and HR side

Basically, all the technical end will ask the following subjective questions: project difficulties, project RESEARCH and development process, technology selection, team situation, internal contribution of the team (technology sharing, maintenance tools), communication skills, personal career planning; The final “Do you have any questions for me?” is a great opportunity to learn about the team and the company, and I usually ask:

  • Can you make a summary comment on my answer and give me any suggestions
  • The team’s current technology stack and business direction
  • Public components or open source products maintained by the team both inside and outside the company, and active in the community
  • After joining the team in the future, my role, responsibility and leader’s expectation on me

Write in the last

Through this job search, I have realized more deeply that front-end engineering has entered a relatively stable state after 15 years of development: saturation of junior personnel and scarcity of senior talents. Primary new couple is the only way to find a breakthrough is on the basis of the professional skilled, highlight the different direction transverse mining, such as visualization of product development, Node. Js development tool chain, etc., based on actual business foundation, steadfast enhance the level of self is the most important thing to a job I also once confused, in the process of self doubt, Thanks to Zhiguang, Jian Jue, Less Jie, yue Yue and Yu Nan these deep pupils small partners for my encouragement and advice, but also hope that this article can bring a little help to the partners who are looking for a job 😎~