原文鏈接:https://juejin.im/post/5e664bdd6fb9a07cd80f3192
個人近期面試情況
今年二月以來，我的面試除了一個用友的，基本其他都被斃了，可以說是非常殘酷的。其中有很多自己覺得還面的不錯的崗位，比如百度、跟誰學、好未來等公司。說實話，打擊比較大。
情況基本上是從三月開始好起來的，這個時間點，可能疫情快過去了，國家也開啓了接近40萬億的基礎建設計劃，在這個時間斷，面試的幾個代表性的公司，包括騰訊、餓了麼、寶寶樹、曠世科技等等，基本都成了。
最終，就在三月9號，餓了麼剛給我確認了p7的職位。也算自己到了另一個奮鬥的階段了。對自己的經歷，做一個面試總結。
我的面試準備
面試其實我是屬於一邊面試，一邊準備的過程，但是無論如何，一定要做到基礎紮實、比較好的自我介紹，以及描述自己的職業故事。
1、基礎知識的準備
這一塊，其實很重要，很多問題，必須輕鬆的理解，就和呼吸一樣自然。
因爲這一塊的掌握程度，就決定了一個前端工程師，能不能達到高級的程度。
拋磚引玉，比如面向對象、原型鏈、閉包、es6、html5、css3，它們是前端的基礎，需要爛熟於心。比如連閉包都解釋不明白的，真的該好好下功夫在這些基礎上。。
對於前端框架，基本的特性，生命週期、組件、傳值交互、路由、redux、vuex等等，基本都沒有使用上的疑惑。比如面試官可能問，actions 和 mutations 有什麼區別之類的。
這一塊，能問的問題幾乎是無窮多的，哪怕同一個知識點，問法不一樣，不真正理解的話，實在是過不去高級那一關。
2、好的自我介紹
自我介紹，很多人其實做的不好，其實這是面試官對面試者的第一印象。
如果我是一個面試官，我基本能從自我介紹中，得知這麼一些信息：
1、這個人是不是一個邏輯清晰的人？
2、這個人的性格是積極向上的，還是稍顯自卑的？
3、這個人能不能很好的表達自我？
這些問題很重要，按照這個思路，其實你反過來就可以向面試官表現自我。
1、學校、專業
2、技術棧
3、職業履歷
4、最近一家公司的貢獻
千萬不要和麪試官說，和產品、後臺很好的配合，完成公司的項目之類。因爲完全是廢話！
自我介紹一般是兩分鐘左右，你確定你能兩分鐘，把上面四個問題給面試官講清楚？並且你還要突出一些重點，比如說，我比較擅長react，做過XXX優化之類，有過XX年的項目經驗之類。
自我介紹的本質：用最短的話，向面試官灌輸你的優點，並且讓面試官在當前大致的範圍內考察你。如果你說你熟悉vue，一般面試官都會問vue相關的多一點，應該不會和你死磕react。
3、如何“講故事”
這是一個比較重要的點。重要的是，這個故事要有看點，表示了你和其他人不一樣在哪。
比如我，我會說，我之前在公司，做了我們前端的項目標準化工作，做了我們內部的組件庫建設，集成了我們自己的腳手架工具。
這是我覺得，我和其他大多數前端不一樣的點，面試官的焦點就會集中在，什麼是項目標準化，定義了哪些維度的標準？組件庫的建設，解決了什麼問題？腳手架的出現，又解決了什麼問題？
任何一個人，都是唯一的，任何一個項目，也是不同的，作爲面試者的我們，重要的是，要把這些重點要素提取出來，形成自己的“故事”。
比如，我獨立承擔了公司的xxx項目。遇到了哪些挑戰，我如何在不利的條件下成長起來的。
比如，我通過xxx渠道，研究了多少個項目的架構工作。
一定要相信，因爲你，什麼才發生了變化。其實大多數人是一個被動的狀態，不知道自己有什麼用，自己在團隊中的定位，自己的職責是什麼。在工作中，我希望每個人相信自己的是有用的，然後尋找你可以發力的點，去做真正的改變。如果你在找工作，那就好好思考，自己確實在團隊中，承擔了什麼。
面試該注意的點
面試的核心是什麼？一定要記住，那就是溝通！而我們做技術的，其實最大的硬傷，多半是溝通，至少對於我自己，就是有這個問題的。
溝通的意義，一方面，是你要讓別人聽懂你表達的東西；另一方面，是你要聽懂別人的話。
1、說話得注意，讓別人懂你
直接舉個例子，我在面試美團的時候，說話一直結巴，其實我也不知道爲什麼，平時說話都是正常的，在特殊的場合，就出現這個問題，雖然把話說完了，但是顯然，美團第一面，就pass了。當時是在家中視頻面試，我的室友，不好意思直接說我，就給我錄音，我聽了10分鐘左右，確實不盡人意。。
我聽了10分鐘的錄音，給我自己的評價就是，說話都費勁，以後一起工作，那還不把我累死。
以後，所有的面試，我都把關注點，從我如何說，變成了，如何讓別人很愉快的聽懂我說的話。
第一、我向面試官說的所有的話，都是成體系的。
第二、我向面試官說的所有的話，都是邏輯清晰的。
第三、我向面試官說的所有的話，我都先停頓兩秒以上，思考清楚了再說話。
當然了，這一塊，可能是我個人的特例，但是基本的語句通暢、邏輯清晰，在程序員中，做到的應該不多。
2、學會傾聽，讓你懂別人
很多情況下，其實面試官在表達的時候，很可能我們自己沒聽懂面試官的意思，這個時候，就會特別的尷尬。
我一般會這麼做，我會說，剛纔您說的問題，我來描述一遍xxxxxxx。描述完之後，你再問面試官，您表達的是這個意思嗎？一般而言，面試官會進行更詳細的舉例和描述。
我在面試餓了麼的時候，二面的面試官，一開始就問了一個業務比較複雜的問題，所以一開始，我其實完全沒明白，面試官說的是什麼東西，但是我通過自己的方式，引導面試官說的更多，然後到某個程度，達成一個共識，這就是比較愉快的一個交流。
無論是學會說話，還是學會傾聽，其實核心的問題，就是讓雙方的交流，在一個頻道上，因爲對於領導，面試面試，其實就是找同類人！
必會的面試題目
前端一些核心的經典問題，感覺永遠都不會過時，反正我個人遇到的頻率非常高，不過個人不會詳細解讀這些問題，只做一個拋磚引玉。
1、前端瀏覽器輸入URL後發生什麼？
普通前端會回答，dns解析，獲取html文件，解析DOM，渲染頁面這麼一個流程。
其實過程複雜的很，比如一個dns解析階段，它分爲哪幾步？解析的ip一定是一樣的嗎？每次都會進行dns解析嗎？可能還需要了解cdn託管的一些問題。
比如html文件獲取，它是如何傳輸的？如何建立鏈接的？三次握手、四次揮手是什麼？http協議端口是什麼？爲什麼直接能訪問一個html文件？
....
2、前端性能優化？
大多數前端，基本會說，減少http請求、壓縮合並js以及css、圖片懶加載的技術、防止迴流和重繪、css放頭部、js放底部。
以上的說法對嗎？完全正確！可是在這個過程中，我覺得缺少一種思考。
比如減少http請求，可以從哪些維度上減少呢？比如合併http請求？比如合併資源？比如圖片懶加載？http還有其他維度的優化嗎？cookie優化？http請求和資源加載的區分優化？在webview中呢？和普通的瀏覽器的優化技術，又有什麼區別？
......
3、前端如何做性能監控、異常監控？
性能監控，異常監控，基本在小公司，是沒有實踐基礎的，可是在差不多的大廠中，他們會關注這個問題。
首先是性能監控，應該從這麼幾個維度來說：一個是http的方面，在後端log日誌，流入kafka，然後在kafka消費數據，可以準確的監控到哪些接口有異常？異常率是多少？另一個方面，是前端的 Performance 的api，在用戶的實時使用的過程中，就會產生數據，這樣就能實現頁面性能監控。
前端異常監控，首先要明白什麼是異常，html、css這些東西，無非就是一個展示的問題，還不至於讓頁面白屏的事情發生，所謂的異常監控，其實就是js的異常監控。在前端領域，window.onerror是進行js異常的監聽事件。並且要知道，它在IE中，是不支持的，所以IE的監控，要使用try catch 的方式進行捕獲，比如我們可能還要注意到，遇到異步的時候，這個如何做try catch的異常捕獲。
最後一個是前端sdk埋點，直接開發一個js文件，統計用戶的UV/PV分析等等，比如用戶的轉化率之類的，這一塊個人沒有什麼特別的實踐，各位可以在網上百度看看。
4、前端安全方面
這是一個高級前端必問的問題，說的是一個前端對整個前端安全的系統認知。
我們必須理解這麼幾個方面：sql注入、xss、csrf、cookie安全、密碼安全等等。
sql注入，要理解sql注入的場景，它的原理是什麼，當前的數據庫的解決方案是什麼？
xss攻擊，常見的攻擊場景，什麼類型的網站容易被xss攻擊，整個流程的原理是什麼？
csrf攻擊，其實就是一個釣魚網站，要理解爲什麼會收到攻擊，應該採取什麼策略進行防禦。
cookie安全，要理解爲什麼用token，優勢等。
密碼安全，主要是用戶登陸，用戶數據提交，加密，存入數據庫的一整個流程。
其次，其實還有http和https的問題等等。
5、http、https、http1.0、1.1、2.0、3.0的區別
http這一塊，其實是一個非常複雜的體系，要深挖的東西特別多。
http進行非對稱加密，得到https，這個過程是怎麼樣的？什麼是CA證書？整個網站進行驗證的流程是什麼？
http各個版本的區別是什麼？解決了哪些問題？比如頭部縮減的優化，那你瞭解這個優化的具體策略嗎？縮減了什麼？又增加了什麼？要深挖細節。
http的底層協議？tcp/ip協議的三次握手，四次揮手，具體是怎麼通信的？什麼叫滿啓動？甚至延伸到整個網絡協議的領域，什麼是socket？udp是幹什麼的？dns解析？ftp？以及不常用的其他協議？
如果再進行擴展，計算機網絡的7層結構？每一層做了什麼事情？計算機組成原理，如何解析我們的代碼等等。
......
深度解讀
這一部分，我大致分了幾個模塊，源碼、可視化、跨平臺、工程化、混合app交互、設計模式，其實每一個都值得前端去研究。
作爲個人，其實也算是我定了幾個方向，自己以後要努力的地方。
1、源碼
最好要讀一讀某個框架的源碼，最不濟，也看看別人寫的源碼解讀的文章，現在的趨勢，基本是以react、vue爲主。
以vue爲例，你得懂vue框架的整個週期，比如vue的初始化，發生了什麼？vue的模板解析，是如何進行的？如何形成AST？render函數的生成？什麼是依賴收集？什麼是patch？數據更新策略等等。
你也要懂得在這個過程中，混入mixins、$options，vuex、router他們各自如何通過這些api，實現各自的功能？
源碼的維度，可以試着從vue的體系、react體系、loadash、zepto這些庫中下手，因爲我們就是從這些框架以及js庫，走過來的。
2、可視化
地圖、echats、canvas、webgl、d3.js、three.js！
上面是個人想要研究的關於可視化的一個個主題，雖然可視化不是本人的專長，可是因爲之前在地圖相關的公司待過，也算是沾了可視化的一點光。在面試餓了麼的過程中，就提到了一個特殊的使用場景，就是關於地圖的線路繪製，大批量數據的推送，以及性能相關的問題。
以後，普通前端的技能，比如vue、react等等，大家都會，沒有什麼差異化的競爭，前端市場趨於飽和，更需要的是在某些方面專精的人才。
3、跨平臺
flutter、react-native、weex、electron
這是目前市場上，針對跨平臺的一些解決方案，每一個框架，大致方向上，都解決了一定程度上的多端開發能力。
首先需要明白的是，多端開發並不是萬能的，也有一些我們開發中的痛點，無論rn、還是weex，都是給前端提供一些特殊的組件，實現開發能力。但是業務是多樣的，需要也是多變的，對於沒有提供的組件，或者api，我們前端開發人員，有些功能是沒辦法實現的。
對於多端框架，更重要的是理解層面的東西，比如electron，就是要理解它的本質，就是使用node塑造一個桌面應用的容器，然後內部是一個webview。
從面試的角度，面試官重視的不是這個東西怎麼用的問題，一般會問一些內部原理，比如小程序和公衆號的對比？底層實現方式？比如rn的編譯解析過程是什麼？如何把js編譯爲真正的ios、android應用。比如flutter的渲染機制，和rn這些渲染方式有什麼不同？和普通的web網頁又有什麼區別？
跨平臺技術，flutter最近比較火，從找工作的角度，其實可以學學。electron這些桌面應用，本身不難，但是學過和沒有學過，其實本身就是一種差異。
4、工程化
工程化這一塊，是個人比較感興趣的一個方向。自己也做過一些實踐，但是隻能說是工程化中的冰山一角。
拋磚引玉，提一些我們可以探討的點。
1、前端項目標準？
表現爲庫的選擇？文件劃分目錄的規定？pc、mobile多端實踐？ssr方案集成？
2、組件庫集成？
組件庫建設的目的？npm包的發佈？
3、腳手架工具？
webpack編譯優化？webpack打包構建優化？自我腳手架的工具使用？
4、git提交規範commit-msg？代碼檢查規範eslint？
5、前端性能監控？前端異常監控？前端用戶埋點sdk？
6、rap？jenkins？
5、混合app交互
jsBridge、性能提升方面、x5內核
算是一個小的模塊吧，我們得明白，jsBridge是如何做到h5和原生應用的交互？
ios和h5的交互通信？window.webkit?是否同步？
android和h5的交互？細節和ios有什麼不同？
webview在性能提升方面，可以做哪些？什麼是離線包？
騰訊x5內核的優勢是什麼？我們用了x5內核，可以避免什麼問題？
6、設計模式
最後談談設計模式，算是一個高頻的面試題。
我們至少要知道以下這些設計模式的功能、代碼實現、使用場景問題。
單例模式、原型模式、工廠模式、觀察者模式、策略模式、代理模式等等。
最後祝大家面試愉快。