2021年的big surprise：與月影大佬的一次溝通機會

感恩掘金平臺

今年2月底逛掘金博文，無心間看到 3 月闖關活動開啓，等你來戰！的活動，剛開始只想靠參加活動來督促本身天天學習進步，可沒曾想竟然能闖關成功，意外收穫掘金周邊大禮包，最終還幸運地被月影大佬選中，感覺了一波字節跳動的面試。
這裏由衷的感謝掘金平臺，感謝勤勞的掘金運營童鞋和月影大佬，給予一次和大佬1v1交流的機會，開開眼界~~

闖關歷程

任務1：刷題打卡

3月初，工做之餘的時間開啓了刷題打卡模式，堅持了天天刷一道leetcode，發佈11篇解題思路的文章，其中有7篇被推薦上了首頁。算法基礎一直是我薄弱的地方，刷題打卡恰好能夠督促本身天天練習一道算法題。

任務1闖關成功名單：🌻 刷題打卡、技術點評獲獎名單公佈 ｜ 掘金尋人，Offer 臨門

任務2：項目覆盤

3月中旬，開始作項目覆盤，輸出了2篇文章，一篇項目優化實錄，一篇造輪子學習記錄，沒想到在公司作的webpack編譯優化實錄榮獲了項目覆盤優秀文章獎，閱讀量773，點贊46，評論7。本身剛開始嘗試作技術優化，就獲得這麼多用戶的承認，內心暗暗竊喜了許久。感謝用戶的支持和承認，之後我會繼續加油提高本身，在掘金社區輸出乾貨滿滿的文章~~

• 作webpack性能優化的一段經歷｜項目覆盤

任務2闖關成功名單：項目覆盤任務獲獎名單🏆 三月闖關繼續！

任務3：沸點互動

3月下旬，終於不用發佈文章啦，利用摸魚時間天天發佈條沸點，堅持5天就ok啦。

終極闖關成功名單： 💫 終極獎品揭曉，掘金 3 月春招闖關活動落幕！

導師1v1視頻交流

通關後，21位童鞋都等待大佬們翻牌，很驚喜本身被月影大佬選中。2021-04-09 終於和月影大佬1v1視頻見面啦，滿心期待，但又特別緊張。原本以前還列個問題清單準備諮詢大佬，惋惜交流過程太緊張最後只諮詢了個關鍵的。月影大佬特別nice，看我比較緊張，就先和我閒聊了幾句家常，才慢慢進入面試環節。先來波月影大佬的我的簡介，明星導師 介紹也能夠看到： 下面就是月影大佬問個人幾個問題（我的信息和項目問題除外），你們能夠參考看看：

一、最近你有在關注前端技術哪一個方向？

回答： web性能優化的方向。

二、你在工做中有用到性能優化的知識嗎？如何把性能優化的知識和業務項目聯繫起來呢？

回答： 工做中前端項目用到了webpack打包優化的知識。如今Vue、React、Angular前端三大主流框架基本都是使用webpack打包的。咱們項目是使用vue+webpack的技術棧，業務代碼堆砌的愈來愈龐雜，就想說作webpack的打包優化，提高項目構建速度。

三、webpack編譯優化提高構建速度，具體是怎麼作的，能夠展開來講下嗎？

回答： 剛開始，我先逛了各類博客論壇，看看webpack編譯優化能夠從哪些方面入手。多數技術博文都提到了webpack測速插件speed-measure-webpack-plugin，所以我便將該插件引入項目中，先用來檢測每一個項目編譯構建的速度，看看究竟是哪一個loader、plugin耗時久。測速後，發現主要是搜索解析文件，將vue、es6語法、sass/scss/less文件轉換成js、css的loader，以及壓縮打包資源的plugin耗時比較久。發現問題後，就能夠針對性地進行優化，主要採起以下措施：

• 第三方依賴多，搜索解析文件慢：採用緩存策略，hard-source-webpack-plugin爲依賴模塊提供中間緩存，極大程度地提高二次構建速度。
• loader解析轉換慢：配置loader的test、include、exclude，縮小文件解析搜索範圍。
• 壓縮打包資源plugin執行慢：好比uglify-webpack-plugin，能夠開啓緩存、多進程。

