交代下背景
在掘金群比較活躍的群友應該都認識我，我就是那個每天吹水的管理員，最近趕上秋招之際，畢業剛滿一年，就打算試下杭州的幾家廠，因為本身也是二線廠出身，所以投的也都是二線廠以上，拿到的offer也還ok，現在還是找工作的狀態，如果有杭、滬有理想有技術氛圍不修福報當然福利待遇不能太差的團隊可以聯絡我，P5等級。 下面是我遇到的面試題彙總，由於問題實在太多了，只簡述思路和答案。
面試問題總結
http方面
現在發現越來越多的公司喜歡問前端http的基礎，我覺得無可厚非，前端人員本身就要了解很雜的東西，http跟我們的效能優化息息相關。
描述網頁從輸入url到渲染的過程
1.首先獲取url 解析出ip地址 如果本地hosts中有配置優先取出配置 若沒有則進行dns解析
2.tcp 三次揮手 建立連線
3.客戶端傳送http請求
4.伺服器處理請求並響應
5.瀏覽器處理資原始檔進行渲染
6.tcp的四次揮手
複製程式碼簡述三次握手和四次揮手
下面符號的含義 SYN(聯機) ACK(確認) FIN(結束)
三次握手
第一次握手：客戶端採用TCP協議將帶有SYN標誌的資料包傳送給伺服器，等待伺服器的確認。
第二次握手：伺服器端在收到SYN的資料包後，必須確認SYN，併傳送的ACK標誌，同時，自己也將會向客戶端傳送一個SYN標誌。
第三次握手：客戶端在接收到伺服器段的SYN+ACK包後，自己會向伺服器傳送ACK包，完成三次握手。那麼客戶端和伺服器正式建立了連線，開始傳輸資料。
複製程式碼四次揮手
1. 當客戶端的資料傳輸到尾部時，客戶端向伺服器傳送帶有FIN標誌的資料包，使其明白自己準備斷開通訊了。 TCP規定，FIN報文段即使不攜帶資料，也要消耗一個序號。
2. 因為TCP的通訊是使用全雙工通訊的，所以在斷開連線的時候也應該是雙向的；當伺服器收到帶有FIN標誌的資料包時，
其必不會直接傳送FIN標誌斷開通訊的請求，而是先傳送一個帶有ACK標誌的應答資訊，使客戶端明白伺服器還有資料要進行傳送。
3. 伺服器的資料傳送完成後，向客戶端傳送帶有FIN標誌的資料包，通知客戶端斷開連線。
4. 當客戶端收到FIN後，擔心某些不可控制的因素導致伺服器不知道他要斷開連線，會傳送ACK進行確認，同時把自己設定成TIME_WAIT狀態並啟動定時器，在TCP的定時器到達後客戶端並沒有接收到請求，會重新傳送；當伺服器收到請求後就斷開連線；當客戶端等待2MLS（兩倍報文最大生存時間）後，沒有收到請求重傳的請求後，客戶端這邊就斷開連線，整個TCP通訊就結束了。
複製程式碼為什麼握手是三次，揮手是四次
因為當Server端收到Client端的SYN連線請求報文後，可以直接傳送SYN+ACK報文。其中ACK報文是用來應答的，SYN報文是用來同步的。
但是關閉連線時，當Server端收到FIN報文時，很可能並不會立即關閉SOCKET，所以只能先回復一個ACK報文。
只有等到我Server端所有的報文都傳送完了，才能傳送FIN報文，因此不能一起傳送。故需要四步握手。
複製程式碼為什麼不能進行兩次握手鍊接
如果是兩次握手，在第二次結束後，伺服器並不能保證客戶端已經收到了第二次的請求，如此一來的話，伺服器會一直儲存著這個通訊過程，
因為TCP通訊都是要佔用埠的，造成了一定的資源浪費。所以，就一定要讓客戶端來傳送ACK的確認請求。
複製程式碼https的傳輸過程
1.在伺服器端存在一個公鑰及私鑰
2.客戶端從伺服器取得這個公鑰
3.客戶端產生一個隨機的金鑰
4.客戶端通過公鑰對金鑰加密（非對稱加密）
5.客戶端傳送到伺服器端
6.伺服器端接受這個金鑰並且以後的伺服器端和客戶端的資料全部通過這個金鑰加密
複製程式碼https和http的區別
1.https需要證書。
2.http是超文字傳輸協議，是明文傳輸，https則是具有安全性的ssl加密傳輸協議。
3.http和https使用的埠不同，前者是80，後者是443。
4.http的連線很簡單，無狀態；HTTPS是由SSL+HTTP構建的可進行加密傳輸、身份認證的網路協議，比http協議安全。
複製程式碼如何確定服務端開啟了gzip
1、客戶端請求中增加Accept-Encoding: gzip表示客戶端支援gzip；
2、服務端接收到請求後，將結果通過gzip壓縮後返回給客戶端並在響應頭中增加Content-Encoding:gzip 表示響應資料已被壓縮
3、客戶端接收請求，響應頭中有Content-Encodin:gzip表示資料需解壓處理
複製程式碼為什麼要用快取
快取減少了資料傳輸，對伺服器壓力減小，提升前端頁面效能。
複製程式碼強制快取和協商快取
強制快取是我們在第一次請求資源時在http響應頭設定一個過期時間，在時效內都將直接從瀏覽器進行獲取，
常見的http響應頭欄位如Cache-Control 和 Expires
協商快取是我們通過http響應頭欄位etag或者Last-Modified等判斷伺服器上資源是否修改，
如果修改則從伺服器重新獲取，如果未修改則304指向瀏覽器快取中進行獲取。
複製程式碼css方面
不知寬高的垂直水平居中
1.transform
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
2.flex
display: flex;//flex佈局
justify-content: center;//使子專案水平居中
align-items: center;//使子專案垂直居中
3. table
display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中
4.write-mode
.wp {
writing-mode: vertical-lr;
text-align: center;
}
.wp-inner {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.box {
display: inline-block;
margin: auto;
text-align: left;
}
5.grid
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
複製程式碼如果在圖片上面打碼
主要通過canvas的合成屬性 https://blog.csdn.net/qq_37467034/article/details/92690690 這篇文章上有很好的解釋
複製程式碼盒模型
標準盒模型的寬高只是內容（content）的寬高，
而在怪異模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高
我們可以通過 box-sizing進行設定 content-box 和 border-box 尤其注意的是padding-box這個屬性，width和height屬性包括padding的大小，不包括border和margin
複製程式碼flex佈局
flex佈局實現中間自適應 主要考察對flex裡的屬性的一些瞭解。flex-grow就可以。
複製程式碼重繪和迴流
由於節點的幾何屬性發生改變或者由於樣式發生改變而不會影響佈局的，稱為重繪，例如outline, visibility,
color、background-color等，重繪的代價是高昂的，因為瀏覽器必須驗證DOM樹上其他節點元素的可見性。
迴流是佈局或者幾何屬性需要改變就稱為迴流。迴流是影響瀏覽器效能的關鍵因素，因為其變化涉及到部分頁面（或是整個頁面）的佈局更新。
一個元素的迴流可能會導致了其所有子元素以及DOM中緊隨其後的節點、祖先節點元素的隨後的迴流。
複製程式碼vue方面
vue data格式
vue中使用return語句返回並不使用{}的原因 是因為 由於元件的複用性，我們並不能把所有元件的屬性指向一個地址，而return可以解決掉這個問題。
複製程式碼vue中資料監聽
1.我們都知道object.defineProperty()可以實現以個物件的get和set監聽，那如果物件裡是多重物件 深度物件的時候呢，
這個時候我們將通過遍歷物件監聽的方式 實現對立面每一個子物件的監聽
2.vue當前版本的資料監聽是由問題的 無法對直接運算元組下標值進行監聽
3.所以在vue3中 改用proxy取代了object.defineProperty
複製程式碼前端安全方面
xss攻擊原理
第一、XSS反射型攻擊，惡意程式碼並沒有儲存在目標網站，通過引誘使用者點選一個連結到目標網站的惡意連結來實施攻擊的。
第二、XSS儲存型攻擊，惡意程式碼被儲存到目標網站的伺服器中，這種攻擊具有較強的穩定性和永續性。
解決方案
1. url過濾
2.提交的符號如<>（尖括號）、”（引號）、 ‘（單引號）、%（百分比符號）、;
（分號）、()（括號）、&（& 符號）、+（加號）等轉義。嚴格控制輸出
複製程式碼crsf
CSRF 跨站請求偽造.CSRF指的是攻擊者盜用了你的身份,以你的名義傳送惡意的請求,給你造成個人隱私洩露及財產安全.通常指攜帶你的ck進行請求一些連結。
解決方案
新增refer 改用token
複製程式碼js方面
this的指向問題
哪個物件呼叫函式，函式裡面的this指向哪個物件。箭頭函式沒有this，箭頭函式的this是引用箭頭函式這層的this。
複製程式碼bind apply call區別
bind apply call雖然都是改變this 指向， 但是首先bind返回的是一個函式，需要執行。而call和apply會自動執行。之後apply接受的引數為一個陣列。
複製程式碼原型漏洞問題
這個問題主要考察的是一層object.freeze(),通過object的凍結來實現物件的無法修改。由於之前jquery和lodash都爆發了相關漏洞。
複製程式碼async和await
主要考察巨集任務和微任務 搭配promise 詢問一些輸出的順序 木易楊大佬的100道題有很好的解釋。
async和await 用了同步的方式去做非同步 async定義的函式的返回值都是promise await後面的函式會先執行一遍，然後就會跳出整個async函式來執行後面js棧的程式碼
複製程式碼手寫promise
這裡不舉例了 掘金上有很多很好的手寫promise的文章。
複製程式碼script標籤裡 defer和async的區別
defer和async雖然都是非同步載入js 但是async是載入完js後立馬執行 而defer要等待之前全部渲染完再去進行執行。
複製程式碼手寫深度遍歷節點
function traverseDF(node,nodeList){
if(node){
nodeList.push(node);
for(var i=0;i<node.children.length;i++){
traverseDF(node.children[i],nodeList);
}
}
}
複製程式碼主要考察的是對遞迴和高階函式的一個應用。官方概念是“變數可以指向函式，函式的引數能接收變數，那麼一個函式就可以接收另一個函式作為引數，這種函式就稱之為高階函式” 常見的map reduce等等就是高階函式。
簡介下promise.all
下面這些拷貝自木易楊大佬的github
Promise.all()方法將多個Promise例項包裝成一個Promise物件（p），接受一個陣列（p1,p2,p3）作為引數，
陣列中不一定需要都是Promise物件，但是一定具有Iterator介面，
如果不是的話，就會呼叫Promise.resolve將其轉化為Promise物件之後再進行處理。
使用Promise.all()生成的Promise物件（p）的狀態是由陣列中的Promise物件（p1,p2,p3）決定的；
1、如果所有的Promise物件（p1,p2,p3）都變成fullfilled狀態的話，生成的Promise物件（p）也會變成fullfilled狀態，
p1,p2,p3三個Promise物件產生的結果會組成一個陣列返回給傳遞給p的回撥函式；
2、如果p1,p2,p3中有一個Promise物件變為rejected狀態的話，p也會變成rejected狀態，第一個被rejected的物件的返回值會傳遞給p的回撥函式。
Promise.all()方法生成的Promise物件也會有一個catch方法來捕獲錯誤處理，但是如果陣列中的Promise物件變成rejected狀態時，
並且這個物件還定義了catch的方法，那麼rejected的物件會執行自己的catch方法。
並且返回一個狀態為fullfilled的Promise物件，Promise.all()生成的物件會接受這個Promise物件，不會返回rejected狀態。
複製程式碼es6 class和建構函式的區別
1.class 宣告會提升，但不會初始化賦值。Foo 進入暫時性死區，類似於 let、const 宣告變數。
2.class 宣告內部會啟用嚴格模式。
3.class 的所有方法（包括靜態方法和例項方法）都是不可列舉的。
4.class 的所有方法（包括靜態方法和例項方法）都沒有原型物件 prototype，所以也沒有[[construct]]，不能使用 new 來呼叫。
5.必須使用 new 呼叫 class。
6.class 內部無法重寫類名。
7.ES5 和 ES6 子類 this 生成順序不同。ES5 的繼承先生成了子類例項，再呼叫父類的建構函式修飾子類例項，ES6 的繼承先生成父類例項，再呼叫子類的建構函式修飾父類例項。這個差別使得 ES6 可以繼承內建物件。
複製程式碼效能優化方面
webpack優化
1.外部引入模組(CDN)
2.按需引入
3.tree-shaking
4.開啟gzip
複製程式碼其餘的優化
1.前面提到的強制快取與協商快取
2.減少不必要的http請求 對資源進行合併
3.使用骨架屏提升使用者體驗
4.前面提到的defer延遲載入
5.懶載入(專案中沒用到 所以面試的時候我很少被問到這個)
複製程式碼總結
無論什麼公司，面試都是按照你的簡歷來的，簡歷上寫了什麼就會被問到什麼這是必然的，好的前端基礎+優秀的專案經驗 會對面試有很大的提升。其次，面試的時候一定要保持自信，不要被面試官的 “你確定麼”這種話語左右，你越不自信，印象分會越差，會就是會，不會也不要不懂裝懂。希望即將秋招的各位一起共勉。
最後感謝掘金給我分配了一個可愛的女朋友，順便幫剛畢業的女朋友發個求職吧，上海有招剛畢業的應屆生的團隊請聯絡我。