preface

The interview date is 2021-06-06 18:00

Then, after the last interview, someone called me and asked me if I could have a second interview. I came here with a learning attitude, but what if IT happened? I suddenly got nervous. Feel the promise of the abrupt, but the feeling is ok, after all, when the two drops of the eight-part essay I have prepared again.

To introduce myself

First, the interviewer turned on the camera, the reflection, the big forehead, but I didn’t see any hair, it looked like a big man,

After my mouth is gone (self-introduction), I declare the byte ranking competition officially open.

Code output question

Q: JavaScript prototype chain related?

console.log(1);
setTimeout(function () { console.log(2); }, 0);
new Promise(resolve= > {
    console.log(3);
    resolve();
}).then(() = > {
    console.log(4);
})
console.log(5);

// The correct answer
1
3
5
4
undefined
2
Copy the code

Resolution:

  1. Script is a macro task that executes the code in order, printing 1 first;

  2. Encounter timer steTimeout, it is a macro task, into the macro task queue;

  3. First go into the Promise and execute the code in the constructor, printing 3;

  4. When the resolve function is encountered, change the state of the Promise to resolve and save the result;

  5. When you encounter the Promise. Then microtask, place it in the microtask queue;

  6. I keep going down, output 5;

  7. Execute. Then () prints 4

  8. Then execute resolve to print undefined

  9. Finally execute timer (macro task) output 2

    Here, the interviewer asked me about the Event Loop. I got all the correct answers, but I got the wrong one.

PS: But I asked about the prototype chain. Did he find out that I had memorized the eight-part essay? You were listening while I was there? Hateful ah, unexpectedly wheel war, the original side of the little sister is just a barb!!

Write a topic

Q: How many ways to determine arrays?

// Judge by the prototype chain
obj.__proto__ === Array.prototype;
// Use the array.isarray () function of ES6
Array.isArrray(obj);
// Check by instanceof
obj instanceof Array
/ / by Array. Prototype. IsPrototypeOf
Array.prototype.isPrototypeOf(obj)
/ / by the Object. The prototype. ToString. Call () to do judgment
Object.prototype.toString.call(obj).slice(8, -1) = = ='Array';
Copy the code

PS: I didn’t remember the last one. The third interviewer said THAT I had written it backwards. When I got here, I was still thinking about the prototype question.

Handwritten: Reduce implements map

/** * map */ with array reduce method
Array.prototype.Mmap = function(fn, thisArg) {
  const result = [];
  this.reduce((prev, curr, index, array) = > {
    result[index] = fn.call(thisArg, array[index], index, array);
  }, 0)
  return result;
}

Copy the code

parsing

Arr. reduce((previousValue, currentValue, currentIndex, array) => {}, initialValue?)

Reduce receives two parameters. The first parameter is function, which specifies the function to be called in each iteration. The return value of the function is previousValue of the next iteration. The second parameter is the initial value and is optional.

If no initial value is specified, the previousValue of the first iteration is ar[[0], currentValue is ARr [1], currentIndex is 1,

If the initialValue is specified, the previousValue of the first iteration is initialValue, currentValue is arr[0], and currentIndex is 0

arr.map(function callback(currentValue[, index[, array]]) { }[, thisArg])

The second argument, optionally thisArg, represents this when callback is executed.

Note that if callback is an arrow function and this points to the outer code block (window in non-strict mode), specifying thisArg is invalid

PS: There are three reasons for this failure. 1) I do not have a deep understanding of map function and only pass one parameter in project use; 2) I seldom use reduce; 3) IT takes too long to consider.

Handwriting: make timer not callback

console.log(0)
await delay(1000)
console.log(1)

const delay = (time) = > new Promies((resolve) = > setTimeout(resolve,time))
Copy the code

PS: I wrote this part very fast, because I had met this problem in the tutorial before, so I basically memorized it by muscle memory. However, I always felt that the interviewer would not ask such a simple question, so I had doubts in my heart and was dull for about half a minute. When the interviewer looked at it, it was finished, so let’s go to the next question.

The browser

Q: Browser process

When the browser loads the resource for the first time, the server returns 200. The browser downloads the resource file from the server and caches the resource file and response header for comparison during the next loading.

When loading resources next time, the forced cache has a high priority, the time difference between the current time and the time when 200 is returned last time is compared. If the time difference does not exceed the max-age set by cache-control, the system does not expire, matches the strong cache, and directly reads resources from the local device. If the browser does not support HTTP1.1, use the Expires header to determine whether it is expired.

If the resource has expired, it indicates that the force cache has not been hit. The cache negotiation starts, and requests with if-none-match and if-modified-since are sent to the server.

After receiving the request, the server determines whether the requested file is modified according to the Etag value. If the Etag value is consistent, the requested file is not modified and matches the negotiation cache, and 304 is returned. If not, change it, return the new resource file with the new Etag value and return 200;

If the server receives a request with no Etag value, it compares if-modified-since with the last modification time of the requested file. If the request is consistent, the negotiation cache is matched and 304 is returned. If not, the new last-Modified and file are returned and 200 is returned

Q: Browser strong cache, negotiated cache

(1) Strong cache

If the cache resource is valid, the cache resource is directly used without sending requests to the server.

Strong caching policies can be set in two ways: the Expires attribute and the cache-control attribute in HTTP headers.

(2) Negotiate cache

If the mandatory cache is hit, we don’t need to make a new request, we just use the cache content. If the mandatory cache is not hit, if the negotiated cache is set, then the negotiated cache will come into play.

There are two conditions for a negotiated cache to be hit:

  • max-age=xxxOut of date
  • A value ofno-store

With a negotiated cache policy, a request is first sent to the server, and if the resource has not been modified, a 304 status is returned, allowing the browser to use the local cache copy. If the resource has been modified, the modified resource is returned

PS: THIS eight-part essay is memorized by me, I really can’t remember so many fields, but the browser principle, I try to rely on the point, but once you can’t say the word is actually affecting the answer effect.

HTML

Q: Draw a sector based on DOM and propose a solution

  • CSS3In theclip(The interviewer says to consider compatibility)
  • Canvasorsvg(The interviewer says yesHTMLIn theDOMTo consider)
  • HTML5In the progress bar old modify style to achieve the purpose (the interviewer said there are no other)

** First draw a circle and then use the border-radius attribute in CSS3 to locate the circle.

PS: Squaw, I really didn’t use border-radius to draw a semicircle.

ask

Career planning, induction training, new technology perspective, and then double 叒 yi blow wave bytes of rainbow fart.

conclusion

Basically, overall, the performance was worse than expected, and the atmosphere was subtle and not cheerful.

You know, it’s over for no reason, and I’m paralyzed? Who am I? Where I am? What did I just do?

Later, I added the wechat account of the person who called me. I thought it was HR, but it wasn’t. I said a lot about my performance in the interview, but it turned out to be the interviewer.

Another moment of social death,

I suddenly remembered to ask my mother when I was a child, which do you want me to go to Tsinghua University? But after the college entrance examination, I found that I couldn’t go to any of them.

Now one side, two face hanging, is how a problem ~~~.