前22年的Loser，後4年和本身賽跑的人 | 最慘前端面經

跳槽緣由

前東家部門是作旅遊的，在此次疫情打擊下，基本玩完。

因而我半休半遠程三個月後，在4月底領了裁人便當。至今，差很少找了兩個月的工做。

本篇不是標準的面經，想從中獲取大廠跳槽經驗的能夠歇一歇。

更多的是想講一下絕大多數如你如我，學歷渣技術差，沒大廠經驗的前端如何走。

1. Offer狀況

我的比較懶，一週可能就面2～3家，只約下午。部分星期沒有面試邀約。

囿於學歷+公司，兩招聘軟件都被我用成「Boss直拒」和「拉鉤上吊」

粗略算了下，面了約12家大中小型公司，僅4家Offer，狀況分別爲：

• 某遊戲公司
• 某小公司
• 風變編程
• 金山系某司

做爲一個社交孤兒，在本次跳槽歷程中也是發現本身很多的問題，且聽我慢慢道來。

本篇雖然有點喪，但大家能夠從中找到對應的問題（我幾乎犯了全部面試的低級錯誤）

部分的公司有：360奇舞團，某上市遊戲公司，風變編程，金山系某司，阿里。

2. 高頻面試題彙總

面過的公司有點多，一併說了吧。

1. 從「在瀏覽器輸入域名」到「頁面靜態資源徹底加載」的整個流程

見於：某遊戲公司、小鵝通、阿里一面、另外三家小公司

這問題的答案，我結合了yck《前端面試之道》和 瀏覽器原理專欄：

整個過程能夠分爲幾步：

1. 用戶輸入

   當用戶輸入關鍵字並鍵入回車以後，這意味着當前頁面即將要被替換成新的頁面，不過在這個流程繼續以前，瀏覽器還給了當前頁面一次執行 beforeunload 事件的機會，beforeunload 事件容許頁面在退出以前執行一些數據清理操做，還能夠詢問用戶是否要離開當前頁面。

2. URL 請求過程

   首先，網絡進程會查找本地緩存是否緩存了該資源。

   若是有緩存資源，那麼直接返回資源給瀏覽器進程；若是在緩存中沒有查找到資源，那麼直接進入網絡請求流程。這請求前的第一步是要進行 DNS 解析，以獲取請求域名的服務器 IP 地址。若是請求協議是 HTTPS，那麼還須要創建 TLS 鏈接。

   • 其中，DNS也有幾步緩存：瀏覽器緩存，hosts文件，
   • 若是本地域名解析服務器也沒有該域名的記錄，則開始遞歸+迭代解析
   • TCP三次握手，HTTP。TLS握手，HTTPS。

   接下來就是利用 IP 地址和服務器創建 TCP 鏈接。鏈接創建以後，瀏覽器端會構建請求行、請求頭等信息，並把和該域名相關的 Cookie 等數據附加到請求頭中，而後向服務器發送構建的請求信息。

   數據在進入服務端以前，可能還會先通過負責負載均衡的服務器，它的做用就是將請求合理的分發到多臺服務器上，這時假設服務端會響應一個 HTML 文件。

   首先瀏覽器會判斷狀態碼是什麼，若是是 200 那就繼續解析，若是 400 或 500 的話就會報錯，若是 300 的話會進行重定向，這裏會有個重定向計數器，避免過屢次的重定向，超過次數也會報錯。

   瀏覽器開始解析文件，若是是 gzip 格式的話會先解壓一下，而後經過文件的編碼格式知道該如何去解碼文件。

3. 準備渲染進程

   默認狀況下，Chrome 會爲每一個頁面分配一個渲染進程，也就是說，每打開一個新頁面就會配套建立一個新的渲染進程。

4. 渲染階段

   文件解碼成功後會正式開始渲染流程，先會根據 HTML 構建 DOM 樹，有CSS的話會去構建 CSSOM 樹。若是遇到 script 標籤的話，會判斷是否存在 async 或者 defer ，前者會並行進行下載並執行 JS，後者會先下載文件，而後等待 HTML 解析完成後順序執行。

   若是以上都沒有，就會阻塞住渲染流程直到 JS 執行完畢。