四、除了前端知識，有了解http這塊的知識嗎？好比緩存機制有了解過嗎？

回答： 有了解一些。http的緩存有強緩存和協商緩存2種類型。瀏覽器的資源在Nginx代理服務器上能夠配置cache-control:max-age=xxx 來觸發強緩存。協商緩存，則是瀏覽器第二次訪問資源，會和服務器端協商，若是緩存和新版本內容一致，直接返回緩存數據。

當時緩存機制回答不是太深刻，下來後查閱了資料，補充學習了HTTP緩存機制及原理，整理成以下的時序圖：

• 強緩存的機制：

sequenceDiagram
    participant 客戶端
    participant 緩存數據庫
    客戶端->> 緩存數據庫: 1 請求數據
    緩存數據庫-->>客戶端: 1-2 有緩存數據，且未失效，返回數據
    緩存數據庫-->>客戶端: 2-2 緩存數據失效了
    客戶端->>服務器: 2-3 請求數據
    服務器-->>客戶端: 2-4 返回數據和緩存規則
    客戶端->>緩存數據庫: 2-5 將數據和緩存規則存入緩存數據庫

• 協商緩存的機制：

sequenceDiagram
    participant 客戶端
    participant 緩存數據庫
    客戶端->> 緩存數據庫: 1 獲取緩存數據標識
    緩存數據庫-->>客戶端: 2 返回緩存數據標識
    客戶端->>服務器: 3 請求服務器驗證緩存標識對應的數據是否失效
    服務器-->>客戶端: 4-1 通知客戶端緩存未失效
    客戶端->>緩存數據庫: 5-1 獲取緩存數據
    服務器-->>客戶端: 4-2 返回新數據和緩存規則
    客戶端->>緩存數據庫: 5-2 將數據和緩存規則存入緩存數據庫

五、強緩存和協商緩存的區別？

個人回答： 強緩存的狀態碼爲200，協商緩存的狀態碼是304。強緩存header頭有cache-control/Expires設置，協商緩存則經過Last-Modified/If-Modified-Since、Etag/If-None-Match標識。

大佬補充回答： 強緩存，緩存過的數據是從本地cache直接返回緩存數據，不會發起http請求；協商緩存則是會向服務端發起http請求，返回的數據只會有header，沒有body的數據包。

六、有這樣一個數組[-9,19,-1,11,2,8,3,7]，要求配對相加爲10，如何把這些配對元素找到呢？

個人回答： 暴力求解，經過2層遍歷循環，遍歷循環求解判斷兩數相加是否等於10，匹配到就返回配對元素。緊接着，我又提出了另一個解法：先將數組元素存儲成Map，接着遍歷數組元素x，求解另一個元素 10-x，經過Map搜索查找，匹配到就返回配對元素。

當時心想，我是否是踩坑啦，暴力求解，時間複雜度是O(n^2)，而利用Map查詢用匹配元素，雖然時間複雜度有所下降，但空間複雜度增長爲O(n)，都不是大佬想要聽到的最優解。這會兒月影大佬看我思考的有些焦慮，而後頗有耐心的一步步指引我思考進行解答。

大佬的解題思路： 如今的數據是無序的，能夠先將數組排序（使用時間複雜度較小的排序算法），js的sort排序也還挺快的，時間複雜度是O(nlogn)，排序後發現最小的數在最左邊，最大的數在最右邊，接着能夠用二分查找配對，左邊的數加右邊的數判斷是否等於10。若是大於10，右邊的數向左尋找；小於10，左邊的數向右尋找。二分查找的時間複雜度O(logn)，綜合起來解決這個問題的時間複雜度爲O(nlogn)，沒有用到額外的數據空間，空間複雜度爲O(1)。

下來後，我便去調研了下js的sort排序的V8源碼底層實現，發現平時用sort方法性能如此優越，根據數據量匹配使用不一樣的排序算法：

