最近有一篇阿里盒馬前端面試題被各大社區轉載，而且據稱這是阿里校招面試題，我看完以後，簡直驚呆了，打死都不信。今天特意針對他們發的一面，把對應的答案整理了一些。
請先做個自我介紹我是河畔一角，11年畢業，畢業後先從事JAVA方向開發，後在13年轉為前端。13年主要從事XXX，經過3年的時間磨練，讓我對前端有了全新的認識。16年進入到樂視，從事XXX，17年進入到松果出行，從事XXX，並從0搭建前端團隊，並主導各個前端一線項目研發。
提交表單，常用的方法有哪些？應用層，通信層發生了哪些過程？實際上可能考察輸入url後請求響應過程
POST和GET的區別，列舉一下GET通過url明文傳輸，POST通過body傳輸，本身都不安全，因為HTTP就是明文傳輸。HTTP請求Content-Type值：application/json、application/x-www-form-urlencoded、multipart/form-data
http常見的響應碼，拒絕服務資源是哪個?狀態碼作用1.x已接收請求，正在處理2.x請求成功3.x重定向，需要進一步處理4.x客戶端錯誤5.x服務端錯誤常見狀態碼：
304 Not Modified（通常是在協商緩存中表示本次內容未修改）403 Forbidden - 請求被拒絕（本題答案）500 Inter Server Error - 服務端異常503 Server Unavailable - 服務不可用前端鑑權了解過嗎？鑑權主要分為四種：
HTTP Basic Authentication (HTTP基本認證)我們普通網站常用的認證就是session-cookie的方式，用戶向服務端發生請求，服務端會創建session並保存相關身份信息，並向客戶端下發一個sessionId,大家如果用心的話，會發現跟JAVA交互的時候，瀏覽器會有一個JSESSION_ID，跟PHP交互的時候，會有一個PHPSESSION_ID;後面的每次請求，客戶端都會自動帶上這個cookie跟服務端通信。
實際上大家要明白每一種方式的作用；SSO主要用來做單點登錄；OAuth主要用來做第三方網站授權；JWT就是一種便於擴展的跨域認證解決方案，通常會考察這個。
關於JWT我這兒不展開講，給大家推薦阮一峰的講解：http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
OAuth2.0原理講原理主要是讓你對這個過程做梳理，並不要求對源碼過程做剖析，所以可以通過一個簡單的流程來進行回答。我通過微信的授權登錄來給大家做講解：OAuth2.0是一個開源的授權認證方案。當我們登錄一個網站時，如果想要通過微信做授權登錄，從而獲取微信的用戶信息，正常情況肯定是不允許，通過微信開放的OAuth2.0我們可以做授權認證。我們點擊自己網站的微信按鈕，跳轉一個連結，這個連結比如是：https://open.weixin.qq.com/connect/oauth2/authorize?會跳轉到微信那邊去讓用戶同意授權，用戶同意以後，會重定向回來並攜帶一個code，此code是微信下發的臨時憑證。開發者拿到此code以後，就可以獲取access_token，根據下發的token，我們才能有權限獲取其它接口信息。
開發者根據code獲取微信access_token回答的時候，能夠把這個過程描述清楚就好，不要過多解析源碼。更進一步了解OAuth2.0可參考阮一峰教程：http://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html
說說https的內在原理，ssl握手過程https實際上是在應用層(http)和傳輸層(tcp)之間加了一層安全套接層(ssl).
服務端解密隨機值，把響應內容通過私鑰進行對稱加密，傳輸給客戶端客戶端發送隨機數1，支持的加密方法（如RSA公鑰加密）伺服器用私鑰解密這個隨機數3，用加密方法計算生成對稱加密的密鑰給客戶端接下來的報文都用雙方協定好的加密方法和密鑰，進行加密大家如果要了解更多ssl詳細過程，可參考阮一峰教程http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html
為什麼要用非對稱密鑰，pms呢？公鑰怎麼了？非對稱加密相對更安全，通過公鑰解密後，只有私鑰才能解密，而對稱加密只需要一個密鑰就能加密和解密。
PMS(pre master secret)，SSL協議並不信任每個主機生成的隨機數，因此PMS也有可能被推測出來，所以需要客戶端、服務端和PMS三個隨機數一同生成密鑰才更安全。
關於SSL和HTTPS大家可能看不懂，我建議直接回答不知道。
說一說響應式布局吧？響應式布局是指同一個網站在不同屏幕尺寸下顯示不同的布局。它跟自適應不同，自適應是同一個網站在不同設備上自適應(比如自適應不同的Android和iPhone設備)。傳統的做法會針對PC、移動端各做一套項目，而響應式會同時支持PC和H5。響應式方案：
css媒體查詢根據尺寸來定義不同樣式，比如600/900/1200/1600rem是根據html的根元素來決定元素大小的，在自適應布局中應用非常廣泛。c3中新增視窗，1vw代表1%的寬度，通常結合rem一起使用。Bootstrap/Antd/ElementUI中的柵格布局，本身也是一種響應式。
響應式背後的瀏覽器原理你知道嗎？根據瀏覽器或設備的解析度可以計算獲取到相應的尺寸，通過不同的尺寸可以動態的修改html元素或者盒子在瀏覽器中的大小，從而實現響應式。
旋轉動畫css，怎麼去做？transition:all 1s linear;
transform:rotate(360deg);animation:rotate 5s infinite;
@keyframes rotate
{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
dom樹和cssom樹原理也說一下吧大家可以參考我這篇文章，應該能找到答案！ 從輸入URL後前端的知識爆炸，你懂多少？
為什麼link要在前，script標籤要在後面呢？原理link標籤並不會阻塞DOM解析，只會阻塞DOM渲染，而script加載js過程會阻塞DOM渲染和CSS加載，所以為了更好的用戶體驗和更優的前端性能，我們通常把link放前面，script放後面。js之所以阻塞DOM渲染是因為JS本身是單線程，在執行的過程中只能從上到下依次運行，異步任務除外。
script前加async和defer也不會阻塞。
場景題：保證瀏覽器不受腳本的惡意攻擊主要考察前端漏洞：XSS攻擊和CSRF攻擊
XSS主要指跨站腳本攻擊，一般會偽造網站，竊取cookie，也包括一些sql注入和html注入等；防禦方法：
服務端可設置cookie為httponly，前端無法讀取，只有服務端可讀取CSRF主要指跨站請求偽造，通過向A中注入連結，使用戶跳轉到B中並獲取A站的cookie，通過cookie向A發送請求，以達到攻擊目的。防禦方法：
EventLoop理解此處並非一兩句話能講清楚，建議大家到掘金看完整版https://juejin.im/post/5c72307551882562e74812dc
場景題：這裡有cat和animal子類和父類，如何進行es5繼承，至少說出5種Cat.prototype = new Animal()function Cat(){
Animal.call(this);
}function Cat(){
Animal.call(this);
}
Cat.prototype = new Animal()function Cat(name){
Animal.call(this,name);
}
function Cat(name){
Animal.apply(this,[name]);
}
說說你項目做的Vue spa首屏優化吧Vue-Router路由懶加載（import/require）如果使用了UI庫，採用按需加載(babel-plugin-component/import)使用link標籤的rel屬性設置 prefetch（這段資源將會在未來某個導航或者功能要用到，但是本資源的下載順序權重比較低，prefetch通常用於加速下一次導航）、preload（preload將會把資源的下載順序權重提高，使得關鍵數據提前下載好，優化頁面打開速度）後面還有兩道暫時忽略。
以上是阿里盒馬前端面試的題目和我整理出來的答案，應該對正在找工作的有幫助。
當然後面還有二面、三面、四面題目，後面有時間會繼續給大家整理答案出來！