一年經驗前端 杭州幾家二線廠面試題梳理

交代下背景

在掘金羣比較活躍的羣友應該都認識我，我就是那個天天吹水的管理員，最近遇上秋招之際，畢業剛滿一年，就打算試下杭州的幾家廠，由於自己也是二線廠出身，因此投的也都是二線廠以上，拿到的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

一、客戶端請求中增長Accept-Encoding: gzip表示客戶端支持gzip；

二、服務端接收到請求後，將結果經過gzip壓縮後返回給客戶端並在響應頭中增長Content-Encoding:gzip 表示響應數據已被壓縮

三、客戶端接收請求，響應頭中有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攻擊原理

第1、XSS反射型攻擊，惡意代碼並無保存在目標網站，經過引誘用戶點擊一個連接到目標網站的惡意連接來實施攻擊的。

第2、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）決定的；

一、若是全部的Promise對象（p1,p2,p3）都變成fullfilled狀態的話，生成的Promise對象（p）也會變成fullfilled狀態，
p1,p2,p3三個Promise對象產生的結果會組成一個數組返回給傳遞給p的回調函數；
二、若是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.懶加載(項目中沒用到 因此面試的時候我不多被問到這個)
複製代碼

總結

不管什麼公司，面試都是按照你的簡從來的，簡歷上寫了什麼就會被問到什麼這是必然的，好的前端基礎+優秀的項目經驗 會對面試有很大的提高。其次，面試的時候必定要保持自信，不要被面試官的 「你肯定麼」這種話語左右，你越不自信，印象分會越差，會就是會，不會也不要不懂裝懂。但願即將秋招的各位一塊兒共勉。

最後感謝掘金給我分配了一個可愛的女友，順便幫剛畢業的女友發個求職吧，上海有招剛畢業的應屆生的團隊請聯繫我。