• 當 n<=10 時，採用插入排序；
• 當 n>10 時，採用三路快速排序；
• 10<n <=1000，採用中位數做爲哨兵元素；
• n>1000，每隔 200~215 個元素挑出一個元素，放到一個新數組中，而後對它排序，找到中間位置的數，以此做爲中位數。

由上圖分析對比這兩個排序的時間複雜度來看，若是當 n 足夠小的時候，最好的狀況下，插入排序的時間複雜度爲 O(n) 要優於快速排序的 O(nlogn)，所以就解釋了這裏當 V8 實現 JS 數組排序算法時，數據量較小的時候會採用插入排序的緣由了。當 n 足夠大，使用快速排序明顯優於插入排序。

七、有5個硬幣，同時將這5個硬幣拋起後落下，3個和3個以上硬幣正面朝上的機率是多少？

個人回答： 在大佬的提示下，恍然大悟答道這是排列組合問題，5個硬幣排列組合總共有2^=32種，3個和3個以上硬幣正面朝上的組合能夠套排列組合公式計算，C(n,m)=n!/m!（n-m）!。即爲C(5,3)+C(5,4)+C(5,5)=5!/3!*2! + 5!/4!*1! + 5!/5!*0! = 10 + 5 + 1 = 16種。因此3個和3個以上硬幣正面朝上的機率是 16/32 = 1/2。

大佬的解題思路：
思路1： 除了排列組合的方式，用js編程也是能夠解決的。32種組合就能夠將0~31分別轉換成二進制，搜索找到有3個1和3個以上1的數，就是
思路2： 排列組合，還有這樣的計算公式：C(n,m)=C(n,n-m)。C(5,3)=C(5,2)，C(5,4)=C(5,1)，C(5,5) = C(5,0)，即爲3個正面機率等於2個正面朝上機率，4個正面朝上機率等於1個正面朝上機率，5個正面朝上的機率和0個正面朝上（即5個反面朝上）的機率。求解3個及以上正面朝上的機率是否是恰好對半分了，即爲1/2。

最後，面試的問題交流完後，月影大佬友善地詢問：你還有什麼問題想要了解的嗎？ 當時我就只記得問大佬一個心法問題：在解決問題的時候，您是怎麼快速尋找到高效的解法？ 大佬解答完，咱們此次的模擬面試就結束啦，很愉快地say goodbye~

總結與思考

視頻溝通下來，感受和月影大佬交流如沐春風，他能很快發現咱們身上的不足指點心法，也能發現咱們的優勢，給予鼓勵和讚揚。今年經過掘金平臺認識到月影大佬，是我最大的驚喜和收穫（this is the biggest surprise~）
還有經過此次交流溝通，我發現大廠的大佬基本功特別紮實，抽象思惟很好，綜合能力很強。掘友們，不管是想跳槽進大廠，仍是想提高技術升職加薪，平時仍是得重視基礎，訓練多種解題思惟，修煉好心法，才能讓技術爲業務產品創造價值。至於綜合素質、軟技能，主要仍是靠本身職場上摸爬滾打，慢慢積累經驗，不斷提高，同時也應該多聽聽身邊前輩們的建議。你們一塊兒加油吧，乾巴爹！！！

獎品豐盛

掘金每一個活動準備的獎品特別多，這是我本次參加3月闖關活動得到的獎品：

• 3個小冊優惠碼
• 1個leetcode 30天會員兌換碼
• 掘金周邊大禮包：掘金搪瓷杯+掘金定製衛衣+掘金定製手提包
• 《計算機網絡》紙質書一本（書在路上，期待中~）

掘金真的愛極了！它就是個技術人的助夢平臺，不管是想提高技術升職加薪，仍是跳槽斬獲offer追求更好發展機會，均可以幫你一步步實現，一系列闖關活動督促你學習進步。
最後，走心地爲掘金打波廣告，4月活動還在火熱持續中，獎品多多等你來拿，活動連接爲你奉上：

• 4 月刷題打卡繼續！🎁 Offer 臨門請報喜～
• 技術助力 | 掘金小冊免費學
• 【掘力計劃】創做者訓練營第二期，火熱來襲！
• 找內推，拿offer｜奇葩面試題
• 找內推，拿offer｜一個小細節

...