The introduction
Connect with an interview summary of one year and a half of experience, Baidu, Youzan, Ali interview summary, this period of time to end the interview summary.
This article mainly records the whole process of the interview that day (there may be omissions, after three or four days, I have tried to recall), the answer is also for reference answer, only for reference.
The original address
The body of the
Has great side over the two days after received the second invitation, below I reply to interview the invitation message, said recently that may leave too much, I can ask to interview at night, the other is very readily agreed, is about half past seven in the evening, I can reply, and then the next day, received the exact time and place of interview time at a quarter past seven in the evening.
On the day of the interview, I left work five minutes early, followed the directions on baidu Map (about 1 hour and 9 minutes), and waited at the bus stop… And so on and so on, and so on for 15 minutes the bus did not come, afraid of being late, so I made a didi in the past, after arriving at the interview site to the front desk of the company, there was no one at the front desk, maybe because it was dinner time, the front desk to have a meal. Then I saw a lot of people playing table tennis on the front floor, and they all had fun. It looked like a good environment, and I thought, Wow, it’s such a good environment. After waiting for a while, I checked the message and found the interviewer’s phone number in the interview invitation. I made a decisive call. After a while, the interviewer picked me up at the reception desk, and then I found a conference room and started the interview that day.
Interviewer: Introduce yourself first
Me: Blah blah blah…
Interviewer: Tell me about the r&d deployment process at your last company
Me: Blah blah blah… (Actually this is my special skill, every time can blow for a long time)
Interviewer: Since you publish as an overlay, how do you refresh your cache
Me: From the business of the company, blah, blah… (Not finished)
Interviewer: I’ll skip the business now and tell you about the browser caching scheme
Me: Oh, out of business. First of all, browsers have two caching schemes, one is strong caching and the other is negotiated caching.
Interviewer: Well, how do you use strong caching?
I: When the browser requests a resource for the first time, the server can set the Expires field in the response header, which indicates the cache expiration time of the resource. When the browser requests a resource for the second time, if the cache time is still within the cache time, it will directly use the cache. Otherwise, the resource will be reloaded. It has to be in strict sync with the server and client to work, so many people don’t use it now. Another option is to set the response header cache-control: max-age on the first request for the resource, which tells the browser when the resource has expired, and determine whether the expiration date has expired on the second request. If not, use the cache directly.
Interviewer: Is the cache-control header set by the server or the client?
Me: Cache-control server set
Interviewer: The other values of cache-control, you can also tell me
Me: The first is public, both client and server can cache; And then private, which can only be cached by clients; No-store, no cache is used; No-cache: negotiation cache is used.
Interviewer: Go ahead and talk about negotiation caching
I: There are two types of negotiated caches: last-Modified. When a resource is requested for the first time, the server sets this field in the response header, indicating the Last modification time of the resource. When the browser requests the resource for the second time, the browser adds an if-modified-since field to the request header. The server will determine whether the Last Modified time of the resource is the same as the if-Modified-since field in the request header. If so, the server will tell the client to use cache or re-download the resource. In the first request, the server generates an identifier based on the content of the resource or the Last modification time, and then returns it to the client as ETag in the response header. The server receives the ETag and determines whether it is the same as the original ETag. If it is, the server tells the client to use caching.
Talk about the pros and cons of last-modified/if-modified-since versus if-none-match /ETag
Me: well, I think about this (I don’t know, pretend to think about it)…… In my opinion, ETag is sometimes generated according to the Last modification time of the resource. The principle is similar to last-Modified, but ETag needs to consume the resources of the server to generate, so its performance is low. (Although not, say so, in case the interviewer doesn’t know either. Hahaha)
Interviewer: Tell me about performance optimization
I: First, to reduce the number of HTTP requests, such as combination of CSS and JS file, but don’t fully consolidated in the same file, a domain name three or four resources, so convenient browser to parallel downloads, browser, of course, the quantity of parallel downloads for each domain restrictions, a domain name assignment three or four resources while increasing the number of HTTP requests, But compared to parallel downloading, it is more cost-effective.
Interviewer: Why do browsers limit the number of resources that can be downloaded concurrently from the same domain name?
Me: HMM, this I also think (actually I also don’t know)…… I haven’t delved into this, but is it because browsers start too many download threads?
Interviewer: What does downloading resources have to do with threads?
Me: In addition to the fact that each TAB is a process, the browser has a process that manages downloads. I think it starts a thread for each resource downloaded (I don’t know, but guess what).
Interviewer :(pause) what’s the difference between a process and a thread
Me: A process is the smallest unit of memory allocated, a thread is the smallest unit of CPU scheduling, and a process can contain multiple threads.
Interviewer: Do you use nodejs a lot? How do nodeJS processes communicate with each other
Me: NodeJS is less used. Nodejs can start child threads and then use the main thread to listen for messages from the subscribed child threads. Communication between the child threads is controlled by the main thread. (Probably wrong, process)
Interviewer: Well, performance optimization moves on
Me: To reduce the number of HTTP requests, you can also combine ICONS in the same image, using background-position control. Then the first screen of the image using lazy loading form, try to display when loading it, of course, placeholders and images as far as possible to specify the width and height, to avoid the image after loading the replacement image browser will backflow.
Interviewer: How to implement lazy loading of pictures
I: listen to the browser’s scroll event, combined with clientHeight, offsetHeight, scrollTop, scrollHeight and other variables to calculate whether the current image is in the visible area, if so, replace SRC to load the image, of course, this scroll event to mainly stream.
Interviewer: How do you tell if the picture is loaded
Me: Use the onload event.
Interviewer: Ok, you go on.
I: performance optimization, still can reasonable use of the cache, as far as possible the CSS and JS files use outside chain form, while using inline CSS and JS when empty cache faster, because inline styles and scripts don’t need to send the HTTP request, but as far as possible in order to exert the browser’s cache function, try to use outside chain form.
Me: Then try to put CSS at the top and JS at the bottom.
Interviewer: What happens if the CSS file in the head is slow to download?
I: Download page will probably wait for the CSS page at this time is white, then the CSS resource will have a timeout, if more than this timeout, this resource is equivalent to download failure, the browser will skip this CSS resource, according to the existing CSS resource tree generated CSS rules, then generate the Render tree, Then render the page.
Interviewer: If I now add a CSS file to the page dynamically, will the page always flow back?
Me: As soon as I add CSS that affects the structure of the page, the browser will backflow.
Interviewer: What if there’s translate3D in the CSS file like the page?
Me: I actually feel like it doesn’t backflow because translate3D just shifts its position and doesn’t affect the position of the other elements, but it does backflow.
<div style=”position:absolute; width:0; Hegiht :0″ </div
Me: No, because there are no changes that affect the structure of the page.
Interviewer: Ok, go ahead
Me: Performance optimization, try to use CDN.
Interviewer: What is the principle of CDN?
I: First, the browser will request the CDN domain name, and the CDN domain name server will return the CNAME of the specified domain name to the browser. The browser resolves these Cnames and obtains the IP address of the CDN cache server. The browser is requesting the cache server, and the CDN cache server obtains the actual IP address according to the internal dedicated DNS resolution. The cache server then requests the resource from the actual IP address. The cache server saves the resource locally and returns it to the browser client.
Interviewer: You implement the following throttling function
. I didn’t remember what anti-shake was and what throttling was, so I wrote the function as anti-shake. (Just then a man enters the meeting room. He looks like a young man.)
var debounce = function(fn, delay, context) {
let timer = null;
return function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout((a)= > {
const arg = Array.prototype.slice.call(arguments);
fn.apply(context, arg);
}, delay)
}
}
// Test section
var run = function(text) {
console.log(text);
}
run = debounce(run, 200);
run('run1');
run('run2');
setTimeout((a)= > {
run('run3');
}, 201)
Copy the codeInterviewer: I have no more questions. Do you have anything to add?
Me: Then I finish the problem of performance optimization?
Interviewer: Sure.
Then I started describing the use of Webpack to reduce the size of JS files, You can use the Babel – plugin – import, Babel – plugin – component, webpack. ContextReplacementPlugin, webpack. IgnorePlugin…
Interviewer: I know that. Do you have any questions? (Probably want to end the interview, don’t want me to continue)
Me: Blah blah blah… Asked a lot of questions about youzan company, such as how many floors the company has, the main technology stack, 2B or 2C, and how many front ends the company has (I may still be too verbose).
Finally I asked a question and asked the interviewer what was the evaluation of this time. The interviewer only replied that it was ok. And then the interview is over, which is more than an hour.
After the interview, the interviewer walked me to the elevator… You can say the floor is really high and there is a long wait for the elevator to go up and down… When I got outside, it was raining heavily, and I dripped home again, ending the interview trip of the day.
The last
Until yesterday, received a reply mail have great interview results, told no suitable position (in praise or is very good, didn’t pass the interview also notice), though a little unwilling, but think really may be not enough good, or is your face is not very well, or your ability don’t match with the company’s position.
In the interview summary of one and a half years of experience in baidu, Youzan and Ali, some students are concerned about the final results of the interview. The situation is that they have been fortunate enough to receive the offer from Baidu, while the interview of Ant Financial has been a week, and I don’t know whether it is because the process is too long or they failed at the same time.
At this time, I think, in fact, there is a lot of luck in the interview, just the company needs, just you are suitable, this time is very lucky.