In the Tencent front-end interview article (a), I mainly told the author of the interview Tencent side and the second face of the experience, the article has been a good response, the author of an excited night to hang his girlfriend aside, wrote down the second, now ear and knee are still a little pain. The second article will describe the third part of the interview with Tencent, and the fourth part will be updated in the subsequent article. Everyone see my hard, pay attention to bai!
Third – telephone interview plus remote machine test
This side asked not many questions, asked about the network related questions, but also asked a few intelligence questions, the rest are machine test!
All right, all right, let’s do it!
1. What happens from entering the URL to loading the page?
This question does not feel very familiar, I believe many people have encountered in the interview, this is a very very classic interview question! Interviewers like to ask this question because it really tests a lot of things.
The answer:
1. Enter the URL in the address bar of the browser and press Enter.
2. The browser checks whether the current URL is cached and compares whether the cache is expired.
3. DNS parses the IP address of the URL.
4. Establish TCP connections based on IP (three-way handshake).
5. HTTP initiates the request.
6. The server processes the request and the browser receives the HTTP response.
7. Render the page and build the DOM tree.
8. Close the TCP connection (wave four times).
1.1 You’ve just talked about caches. What do you know about caches?
The answer:
Browser caches,HTTP caches have a variety of rules, and they are categorized according to whether or not a request needs to be redirected to the server. I classify them as mandatory caches, and comparative caches (negotiated caches).
Force the cache to determine HTTP header fields: cache-control, Expires.
Expires is an absolute time, or server time. The browser checks the current time and uses the cache file if it has not expired. There is a problem with this approach, however: the server time and the client time may be inconsistent. As a result, this field is rarely used.
Max-age in cache-control holds a relative time. For example, cache-control: max-age = 484200 indicates that the Cache is valid for 484200 seconds after the browser receives the file. Browsers always use cache-control first if both cache-control and Expires are present.
The comparison cache is determined by the LAST-Modified, Etag field of HTTP.
Last-modified is the field returned by the server when the resource is first requested, indicating when it was last updated. The next time the browser requests a resource, the if-Modified-since field is sent. The server compares the local last-Modified time with if-Modified-since time. If the time is inconsistent, the server considers the cache expired and returns the new resource to the browser. If the time is consistent, a 304 status code is sent to allow the browser to continue using the cache.
Etag: The entity identifier (hash string) of the resource, which changes when the content of the resource is updated. The server determines if the Etag has changed and returns a new resource if it has, or 304 if it has not.
If in doubt, check out the Black Gold team’s very thorough article on caching, front-end caching best practices.
1.2 Please describe the DNS resolution process.
DNS resolution is a recursive query process, a few words can not be explained clearly, you see the picture.
1.3 How does TCP Initiate and close Connections?
答案 : this is So easy! Three handshakes, four waves!
1.4 What status codes do you know?
1XX: indicates that the request has been received and processing continues.
2xx: success – The request is successfully received, understood, or accepted.
3xx: Redirect – Further action must be taken to complete the request.
4XX: client error – The request has a syntax error or the request cannot be implemented.
5xx: Server side error – The server failed to fulfill a valid request. The common status codes are :200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500(please find what they represent by yourself).
1.5 In the whole process you just said, what optimization means can optimize and improve the web response speed?
Share a very comprehensive and optimized article
2. 5:15, the Angle between the clock and the minute?
67.5 degrees ha, there is a formula for this, do your own reasoning wave, if you are not clear can ask me in the comments section.
3. 8 identical looking balls 7 of the same weight 1 abnormal ball may be heavier or lighter at least a number of times to use a scale to find the abnormal ball, and need to know whether it is lighter or heavier.
This is a very interesting question, with three answers.
The answer
1. Take four balls from the eight balls to form two groups A and B, with two balls in each group.
2. Weigh group A and group B for the first time. If the weight is different, there will be A group with problems.
Three, the two balls will be reassembled and weighed twice, if the weight is different, there is a problem with one. Weigh the heavy ball and the light ball for the third time. If the ball is heavy, the heavy ball is abnormal. If they are the same, the remaining one is the light anomaly sphere.
The interview is over, 😁, let’s go to the written test
With native JS implementation, requirements: can not search resources on the network, do componentization, time 100 min.
1. Implement a div sliding animation, ending from fast to slow 5s (cSS3 is not allowed).
2. There is an input box in the page, which realizes the matching word in the array ARR query and requires autocomplete effect.
The topic is very simple, but very test the code implementation ability of the interviewer, design ability, function realization of the basic who can do.
Tell the truth, the author of this problem to achieve a little down, but do not stand me grow lovely 😊! So the interviewer reviewed the code and gave me another chance. Please do another question. I am not satisfied with the answers to these two questions.
Function add(a,b) function add(a,b) Note that a and b and the function return values are strings.
The author of this problem is easily completed, directly on the code.
function add (a, b) {
let lenA = a.length,
lenB = b.length,
len = lenA > lenB ? lenA : lenB;
// select * from ()
if(lenA > lenB) {
for(let i = 0; i < lenA - lenB; i++) {
b = '0'+ b; }}else {
for(let i = 0; i < lenB - lenA; i++) {
a = '0'+ a; }}let arrA = a.split(' ').reverse(),
arrB = b.split(' ').reverse(),
arr = [],
carryAdd = 0;
for(let i = 0; i < len; i++) {
let temp = Number(arrA[i]) + Number(arrB[i]) + carryAdd;
arr[i] = temp > 9 ? temp - 10 : temp;
carryAdd = temp >= 10 ? 1 : 0;
}
if(carryAdd === 1) {
arr[len] = 1;
}
return arr.reverse().join(' ');
}
Copy the codeconclusion
Three sides so happy over, the author can be happy to cook dumplings for his girlfriend! Happy winter solstice to you all!
The next article
@author: Even