Front-end interview in January

background

I resigned on December 18, 2016 with about one year of front-end work experience. From December 26 to January 9, we have interviewed wechat, Baidu, Alibaba UC, Vipshop and Shenzhen Tencent and other companies. We hereby summarize and share our ideas with you.

WeChat

Since I have graduated and worked, the wechat interview is a social recruitment. The wechat recruitment was extremely strict and there were eight rounds of interviews. Generally speaking, I was basically fooled by cannon fodder. As the Tencent front end is subdivided into reconstruction and JS, so the interview of wechat is basically based on JS. The first side of wechat is the written test, which lasts for one hour and contains four programming questions:

• JS handwritten binary search algorithm
• Give you a piece of code to find the problem (look at closures)
• Implement a Lazyman(do your own search)
• Use javascript code to determine the final background-color of an element on the page, regardless of Internet Explorer, regardless of float.

The first two questions are more basic, as long as there is JS based students generally should have no problem. The third one, which is a little difficult, but I’ve seen it on the Internet before, can be either a queue or a promise. The fourth question, after reading a face meng force, think for a long time also did not understand what it examined content. For the sake of time, I just used window.getComputedStyle. Later, when I thought about it carefully, THERE seemed to be many things that I didn’t take into account. For example, when the background color of this element is transparent, its final background color should be the background color of its parent element.

The second wechat interview is the project experience interview, where I briefly introduce the projects I have done in the past year to the interviewer. Then I took out my notebook and started to look at the code I had written before. The interviewer thought the complexity of the project I had done was not too high. Then he asked me a few other questions: Since you are in the applets group, do you know anything about applets? I said no. Then I was asked if I used React, and I said no. The interviewer wasn’t impressed, but eventually let me pass.

The third aspect of wechat is the front end, after which my outlook on life has changed. I feel that I don’t deserve to be the front end. The first question is, what are the means of front-end optimization? I secretly pleased, such a simple question also asked. Then I said put the CSS file on top and the JS file on the bottom. As I was about to move on to my next tip, the interviewer asked why? I answer that JS download parsing will block the DOM tree construction, if placed above may appear a blank screen. The interviewer then asks, is it possible to have JS download resolution without blocking DOM tree construction? I replied by using either the defer or ASyn fields. The interviewer asks what’s the difference? I answer… The interviewer then asks if CSS download parsing blocks DOM tree rendering. I’m starting to sweat. I’m not sure about that. Then the interviewer asked me to move on to optimization techniques, and I answered CSS-sprit or base64 embedding small images. The interviewer asked me how CSS-Sprit works. While using Base64 reduces the number of requests, it increases the file size. What is the baseline to measure when to use Base64? By this time I was in tears. Then the interviewer asked me do I know HTTPS? I said yes. He asked, what’s the difference between HTTPS and HTTP? I said HTTPS adds an SSL layer. The interviewer asks if you could draw the four SSL handshakes? It’s broken down now. I say no. He then asks if there is symmetric or asymmetric encryption in SSL handshake? I don’t know. He asks how to optimize this layer? I don’t know. And then go on to answer the optimization method? I would push static content to the CDN. Then he asked if the CDN is unstable and sometimes it works and sometimes it crashes. If I have a home page, how can I make sure it works every time? The answer is CSS inline. He looked at the time and said the next question. I was then given a bar chart to draw using HTML and CSS. I was using Flex. Then he asked me to write a quicksort algorithm, which I did. Then he asked me to use CSS and JS animation to show the whole process of fast sorting in that bar chart, and I cried. In fact, I have seen this animation before, but I usually use canvas. At the end of the interview, I fell to my knees.

Overall speaking, wechat interview is very difficult. He examines every detail so carefully that he asks you not just to know the why but to know the why. On the other hand, I realized the lack of preparation.

baidu

Baidu’s interview is my favorite, more comprehensive investigation. Baidu first side as the basic, including HTML/CSS/JS aspects, a total of about 50 minutes, about 30 questions about:

• HTML5 new features (new tags, API, etc.), such as localstorage usage and the difference with cookie, how to understand web semantics
• CSS3 new features, such as animation, etc
• CSS features such as position usage, how to implement centering, understanding of bootstrap source code, box model (W3C and IE), use of Flex
• Front-end compatibility processing (CSS hack technology)
• JS basics, such as the use of this, the procedure for the new keyword, the difference between call and apply, closures, prototypes, and how JS implements inheritance
• Front-end basics, browser caching, cross-domain, whole process from entering URL to rendering, events (W3C and IE), TCP three-way handshake process, how to implement lazy loading (with the difference from preloading)

The second baidu interview is the basic interview + algorithm + project experience, lasting one hour. The questions are as follows:

• I have seen a mobile page resume you made before, may I ask how to achieve it? I mainly used REM+Media Query for different font sizes depending on the device size. Then ask me the difference between REM and EM. If the font size of the parent element is also EM, then how to calculate the font size of the child element.
• Have you ever encountered the phenomenon of margin overlap? How to solve it? BFC
• What are the common ways to clear floats? How does bootstrap work? How does Bootstrap implement a Grid system?
• How to understand JS modularity? Ever used Webpack?

There is only one algorithm question: what is shallow copy and deep copy? What’s the difference? How to implement deep copy of Object?

Firstly, I analyzed this problem. Object is a tree structure, so I copied it recursively. The interviewer then asks if you can make it through a loop. I thought about it for a while and answered that the key to the loop was the setting of the loop condition. I wanted to use the stack as the loop condition. When the stack is empty, the loop ends. At that time, I immediately thought, because the number of Object child nodes is not certain, there may be some problems in pushing and pushing. The interviewer then asks, is there anything else that hasn’t been considered? I thought for a moment and said no. He gave us a hint. What if there’s a ring? I was stunned and said I didn’t know. He then gave me a hint that using a depth-first approach to the stack wouldn’t solve the problem, and asked me to try using width first, sending him the code. After the interview, I sent him my code for your reference:

// Depth-first traverse replication with queuefunction deepCopy(obj) {
var newObj = {},
srcQueue = [obj], srcVisitedQueue = [],
copyQueue = [newObj], copyVisitedQueue = [];

while (srcQueue.length > 0) {
var currentSrcElement = srcQueue.shift(),
currentCopyElement = copyQueue.shift();

srcVisitedQueue.push(currentSrcElement);
copyVisitedQueue.push(currentCopyElement);

for (var key in currentSrcElement) {
if(typeof currentCopyElement[key] ! = ='object') {
currentCopyElement[key] = currentSrcElement[key];
} elseVar index = srCVisitedQueue.indexof (currentSrcElement[key]);if (index >= 0) {
currentCopyElement[key] = copyVisitedQueue[index];
} else{ srcQueue.push(currentSrcElement[key]); currentCopyElement[key] = {}; copyQueue.push(currentCopyElement[key]); }}}}return newObj;
}

// Test case// 1\. {a: 1, b:2} => pass // 2\. Simple types and complex types at the same time, the presence of the Object = > pass: / / var obj1 = {/ / a: 1, / / b: 2, / / c: {/ / d: 3, / / e: {/ / f: 4, / / g: 5 // } // }, // h: { // i: 6, // j: 7 // } // }; / / 3 \. A ring of Object = > pass: / / var obj1 = {/ / a: 1, / / b: 2, / / c: obj1 / /};Copy the code

Then the interviewer asked me about my project experience. I had seen that you had promoted the modularization of the company before. Could you tell me the background, how you promoted it and what problems you had encountered?

Baidu three is an open interview. First of all, the interviewer discussed with me the algorithm problem in the second interview. He asked me if I had solved it and how to solve the loop problem. Then he asked me if I had seen the source code of Jquery to make a deep copy of Object. I told you it was recursive. He then asks why Jquery considers the ring only to determine whether the current node is the root node. I didn’t answer the question. Then he said that baidu now has many departments, each of which has its own component library, realizing basically the same functions, but some use native JS, some use JQuery, and some use React. Now they want to unify, how to solve the problem? When I said refactoring, he asked me what my thoughts were on refactoring. Then he said that some of baidu’s projects have been online for a long time, and the code is relatively old. If you reconstruct the project, there may be impact on the online version. How do you solve this problem? I’ll do a little refactoring, roll back, etc. Then he asked, “There’s an urgent project that needs a component, and it happens to be available online. How do you shield that component from the existing project?” My idea is to write a Wrapper to mask the differences between this component and the existing library. Then the interviewer asks, if introducing this component requires introducing a new library, such as React, how would you choose? What are the advantages and disadvantages of introducing it? I offer some of my own thoughts.

Alibaba UC

The interview in UC was the easiest, so I felt I might not pass.

The first interview with UC was with a very senior front end engineer from Ali. The interview lasted about an hour. Let me start by telling you what I know about the mobile front end, okay? Then I talked about mobile front-end layout, JS aspects, performance optimization, etc., more than 15 minutes. Then he asked me how do I understand front-end engineering? Then I talked for another 15 minutes and so on. Then he asked me if I had any questions. How do you understand the front end and how do you go from PC to mobile? He stood on the blackboard and talked to me for more than 20 minutes. It includes hybrid technology and the current popularity of RN and Weex, as well as some of the technologies used in Ali’s current business and why. The first round of interviews is over.

The second interview is with a back-office buddy and lasts about 30 minutes. He asked me some methods of front-end optimization, and what was the biggest difficulty I met and how to solve it. What unforgettable things, etc. And then ask me what’s the problem? I said why didn’t you ask me the basics of the front end and the project experience of the front end? He said there was no need, he knew my background and so on, and he took me to dinner.

Vipshop

Vipshop’s technical aspect was conducted in 5 rounds, and the investigation was very comprehensive. The first two are basic and similar to Baidu. But it focused on asking me about web security, XSS and CSRF. Ask me how to solve the related problem? For XSS, I mainly use escape, and for CSRF, I mainly use JWT (javascript Web Token) in the project. Then he asked me about the details of JWT for more than 20 minutes. The third side is a product manager side, saying that although it is technical but still need to understand the product. Asked if I had used vipshop APP, I said no. Do I know what Vipshop does? I said a website that specializes in sales. Then he gave me a vipshop page and asked me if I had any suggestions, and I talked for more than 20 minutes. The fourth side is the technical director, after coming in, I hung a meal. Although I feel that you are good in all aspects of front-end foundation, VipSHOP’s business is very strong, and I don’t have any experience in e-commerce, so LET me start from scratch.

tencent

Because of the interview is mobile business, so the main question is the use of Zepto library, mobile terminal layout, optimization, some of the foundation of JS and localstorage. I also focused on how I conducted testing in the project (unit testing and E2E testing). I turned down the interview because I had to go to the headquarters in Shenzhen.

conclusion

For the front-end interview, or need a certain amount of time to comb, especially the details of the knowledge point must be very clear. There must be a thread to your project experience, and be very clear about what you have done, what pitfalls you have encountered, and how you have resolved them. Another algorithm is very important, I recommend you a book << sword offer>>, I read three times before the interview. Email is!

For more free interview materials, scan the qr code below or search qq group number 642482868 plus group to receive.