前言
面试日期为 2021-06-06 18:00
接着上回一面后，有个人给我打电话了，问我可不可以二面，我毕竟抱着学习的态度来面试的，但是万一成了呢，我突然紧张了。感觉答应的唐突了，但是感觉没事，毕竟滴滴二面时那种八股文我已经又准备了一遍。
Husky-Yellow 投稿
https://juejin.cn/post/6953450923439947812
自我介绍
首先面试官开启了摄像头，这反光，这大额头，就是没看见几根头发啊，一看就是大佬，
我的嘴遁(自我介绍)之后，我宣布字节晋级赛正式开始。
代码输出题
问 : JavaScript 事件循环相关 ?
console.log(1); setTimeout(function () { console.log(2); }, 0); new Promise((resolve) => { console.log(3); resolve(); }).then(() => { console.log(4); }); console.log(5); //正确答案 1; 3; 5; 4; undefined; 2;
解析：
script是一个宏任务，按照顺序执行这些代码，先打印1;- 遇到定时器
steTimeout，它是一个宏任务，放入宏任务队列; - 首先进入
Promise，执行该构造函数中的代码，打印3; - 碰到
resolve函数， 将Promise的状态改变为resolve， 并将结果保存下来; - 碰到
Promise.then这个微任务，将它放入微任务队列; - 继续往下走，输出
5; - 执行
.then()输出4 - 接着执行
resolve输出undefined - 最后执行定时器(宏任务)输出
2
这里面试官问了我顺带问了我Event Loop事件流，我都答对了，但是这道题我答错了。
PS : 不过上了就问了原型链相关的，难道我背八股文的事情被他发现了?我一面的时候，你在旁边偷听?可恶啊，竟然车轮战，原来一面的小姐姐只是个倒钩!!!
手写题
问:判断数组的几种方式?
//通过原型链做判断 obj.__proto__ === Array.prototype; //通过ES6的Array.isArray()做判断 Array.isArrray(obj); //通过instanceof做判断 obj instanceof Array; //通过Array.prototype.isPrototypeOf Array.prototype.isPrototypeOf(obj); //通过Object.prototype.toString.call()做判断 Object.prototype.toString.call(obj).slice(8, -1) === "Array";
PS : 最后一个我没想起来，第三个面试官说我写反了，到这里的时候其实心态没缓过来，还是对于刚才原型题的思考中。
手写:reduce 实现 map
/** * 用数组的reduce方法实现数组的map */ 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; };
解析
arr.reduce((previousValue, currentValue, currentIndex, array) => {}, initialValue？)
reduce 接收两个参数，第一个参数为函数，指定了每次迭代调用的函数，函数的返回值为下一次迭代的 previousValue；第二个参数为初始值，是可选的。
若不指定初始值，那么第一次迭代的 previousValue 为 arr[[0]， currentValue 为 arr[1]， currentIndex 为 1，
若指定初始值，那么第一次迭代的 previousValue 为 initialValue， currentValue 为 arr[0]， currentIndex 为 0
arr.map(function callback(currentValue[, index[, array]]) { }[, thisArg])
其中第二个参数为 thisArg， 可选的，表示执行 callback 时的 this。
注意，如果 callback 为箭头函数时，里面的 this 指向外层代码块，（非严格模式下为 window），此时指定 thisArg 无效
PS : 这里没写好，原因有三，1:对 map 函数理解不深，项目使用都只是传一个参数，2:对 reduce 使用较少,3:考虑时间过长。
手写:使定时器没回调
console.log(0); await delay(1000); console.log(1); const delay = (time) => new Promies((resolve) => setTimeout(resolve, time));
PS : 这块我写的很快，因为之前补习八股文的时候，遇到过这个问题，基本凭借肌肉记忆背下来了，但是总感觉面试官不会问这种简单的，我心里又起了疑惑，呆滞了半分钟左右，面试官一看，这不写完了嘛，来咱们下一题。
浏览器
问:浏览器过程
浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时对比使用；
下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取资源。如果浏览器不支持 HTTP1.1，则使用 expires 头判断是否过期；
如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match 和 If-Modified-Since 的请求；
服务器收到请求后，优先根据 Etag 的值判断被请求的文件有没有做修改，Etag 值一致则没有修改，命中协商缓存，返回 304；如果不一致则有改动，直接返回新的资源文件带上新的 Etag 值并返回 200；
如果服务器收到的请求没有 Etag 值，则将 If-Modified-Since 和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回 304；不一致则返回新的 last-modified 和文件并返回 200
问:浏览器强缓存，协商缓存
（1）强缓存
使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。
强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。
（2）协商缓存
如果命中强制缓存，我们无需发起新的请求，直接使用缓存内容，如果没有命中强制缓存，如果设置了协商缓存，这个时候协商缓存就会发挥作用了。
命中协商缓存的条件有两个：
max-age=xxx过期了- 值为
no-store
使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源
PS : 这块的八股文我这是背吐了，我真记不住那么多字段啊，但是浏览器原理方面，我尽量往点子上靠了，可是一旦说不出单词其实对答题效果是有影响的。
HTML
问:基于 DOM 画一个扇形，提出方案
CSS3中的clip(面试官说要考虑兼容性)Canvas或者svg去实现 (面试官说要用HTML中DOM来考虑)HTML5中进度条老修改样式达到目的 (面试官说还有没有其他的)
面试官给出的答案:先画一个圆，然后通过CSS3中border-radius属性去定位到圆上。
PS :斯阔以，我还真没用border-radius去画半圆，脑洞大开了。
反问
职业规划，入职培训，新技术的看法，然后又双叒叕吹波字节的彩虹屁。
总结
基本总体来看，感觉表现比预估的差一截，气氛很微妙也不是欢快那种。
就是莫名其妙面完了，我面瘫了? 我是谁?我在哪?我刚才做了什么?
后来加了给我打电话的那位的微信，我以为是 HR，发现并不是~~ 我说了好多关于我面试的表现，结果是面试官。
又是一个社死的瞬间。
我突然想起来小时候问妈妈， 清华北大你想让我去哪个? 结果高考后发现哪个都去不了。
现在一面过，二面挂，是怎么个问题呢~~~。
