前端練級攻略（我是怎麼拿到微信 offer 的）

持續更新中。。。

前言

又到了一年一度的校招季，身邊有好幾個朋友來問我要面經，前端的知識點又特別多而零碎，因而就想梳理彙總一下，方便朋友複習，也供各位 FEer 查缺補漏，文中涉及的文章如有侵權，請聯繫刪除。

因爲我的的經驗有限，圖中的知識點可能並不能被徹底覆蓋，歡迎你們補充~

前端練級知識體系

知識點思惟導圖

算法基礎

不少同類的文章都喜歡把算法放在最後，但我把它放在最前面，由於算法是計算機的基礎學科，並且它經常能拓寬咱們編碼的思路。固然提高算法能力最快速的方式仍是去 LeetCode 刷上個幾百道算法題~

《JavaScript實現簡單二叉查找樹》

本文主要講述了二叉樹的前序遍歷、中序遍歷、後序遍歷以及二叉查找樹的 JS 實現方式，可是並無 AVL 樹和紅黑樹的實現，有點小遺憾，不過在前端面試中基本上也不會涉及，因此仍是很值得在大廠面試前複習一下的~

《十大經典排序算法總結》

排序是每一個程序員都應該掌握的基礎算法(我指的並非 Array.sort 啊喂ヽ(●-`Д´-)ノ)，文中不只給出了各類經典排序算法的實現以及時空間複雜度，還配上了動圖來描述算法的排序過程，能夠說是很是良心了。

《前端該如何準備數據結構和算法？》

JS基礎

《ECMAScript 6入門》

良心做者，有實體書的狀況下還開源了電子書，不論是在開發工做，仍是面試複習都很是值得多刷的基礎，在下完整地刷了3遍以上，每次看完都有新的收穫。

《JavaScript深刻系列》《JavaScript專題系列》

這兩個專題總共有35篇文章，基本上涵蓋了 JS 大部分重點，描述的語言也通俗易懂，從 this 、閉包到繼承、柯里化都有說起，很是適合用來學習基礎。

《Promise原理講解(遵循Promise/A+規範)》

不少大廠的面試官在沒有好的面試題能夠問的時候，都特別喜歡讓你手寫一個 Promise (別問我是怎麼知道的，說多了都是淚)，這篇文章是講解 Promise 實現比較完整詳細的，推薦看完之後本身實現一遍。

《前端 100 問》

這篇文章是 github 一個 1.2w 多 stars 的項目彙總的高頻面試題，裏面不只有 JS 基礎，還有各類比較常見的面試題。

網絡基礎

《從輸入URL到頁面加載的過程？如何由一道題完善本身的前端知識體系！》

經典的一道網絡面試題，不管是前端仍是後端都有涉及，包括請求線程如何發起請求、客戶端與服務器的 http 交互、緩存、頁面渲染和 JS 引擎。

《小哥哥,小姐姐,我有一份tcp、http面試指南你要嗎？》

上文的簡化版，若是以爲第一篇看起來太吃力，能夠從這篇看起，由淺入深。

《多是全網最全的http面試答案》

講解了各類 restful 請求的區別，以及 HTTP/2.0 的各類新特性和優點，還有一些常見狀態碼的區別。

瀏覽器相關

《圖解瀏覽器的基本工做原理》

詳細地解釋說明了瀏覽器的各個線程，是怎麼結合在一塊兒工做的，最終呈現網頁的過程。

《從瀏覽器渲染原理，說一說如何實現高效的動畫》

瀏覽器是怎麼渲染頁面的，同時咱們應該如何更優雅地實現頁面的動畫效果。

網絡安全

《程序員必需要了解的web安全》

瀏覽器的安全策略，什麼是 csrf 和 xss 攻擊，以及對這兩種攻擊方式的應對。

《詳解 Cookie，Session，Token》

既然聊到了網絡安全，就必然會涉及到用戶驗證，Session 和 Token 驗證是比較經常使用到的，特別是 Token 的實現必定要爛熟於心。

《乾貨！防運營商劫持》

在小公司工做的時候常常遇到頁面被劫持的問題，大部分的解決方案都在文章裏面有所說起。

Framework

《實現雙向綁定Proxy比defineproperty優劣如何?》

Vue 3.0 與 2.0 實現雙向數據綁定的對比，若是你的技術棧中有 Vue ，基本上是繞不過去的一道題。

《解析vue2.0的diff算法》

同上，diff 算法也是框架必問的一道題，除了實現算法和時間複雜度優化外，最好能本身手寫出來(手動狗頭)~

《【React深刻】從Mixin到HOC再到Hook》

詳細地介紹了 React 的 Mixin 、高階組件和最新的 ReactHook，同時對比了他們的優缺點。

《SPA路由機制詳解（看不懂不要錢~~）》

SPA 路由的兩種實現方式(hash 和 history)，文章介紹了二者之間的異同，已經在實際運用中的取捨。

性能優化

《咱們應該作些力所能及的優化》

一些常見的 webpack 配置用於優化代碼，以及雅虎34條軍規，雖然可能有些優化可能不適用了，可是思想仍是值得學習的。

《讓老闆虎軀一震的前端技術，KPI殺手》

企鵝輔導課程詳情頁的一次 PWA 優化實踐，對 PWA 不太瞭解的同窗值得一看。

《科普一下 CORS 以及如何節省一次 OPTIONS 請求》

跨域是開發過程當中常常遇到的問題，有時候咱們會發現請求會發起兩次，多了一次 OPTIONS ，有時候這多出來的一次請求是能夠被優化掉的。

寫在最後

這份練級攻略可能並不能徹底適合除我之外的其餘人，在下也還在前端的路上不斷摸索前行，若是你有更好的方法方式或者意見建議，歡迎在評論區留下足跡~

若是對你有幫助，歡迎點贊、收藏、評論三連~

(PS: 深圳 shopee 正在招聘前端、後臺、測試、設計、產品等互聯網職位，有意者可簡歷至：tianpei.liang@shopee.com)