CSSOM 樹和 DOM 樹構建完成後會開始生成 Render 樹，這一步就是肯定頁面元素的佈局、樣式等等諸多方面的東西

在生成 Render 樹的過程當中，瀏覽器就開始調用GPU 繪製，合成圖層，將內容顯示在屏幕上了。

2. eventloop機制，promise的實現和靜態方法、async實現。

這題聊起來可就大了，進程，線程，協程。部分還會配以那道最經典的 eventloop題目。

見於：阿里一面、小鵝通、頭條一面、360一面、風變編程、以及其它四家公司，必考。

Event Loop 是什麼？

JavaScript的事件分兩種，宏任務(macro-task)和微任務(micro-task)

• 宏任務：包括總體代碼script，setTimeout，setInterval
• 微任務：Promise.then(非new Promise)，process.nextTick(node中)
• 事件的執行順序，是先執行宏任務，而後執行微任務，這個是基礎，任務能夠有同步任務和異步任務，同步的進入主線程，異步的進入Event Table並註冊函數，異步事件完成後，會將回調函數放入Event Queue中(宏任務和微任務是不一樣的Event Queue)，同步任務執行完成後，會從Event Queue中讀取事件放入主線程執行，回調函數中可能還會包含不一樣的任務，所以會循環執行上述操做。

Promise 的含義

Promise是一個異步編程的解決方案，簡單來說，Promise相似一個盒子，裏面保存着在將來某個時間點纔會結束的事件。

三種狀態：

• pending：進行中
• fulfilled ：已經成功
• rejected ：已經失敗 狀態改變，只能從 pending 變成 fulfilled 或者 rejected，狀態不可逆。

async實現和經常使用方法

async 函數的實現原理，就是將 Generator 函數和自動執行器，包裝在一個函數裏。

Generator 函數是協程在 ES6 的實現，最大特色就是能夠交出函數的執行權（即暫停執行）。

協程是一種用戶態的輕量級線程， 協程的調度徹底由用戶控制。協程擁有本身的寄存器上下文和棧。協程調度切換時，將寄存器上下文和棧保存到其餘地方，在切回來的時候，恢復先前保存的寄存器上下文和棧，直接操做棧則基本沒有內核切換的開銷，能夠不加鎖的訪問全局變量，因此上下文的切換很是快。

3. Vue 和 React 之間的區別

摘自yck《前端面試之道》

1. Vue 的表單可使用 v-model 支持雙向綁定，相比於 React 來講開發上更加方便，固然了 v-model 其實就是個語法糖，本質上和 React 寫表單的方式沒什麼區別。

2. 改變數據方式不一樣，Vue 修改狀態相比來講要簡單許多，React 須要使用 setState 來改變狀態，而且使用這個 API 也有一些坑點。而且 Vue 的底層使用了依賴追蹤，頁面更新渲染已是最優的了，可是 React 仍是須要用戶手動去優化這方面的問題。

3. React 16之後，有些鉤子函數會執行屢次，這是由於引入 Fiber 的緣由，這在後續的章節中會講到。

4. React 須要使用 JSX，有必定的上手成本，而且須要一整套的工具鏈支持，可是徹底能夠經過 JS 來控制頁面，更加的靈活。Vue 使用了模板語法，相比於 JSX 來講沒有那麼靈活，可是徹底能夠脫離工具鏈，經過直接編寫 render 函數就能在瀏覽器中運行。

5. 在生態上來講，二者其實沒多大的差距，固然 React 的用戶是遠遠高於 Vue 的。

6. 在上手成本上來講，Vue 一開始的定位就是儘量的下降前端開發的門檻，然而 React 更多的是去改變用戶去接受它的概念和思想，相較於 Vue 來講上手成本略高。

4. Vue 3.0面試題

見於：360一面、風變編程，預計下半年必考。

