字節(jié)前端二面涼涼記錄，晉級賽失敗
前言
面試日期為 2021-06-06 18:00
接著上回一面后，有個人給我打電話了，問我可不可以二面，我畢竟抱著學(xué)習(xí)的態(tài)度來面試的，但是萬一成了呢，我突然緊張了。感覺答應(yīng)的唐突了，但是感覺沒事，畢竟滴滴二面時那種八股文我已經(jīng)又準(zhǔn)備了一遍。
Husky-Yellow 投稿
https://juejin.cn/post/6953450923439947812
自我介紹
首先面試官開啟了攝像頭，這反光，這大額頭，就是沒看見幾根頭發(fā)啊，一看就是大佬，
我的嘴遁(自我介紹)之后，我宣布字節(jié)晉級賽正式開始。
代碼輸出題
問 : JavaScript 事件循環(huán)相關(guān) ?
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是一個宏任務(wù)，按照順序執(zhí)行這些代碼，先打印1;遇到定時器
steTimeout，它是一個宏任務(wù)，放入宏任務(wù)隊列;首先進入
Promise，執(zhí)行該構(gòu)造函數(shù)中的代碼，打印3;碰到
resolve函數(shù)， 將Promise的狀態(tài)改變?yōu)?code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;line-height: 1.5;font-size: 90%;padding: 3px 5px;border-radius: 2px;background-color: rgba(255, 229, 100, 0.2) !important;">resolve， 并將結(jié)果保存下來;碰到
Promise.then這個微任務(wù)，將它放入微任務(wù)隊列;繼續(xù)往下走，輸出
5;執(zhí)行
.then()輸出4接著執(zhí)行
resolve輸出undefined最后執(zhí)行定時器(宏任務(wù))輸出
2這里面試官問了我順帶問了我
Event Loop事件流，我都答對了，但是這道題我答錯了。
PS : 不過上了就問了原型鏈相關(guān)的，難道我背八股文的事情被他發(fā)現(xiàn)了?我一面的時候，你在旁邊偷聽?可惡啊，竟然車輪戰(zhàn)，原來一面的小姐姐只是個倒鉤!!!
手寫題
問:判斷數(shù)組的幾種方式?
//通過原型鏈做判斷
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 : 最后一個我沒想起來，第三個面試官說我寫反了，到這里的時候其實心態(tài)沒緩過來，還是對于剛才原型題的思考中。
手寫:reduce 實現(xiàn) map
/**
* 用數(shù)組的reduce方法實現(xiàn)數(shù)組的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 接收兩個參數(shù)，第一個參數(shù)為函數(shù)，指定了每次迭代調(diào)用的函數(shù)，函數(shù)的返回值為下一次迭代的 previousValue；第二個參數(shù)為初始值，是可選的。
若不指定初始值，那么第一次迭代的 previousValue 為 arr[[0]， currentValue 為 arr[1]， currentIndex 為 1，
若指定初始值，那么第一次迭代的 previousValue 為 initialValue， currentValue 為 arr[0]， currentIndex 為 0
arr.map(function callback(currentValue[, index[, array]]) { }[, thisArg])
其中第二個參數(shù)為 thisArg， 可選的，表示執(zhí)行 callback 時的 this。
注意，如果 callback 為箭頭函數(shù)時，里面的 this 指向外層代碼塊，（非嚴(yán)格模式下為 window），此時指定 thisArg 無效
PS : 這里沒寫好，原因有三，1:對 map 函數(shù)理解不深，項目使用都只是傳一個參數(shù)，2:對 reduce 使用較少,3:考慮時間過長。
手寫:使定時器沒回調(diào)
console.log(0);
await delay(1000);
console.log(1);
const delay = (time) => new Promies((resolve) => setTimeout(resolve, time));
PS : 這塊我寫的很快，因為之前補習(xí)八股文的時候，遇到過這個問題，基本憑借肌肉記憶背下來了，但是總感覺面試官不會問這種簡單的，我心里又起了疑惑，呆滯了半分鐘左右，面試官一看，這不寫完了嘛，來咱們下一題。
瀏覽器
問:瀏覽器過程
瀏覽器第一次加載資源，服務(wù)器返回 200，瀏覽器從服務(wù)器下載資源文件，并緩存資源文件與 response header，以供下次加載時對比使用；
下一次加載資源時，由于強制緩存優(yōu)先級較高，先比較當(dāng)前時間與上一次返回 200 時的時間差，如果沒有超過 cache-control 設(shè)置的 max-age，則沒有過期，并命中強緩存，直接從本地讀取資源。如果瀏覽器不支持 HTTP1.1，則使用 expires 頭判斷是否過期；
如果資源已過期，則表明強制緩存沒有被命中，則開始協(xié)商緩存，向服務(wù)器發(fā)送帶有 If-None-Match 和 If-Modified-Since 的請求；
服務(wù)器收到請求后，優(yōu)先根據(jù) Etag 的值判斷被請求的文件有沒有做修改，Etag 值一致則沒有修改，命中協(xié)商緩存，返回 304；如果不一致則有改動，直接返回新的資源文件帶上新的 Etag 值并返回 200；
如果服務(wù)器收到的請求沒有 Etag 值，則將 If-Modified-Since 和被請求文件的最后修改時間做比對，一致則命中協(xié)商緩存，返回 304；不一致則返回新的 last-modified 和文件并返回 200
問:瀏覽器強緩存，協(xié)商緩存
（1）強緩存
使用強緩存策略時，如果緩存資源有效，則直接使用緩存資源，不必再向服務(wù)器發(fā)起請求。
強緩存策略可以通過兩種方式來設(shè)置，分別是 http 頭信息中的 Expires 屬性和 Cache-Control 屬性。
（2）協(xié)商緩存
如果命中強制緩存，我們無需發(fā)起新的請求，直接使用緩存內(nèi)容，如果沒有命中強制緩存，如果設(shè)置了協(xié)商緩存，這個時候協(xié)商緩存就會發(fā)揮作用了。
命中協(xié)商緩存的條件有兩個：
max-age=xxx過期了值為 no-store
使用協(xié)商緩存策略時，會先向服務(wù)器發(fā)送一個請求，如果資源沒有發(fā)生修改，則返回一個 304 狀態(tài)，讓瀏覽器使用本地的緩存副本。如果資源發(fā)生了修改，則返回修改后的資源
PS : 這塊的八股文我這是背吐了，我真記不住那么多字段啊，但是瀏覽器原理方面，我盡量往點子上靠了，可是一旦說不出單詞其實對答題效果是有影響的。
HTML
問:基于 DOM 畫一個扇形，提出方案
CSS3中的clip(面試官說要考慮兼容性)Canvas或者svg去實現(xiàn) (面試官說要用HTML中DOM來考慮)HTML5中進度條老修改樣式達到目的 (面試官說還有沒有其他的)
面試官給出的答案:先畫一個圓，然后通過CSS3中border-radius屬性去定位到圓上。
PS :斯闊以，我還真沒用border-radius去畫半圓，腦洞大開了。
反問
職業(yè)規(guī)劃，入職培訓(xùn)，新技術(shù)的看法，然后又雙叒叕吹波字節(jié)的彩虹屁。
總結(jié)
基本總體來看，感覺表現(xiàn)比預(yù)估的差一截，氣氛很微妙也不是歡快那種。
就是莫名其妙面完了，我面癱了? 我是誰?我在哪?我剛才做了什么?
后來加了給我打電話的那位的微信，我以為是 HR，發(fā)現(xiàn)并不是~~ 我說了好多關(guān)于我面試的表現(xiàn)，結(jié)果是面試官。
又是一個社死的瞬間。
我突然想起來小時候問媽媽， 清華北大你想讓我去哪個? 結(jié)果高考后發(fā)現(xiàn)哪個都去不了。
現(xiàn)在一面過，二面掛，是怎么個問題呢~~~。
- END -
如下是小獅子春秋招過程中學(xué)習(xí)整理的思維導(dǎo)圖以及 PDF 文檔，會不斷更新，目前已有 8 份思維導(dǎo)圖，現(xiàn)在分享給大家，在公眾號后臺可以查看專欄，關(guān)注領(lǐng)取
學(xué)如逆水行舟，不進則退
點贊 + 在看，好文不白嫖嗷~