1. Vue3.0都有哪些重要新特性？

• 建議往Composition API和Tree-shaking方面答，對應比較React Hooks和webpack 的Tree-shaking

2. Vue3.0 對比Vue2.0的優點在哪？

3. Vue3.0和React 16.X 都有哪些區別和類似處？

• 能夠更新下你的橫比答案了，重點突出二者開始相互借鑑，互有優勢。記得誇誇Vue3.0抄過來，卻作得更好的部分。

4. Vue3.0是如何實現代碼邏輯複用的？

• 能夠先對比Composition API和mixin的差別，並凸顯出Vue2.0那種代碼上下反覆橫跳的缺點。

以上答案基本能夠在下面兩篇博客裏找到：

《抄筆記：尤雨溪在Vue3.0 Beta直播裏聊到了這些…》

《Vue3 究竟好在哪裏？（和 React Hook 的詳細對比）》

5. React高頻面試題

1. React 16.X 的Fiber原理

2. setState原理，何時是同步的？

3. React Hooks相對高階組件和Class組件有什麼優點/缺點？

4. React 16.X的生命週期，以及爲什麼要替換掉之前的？

5. React跨平臺的實現原理。

6. 說一說redux，以及比flux先進的緣由。

平心而論，若是面試前未要求技術棧，建議往Vue方向引。React的面試題要高一兩個難度....

6. HTTP高頻面試題

見於：阿里一面、頭條一面、360一面、風變編程、以及其它四家公司，必考。

1. 講一講強緩存和協議緩存？

2. HTTP/2.0 都有哪些特性？頭部壓縮的原理？

3. TCP三次握手和四次揮手？以其存在乎義。

4. 狀態碼。302.304.301.401.403的區別？

5. 狀態碼。204和304分別有什麼做用？

6. HTTP和HTTPS握手差別？

7. CSRF 跨站請求僞造和XSS 跨站腳本攻擊是什麼？

8. 你是如何解決跨域的？都有幾種？

9. nginx 瞭解嗎？你都用來作什麼？

10. 有了【Last-Modified，If-Modified-Since】爲什麼還要有【ETag、If-None-Match】

我總結過一張xmind圖，歡迎到我公衆號裏自取。

7. JS/CSS高頻基礎問題

見於：阿里一面、頭條一面、風變編程、以及其它多家公司，很是高頻。

1. 彈性盒子中 flex: 0 1 auto 表示什麼意思？

2. 箭頭函數能夠用new實例化嗎？聊聊this的指向問題。

3. 聊一聊原型鏈。

4. 垃圾回收中的堆和棧的區別。

5. 0.1 + 0.2 != 0.3背後的原理？

6. TypeScript用過嗎？聊聊你對TypeScript的理解？

7. 圖片懶加載的原理。

8. call、apply和bind方法的用法以及區別

9. Webpack原理，以及經常使用插件

8. 項目及優化相關

1. 項目中遇到的難點，以及解決思路。

2. 你是如何作Web性能優化的？首屏渲染如何處理？

這個問題很大，我有個簡略版，回答思路引自專欄《 瀏覽器工做原理與實踐》：

主要圍繞着兩個階段：加載階段 和 交互階段

加載階段：

1. 減小關鍵資源的個數和大小（Webpack拆/合包，懶加載等）
2. 減小關鍵資源RTT的時間（Gzip壓縮，邊緣節點CDN）

交互階段：

1. JS代碼不可佔用主線程過久，與首屏無關的腳本加上延後處理（aysnc/defer）屬性，與DOM無關的交給Web Worker。
2. CSS用對選擇器（儘量綁定Class或Id）,不然會遍歷屢次。
3. 首屏渲染中若是有動畫，加上will-change屬性，瀏覽器會開闢新的層處理（觸發合成機制）
4. 避免強制同步佈局，避免佈局抖動。
5. 圖片懶加載（有四種方式）

3. 埋點數據上報的方案作過嗎？

4. 前端架構思考，你是如何考量部門的技術棧的？

5. 前端重構思考，老項目在新業務緊急與重構技術債務間如何衡量輕重？

9. 全鏈路以及DevOps認知

因爲我第二家公司部門是作DevOps平臺，有些與前端無關的面試題。

1. 單元測試作過嗎？你是怎麼作的?

2. docker 準備流程？

3. DevOps平臺關鍵功能點？

4. 自動化測試，CI/CD 的關鍵核心都有哪些？

5. 如何保障DevOps推進？

6. 接口如何作優化？Mock平臺搭建方案？

3. 面試感覺

今年，太難太難了。 @木易楊 大佬的這段話很對：

先來講下大環境，感受很是很差，就一二線互聯網來講招人的沒幾家公司，裁人的、內部調整的、鎖 HC 的確是一大堆，因此你們在換工做的時候必定不要裸辭，風險太大。

今年面試和往年感覺有些不一樣，對於項目的重難點、亮點、我的在團隊中作的貢獻、對項目的 Owner 意識等比較關注，還有就是編程能力的考察會更多一些。

簡單講，就是學歷是第一競爭力，你靠APP投簡歷幾乎沒反饋，內推最靠譜。

其次，若是你僅有大專，能力非高得不可替代（或有大佬願作信任背書），不建議在今年頻繁投大廠（白白浪費寶貴的機會），我就經歷過各類各樣簡歷面掛和HR面掛，部分緣由：

1. 跳槽頻繁（我四年三家，其中兩家是部門解散/倒閉）
2. 博客寫太多，專一力不夠，英語不夠好。
3. 過往項目沒亮點，直接否認。

平心而論，過往跳槽都不是很順利，但今年是真感覺到了天花板：

1. 大公司投簡歷投不進。
2. 小公司薪資知足不了。

充分體會到一句話：

你日後的日子裏，都在爲高中不努力買單。

4. 面試技巧

嚴格說，本面渣不配給一些面試技巧，但有些是我沒作好卻很不錯的東西。建議大家看一看：

1. 付費找人包裝簡歷

若是你一沒學歷，二沒大廠簡歷，簡歷寫得稀爛。

相信我，投遞以前，付個幾十塊找業內大佬幫你改改簡歷，你必定會有更多的投遞反饋。

2. 優秀的自我介紹模版

面試官您好!

1. 我叫***，很開心今天來應聘** 崗位，我有*年***崗位工做經驗，工做內容包括**、*** **等，曾參與***項目/工做，完成**業績，這些經驗鍛鍊了我***能力。除了平常業務開發外，我還在***方面.....

2. 面試以前，我瞭解到我們公司主要從事***業務、***類產 品，屬於行業排名***的企業，我對這個行業很是看好，也想在這行 長期發展！這個崗位要求的** ***能力和經驗，與個人工做經歷很 匹配，相信我可以勝任這個崗位，謝謝！

3. 項目問題提早備好草稿

在我面試一個月左右，發現常常掛在二/三面後，開始審視本身的問題：

1. 回答項目難點，解決方案時太草率，只描述作了什麼，並沒體現方案給項目帶來的進步。
2. 缺少斷點，一個勁兒說不停，缺少對語句的掌控。

說實話，挺難述說的，特別是我這種沒啥大項目經驗，前三年都在作中後臺系統居多，只能從一些細節入手，如下是個人草稿（雖然很爛），供大家參考一下。：

Vue後臺細顆粒權限控制與防多人操做：

1. 通常簡單的權限控制會以角色區別，但開發/運維們想本身設成員，需求1

2. 給他們作了一個權限管理的模塊，但由於DevOps的功能模塊太多，記不住，開發/運維們想要直觀的修改權限，需求2。

3. 考慮到這個痛點，我設計了一個「受權模式」，高權限的擁有切換功能。

   切換後，該模塊下全部的按鈕都會先攔截左鍵點擊，並攔截默認右鍵，多了一個自定義屬性。以及受權/凍結 菜單。受權功能，直接擁有選擇成員的樹控件彈窗。

   使用後會上傳 成員數組 + 自定義屬性。下一次訪問後臺便返回 該自定義屬性 對象 ，以肯定新的權限。

   權限問題解決後，開發/運維們又發現，一個部署/發佈 點擊模塊存在同時操做的人不少。會衝突。需求4。

4. 在多人頻繁觸發模塊，加入了WebSocket管理，實現相似在線文檔的顯示功能，顯示當前操做人，並設屏蔽（同時操做會有顯示姓名，並鎖住）。

   • 簡單版本：當前按鈕 點擊後，後臺設個時間閥值，該段時間內其餘人點擊了就彈出提醒當前有人操做。

   • 複雜版本：多人WebSocket維護一個值。

對應場景：DevOps平臺

5. 和本身賽跑的人

去年寫過一篇年度總結：

我叫「笑妄」，16年地理信息系統專業專科畢業，自學的前端。 目前三年半的經驗，先後工做過幾家中小公司，作過Python爬蟲，也曾在運維開發部混過。前兩年的工做，都在爲生計掙扎，作碼農僅因自身一無所長，看這行工資高，就擠進來了。--- 《前端廢材的自我勸退之路 》

y1s1，我底子不好。1年時才搞懂佈局，2年不會函數return，3年才熟悉React。

入這行以來，一路雖有伯樂，但於前端領域仍單打獨鬥居多。

卻得益於這行，讓我知「井外方覺天地大」。認識優秀的人越多，越想努力，精進。

因此這段時間也沒閒着，看了一些還不錯的書/專欄：

1. 《網絡是怎樣鏈接的》，難，建議筆記。
2. 《DevOps實戰筆記》，有趣，但需有必定的基礎。
3. 《透視HTTP協議》，還不錯，值二刷。
4. 《圖解Google V8》，相對第一本《瀏覽器原理》，水了很多，部分值二刷。
5. 《Nginx核心知識100講》，目前正在看。

如何提升本身的技術競爭力（或收入）？

1. 寫技術博客。「從某種意義上說，博客是我最好的學習筆記和我的名片。在IT行業內，技術博客是瞭解一個開發者最好的方式之一，特別是當你沒有一張足夠份量的文憑或者一段出彩的工做經歷時，你就應該沉下心來好好打磨本身技術，打造本身的博客。往者不可諫，來者猶可追。」 ---@浪裏行舟 《寫技術博客那點事》
2. 立足於前端，放眼全鏈路。今年我原覺得的弱勢DevOps，幫助我搞掂了很多2/3面技術面。
3. 跟對人，這可說是收入漲幅最大的依靠（也是最可遇不可求）。我曾見過某友，從17年9K，到現在50k+的飛躍。不說了，我真的酸。。。

這一路上，個人能力，學歷，背景樣樣不如人，也曾懶惰曾迷茫，但一直都在和本身賽跑，我不服輸：

雖然在你離開學校的時候

全部的人都認爲你不會有出息

你卻沒有所以怨天尤人自暴自棄

....

在那時侯咱們身邊都有一卡車的難題

不知道成功的意義就在超越本身

咱們都是和本身賽跑的人

爲了更好的將來拼命努力

爭取一種意義非凡的勝利

爲了更好的明天拼命努力

前方沒有終點

咱們永不停息

❤️ 看完三件事

若是你以爲這篇內容對你挺有啓發，我想邀請你幫我三個小忙：

1. 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
2. 關注公衆號「前端勸退師」，不按期分享原創知識。
3. 也看看其它文章

閒暇之餘也建了一個「前端人才庫」羣

共同維護了一個面試文檔，近20次面經。

很多人也是如願得到了滿意的Offer：360、騰訊、大搜車、金山等等。想進來討論面試/蹭蹭最新面試題的能夠加我微信。

勸退師我的微信：huab119（加不到的能夠加小號：luob119，或公衆號留言，我加大家）

也能夠來個人GitHub博客裏拿全部文章的源文件：

前端勸退指南：github.com/roger-hiro/… 一塊兒玩耍呀。~