作者：Cv大法程式碼醬
連結：https://www.zhihu.com/question/20739945/answer/1949064921

前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。

winter在他的《重學前端》課程中提到：

到現在為止，前端工程師已經成為研發體系中的重要崗位之一。可是，與此相對的是，我發現極少或者幾乎沒有大學的計算機專業願意開設前端課程，更沒有系統性的教學方案出現。大部分前端工程師的知識，其實都是來自於實踐和工作中零散的學習。

這樣是一個非常真實的現狀，實際上很多前端開發者都是自學甚至轉行過來的，前端入門簡單，學習了幾個API

只是停留在會用階段是遠遠不夠的，我們還需要不斷探索和深入。現在市面上並不缺少學習教程，技術文章，如果盲目的學習你會發現看過以後的知識留存率會很低，而且發現沒有了解到的知識越來越多，這會讓人產生焦慮。

這一套資料也是我當時準備前端面試的時候花了大量時間準備的。切記：學習資料在於精，不在於多，多反而不是好事，作為一名程式設計師，大家的學習時間都太寶貴了，我們要把80%時間投入在最有價值20%的學習內容上。

實際上，除了堅持學習的強大的自驅力，你還需要一個很簡單的學習方法。那就是：建立自己的知識體系。它能幫助你更系統性的學習，同時你也時刻能知道自己哪些地方是不足的。

我會把我工作和學習中接觸到的知識全部歸納到我的知識體系中，其中不僅僅包括我已經學過的，還有很多我沒有來得及學習的。

這不僅僅是我的知識體系，更是我時刻提醒自己的自檢清單。

下面我會把我的自檢清單分享給大家，你可以按照清單上的知識檢測自己還有哪些不足和提升，我也建議大家建自己的知識體系，這樣工作或者學習甚至面試時，你能快速定位到知識清單中的點，如果你有哪些我沒歸納到的點，歡迎在評論區告訴我。

作者：ConardLi 連結：

https://juejin.cn/post/6844903830887366670

一、JavaScript基礎

前端工程師吃飯的傢伙，深度、廣度一樣都不能差。

變數和型別

• 1.JavaScript規定了幾種語言型別
  
• 2.JavaScript物件的底層資料結構是什麼
  
• 3.Symbol型別在實際開發中的應用、可手動實現一個簡單的Symbol
  
• 4.JavaScript中的變數在記憶體中的具體儲存形式
  
• 5.基本型別對應的內建物件，以及他們之間的裝箱拆箱操作
  
• 6.理解值型別和引用型別
  
• 7.null和undefined的區別
  
• 8.至少可以說出三種判斷JavaScript資料型別的方式，以及他們的優缺點，如何準確的判斷陣列型別
  
• 9.可能發生隱式型別轉換的場景以及轉換原則，應如何避免或巧妙應用
  
• 10.出現小數精度丟失的原因，JavaScript可以儲存的最大數字、最大安全數字，JavaScript處理大數字的方法、避免精度丟失的方法
  

原型和原型鏈

• 1.理解原型設計模式以及JavaScript中的原型規則
  
• 2.instanceof的底層實現原理，手動實現一個instanceof
  
• 4.實現繼承的幾種方式以及他們的優缺點
  
• 5.至少說出一種開源專案(如Node)中應用原型繼承的案例
  
• 6.可以描述new一個物件的詳細過程，手動實現一個new操作符
  
• 7.理解es6 class構造以及繼承的底層實現原理
  

作用域和閉包

• 1.理解詞法作用域和動態作用域
  
• 2.理解JavaScript的作用域和作用域鏈
  
• 3.理解JavaScript的執行上下文棧，可以應用堆疊資訊快速定位問題
  
• 4.this的原理以及幾種不同使用場景的取值
  
• 5.閉包的實現原理和作用，可以列舉幾個開發中閉包的實際應用
  
• 6.理解堆疊溢位和記憶體洩漏的原理，如何防止
  
• 7.如何處理迴圈的非同步操作
  
• 8.理解模組化解決的實際問題，可列舉幾個模組化方案並理解其中原理
  

執行機制

• 1.為何try裡面放return，finally還會執行，理解其內部機制
  
• 2.JavaScript如何實現非同步程式設計，可以詳細描述EventLoop機制
  
• 3.巨集任務和微任務分別有哪些
  
• 4.可以快速分析一個複雜的非同步巢狀邏輯，並掌握分析方法
  
• 5.使用Promise實現序列
  
• 6.Node與瀏覽器EventLoop的差異
  
• 7.如何在保證頁面執行流暢的情況下處理海量資料
  

語法和API

• 1.理解ECMAScript和JavaScript的關係
  
• 2.熟練運用es5、es6提供的語法規範，
  
• 3.熟練掌握JavaScript提供的全域性物件（例如Date、Math）、全域性函式（例如decodeURI、isNaN）、全域性屬性（例如Infinity、undefined）
  
• 4.熟練應用map、reduce、filter 等高階函式解決問題
  
• 5.setInterval需要注意的點，使用settimeout實現setInterval
  
• 6.JavaScript提供的正則表示式API、可以使用正則表示式（郵箱校驗、URL解析、去重等）解決常見問題
  
• 7.JavaScript異常處理的方式，統一的異常處理方案
  

二、HTML和CSS

HTML

• 1.從規範的角度理解HTML，從分類和語義的角度使用標籤
  
• 2.常用頁面標籤的預設樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器相容問題的方式
  
• 3.元資訊類標籤(head、title、meta)的使用目的和配置方法
  
• 4.HTML5離線快取原理
  
• 5.可以使用Canvas API、SVG等繪製高效能的動畫
  

CSS

• 1.CSS盒模型，在不同瀏覽器的差異
  
• 2.CSS所有選擇器及其優先順序、使用場景，哪些可以繼承，如何運用at規則
  
• 3.CSS偽類和偽元素有哪些，它們的區別和實際應用
  
• 4.HTML文件流的排版規則，CSS幾種定位的規則、定位參照物、對文件流的影響，如何選擇最好的定位方式，雪碧圖實現原理
  
• 5.水平垂直居中的方案、可以實現6種以上並對比它們的優缺點
  
• 6.BFC實現原理，可以解決的問題，如何建立BFC
  
• 7.可使用CSS函式複用程式碼，實現特殊效果
  
• 8.PostCSS、Sass、Less的異同，以及使用配置，至少掌握一種
  
• 9.CSS模組化方案、如何配置按需載入、如何防止CSS阻塞渲染
  
• 10.熟練使用CSS實現常見動畫，如漸變、移動、旋轉、縮放等等
  
• 11.CSS瀏覽器相容性寫法，瞭解不同API在不同瀏覽器下的相容性情況
  
• 12.掌握一套完整的響應式佈局方案
  

手寫

• 1.手寫圖片瀑布流效果
  
• 2.使用CSS繪製幾何圖形（圓形、三角形、扇形、菱形等）
  
• 3.使用純CSS實現曲線運動（貝塞爾曲線）
  
• 4.實現常用佈局（三欄、聖盃、雙飛翼、吸頂），可是說出多種方式並理解其優缺點
  

三、計算機基礎

縱然框架再多，版本更新再快，然而很多基礎的東西並沒有變。作為學習者，越是想急著適應這些紛繁變幻的“新遊戲規則”，就越需要一個紮實的基礎和熟練的底子。所以紮實地掌握好比如像基礎三件套、資料結構、網路協議、設計模式以及編譯原理等等一些基礎，才能讓我們對於新知識遊刃有餘。

這裡有4本手冊，全網累積下載100w次，幾乎程式設計師人手一套，包含資料結構與演算法、作業系統、計算機組成原理、計算機網路等硬核基礎知識，圖文+實戰案例，平時開發+搞定面試，幫你快速建立對電腦科學的大局觀，夯實計算機基本功，瞬間起飛～

關於編譯原理，不需要理解非常深入，但是最基本的原理和概念一定要懂，這對於學習一門程式語言非常重要。

編譯原理

• 1.理解程式碼到底是什麼，計算機如何將程式碼轉換為可以執行的目標程式
  
• 2.正則表示式的匹配原理和效能優化
  
• 3.如何將JavaScript程式碼解析成抽象語法樹(AST)
  
• 4.base64的編碼原理
  
• 5.幾種進位制的相互轉換計算方法，在JavaScript中如何表示和轉換
  

網路協議

• 1.理解什麼是協議，瞭解TCP/IP網路協議族的構成，每層協議在應用程式中發揮的作用
  
• 2.三次握手和四次揮手詳細原理，為什麼要使用這種機制
  
• 3.有哪些協議是可靠，TCP有哪些手段保證可靠交付
  
• 4.DNS的作用、DNS解析的詳細過程，DNS優化原理
  
• 5.CDN的作用和原理
  
• 6.HTTP請求報文和響應報文的具體組成，能理解常見請求頭的含義，有幾種請求方式，區別是什麼
  
• 7.HTTP所有狀態碼的具體含義，看到異常狀態碼能快速定位問題
  
• 8.HTTP1.1、HTTP2.0帶來的改變
  
• 9.HTTPS的加密原理，如何開啟HTTPS，如何劫持HTTPS請求
  
• 10.理解WebSocket協議的底層原理、與HTTP的區別
  

設計模式

• 1.熟練使用前端常用的設計模式編寫程式碼，如單例模式、裝飾器模式、代理模式等
  
• 2.釋出訂閱模式和觀察者模式的異同以及實際應用
  
• 3.可以說出幾種設計模式在開發中的實際應用，理解框架原始碼中對設計模式的應用
  

四、資料結構和演算法

據我瞭解的大部分前端對這部分知識有些欠缺，甚至牴觸，但是，如果突破更高的天花板，這部分知識是必不可少的，而且我親身經歷——非常有用！

JavaScript編碼能力

• 1.多種方式實現陣列去重、扁平化、對比優缺點
  
• 2.多種方式實現深拷貝、對比優缺點
  
• 3.手寫函式柯里化工具函式、並理解其應用場景和優勢
  
• 4.手寫防抖和節流工具函式、並理解其內部原理和應用場景
  
• 5.實現一個sleep函式
  

手動實現前端輪子

• 1.手動實現call、apply、bind
  
• 2.手動實現符合Promise/A+規範的Promise、手動實現async await
  
• 3.手寫一個EventEmitter實現事件釋出、訂閱
  
• 4.可以說出兩種實現雙向繫結的方案、可以手動實現
  
• 5.手寫JSON.stringify、JSON.parse
  
• 6.手寫一個模版引擎，並能解釋其中原理
  
• 7.手寫懶載入、下拉重新整理、上拉載入、預載入等效果
  

資料結構

• 1.理解常見資料結構的特點，以及他們在不同場景下使用的優缺點
  
• 2.理解陣列、字串的儲存原理，並熟練應用他們解決問題
  
• 3.理解二叉樹、棧、佇列、雜湊表的基本結構和特點，並可以應用它解決問題
  
• 4.瞭解圖、堆的基本結構和使用場景
  

演算法

• 1.可計算一個演算法的時間複雜度和空間複雜度，可估計業務邏輯程式碼的耗時和記憶體消耗
  
• 2.至少理解五種排序演算法的實現原理、應用場景、優缺點，可快速說出時間、空間複雜度
  
• 3.瞭解遞迴和迴圈的優缺點、應用場景、並可在開發中熟練應用
  
• 4.可應用回溯演算法、貪心演算法、分治演算法、動態規劃等解決複雜問題
  
• 5.前端處理海量資料的演算法方案
  

五、執行環境

我們需要理清語言和環境的關係：
ECMAScript描述了JavaScript語言的語法和基本物件規範

瀏覽器作為JavaScript的一種執行環境，為它提供了：文件物件模型（DOM），描述處理網頁內容的方法和介面、瀏覽器物件模型（BOM），描述與瀏覽器進行互動的方法和介面

Node也是JavaScript的一種執行環境，為它提供了操作I/O、網路等API

瀏覽器API

• 1.瀏覽器提供的符合W3C標準的DOM操作API、瀏覽器差異、相容性
  
• 2.瀏覽器提供的瀏覽器物件模型 (BOM)提供的所有全域性API、瀏覽器差異、相容性
  
• 3.大量DOM操作、海量資料的效能優化(合併操作、Diff、requestAnimationFrame等)
  
• 4.瀏覽器海量資料儲存、操作效能優化
  
• 5.DOM事件流的具體實現機制、不同瀏覽器的差異、事件代理
  
• 6.前端發起網路請求的幾種方式及其底層實現、可以手寫原生ajax、fetch、可以熟練使用第三方庫
  
• 7.瀏覽器的同源策略，如何避免同源策略，幾種方式的異同點以及如何選型
  
• 8.瀏覽器提供的幾種儲存機制、優缺點、開發中正確的選擇
  
• 9.瀏覽器跨標籤通訊
  

瀏覽器原理

• 1.各瀏覽器使用的JavaScript引擎以及它們的異同點、如何在程式碼中進行區分
  
• 2.請求資料到請求結束與伺服器進行了幾次互動
  
• 3.可詳細描述瀏覽器從輸入URL到頁面展現的詳細過程
  
• 4.瀏覽器解析HTML程式碼的原理，以及構建DOM樹的流程
  
• 5.瀏覽器如何解析CSS規則，並將其應用到DOM樹上
  
• 6.瀏覽器如何將解析好的帶有樣式的DOM樹進行繪製
  
• 7.瀏覽器的執行機制，如何配置資源非同步同步載入
  
• 8.瀏覽器迴流與重繪的底層原理，引發原因，如何有效避免
  
• 9.瀏覽器的垃圾回收機制，如何避免記憶體洩漏
  
• 10.瀏覽器採用的快取方案，如何選擇和控制合適的快取方案
  

Node

• 1.理解Node在應用程式中的作用，可以使用Node搭建前端執行環境、使用Node操作檔案、操作資料庫等等
  
• 2.掌握一種Node開發框架，如Express，Express和Koa的區別
  
• 3.熟練使用Node提供的API如Path、Http、Child Process等並理解其實現原理
  
• 4.Node的底層執行原理、和瀏覽器的異同
  
• 5.Node事件驅動、非阻塞機制的實現原理
  

六、框架和類庫

輪子層出不窮，從原理上理解才是正道

TypeScript

• 1.理解泛型、介面等面向物件的相關概念，TypeScript對面向物件理念的實現
  
• 2.理解使用TypeScript的好處，掌握TypeScript基礎語法
  
• 3.TypeScript的規則檢測原理
  
• 4.可以在React、Vue等框架中使用TypeScript進行開發
  

React

• 1.React和vue 選型和優缺點、核心架構的區別
  
• 2.React中setState的執行機制，如何有效的管理狀態
  
• 3.React的事件底層實現機制
  
• 4.React的虛擬DOM和Diff演算法的內部實現
  
• 5.React的Fiber工作原理，解決了什麼問題
  
• 6.React Router和Vue Router的底層實現原理、動態載入實現原理
  
• 7.可熟練應用React API、生命週期等，可應用HOC、render props、Hooks等高階用法解決問題
  
• 8.基於React的特性和原理，可以手動實現一個簡單的React
  

Vue

• 1.熟練使用Vue的API、生命週期、鉤子函式
  
• 2.MVVM框架設計理念
  
• 3.Vue雙向繫結實現原理、Diff演算法的內部實現
  
• 4.Vue的事件機制
  
• 5.從template轉換成真實DOM的實現機制
  

多端開發

• 1.單頁面應用（SPA）的原理和優缺點，掌握一種快速開發SPA的方案
  
• 2.理解Viewport、em、rem的原理和用法，解析度、px、ppi、dpi、dp的區別和實際應用
  
• 3.移動端頁面適配解決方案、不同機型適配方案
  
• 4.掌握一種JavaScript移動客戶端開發技術，如React Native：可以搭建React Native開發環境，熟練進行開發，可理解React Native的運作原理，不同端適配
  
• 5.掌握一種JavaScript PC客戶端開發技術，如Electron：可搭建Electron開發環境，熟練進行開發，可理解Electron的運作原理
  
• 6.掌握一種小程式開發框架或原生小程式開發
  
• 7.理解多端框架的內部實現原理，至少了解一個多端框架的使用
  

資料流管理

• 1.掌握React和Vue傳統的跨元件通訊方案，對比採用資料流管理框架的異同
  
• 2.熟練使用Redux管理資料流，並理解其實現原理，中介軟體實現原理
  
• 3.熟練使用Mobx管理資料流，並理解其實現原理，相比Redux有什麼優勢
  
• 4.熟練使用Vuex管理資料流，並理解其實現原理
  
• 5.以上資料流方案的異同和優缺點，不情況下的技術選型
  

實用庫

• 1.至少掌握一種UI元件框架，如antd design，理解其設計理念、底層實現
  
• 2.掌握一種圖表繪製框架，如Echart，理解其設計理念、底層實現，可以自己實現圖表
  
• 3.掌握一種GIS開發框架，如百度地圖API
  
• 4.掌握一種視覺化開發框架，如Three.js、D3
  
• 5.工具函式庫，如lodash、underscore、moment等，理解使用的工具類或工具函式的具體實現原理
  

開發和除錯

• 1.熟練使用各瀏覽器提供的除錯工具
  
• 2.熟練使用一種代理工具實現請求代理、抓包，如charls
  
• 3.可以使用Android、IOS模擬器進行除錯，並掌握一種真機除錯方案
  
• 4.瞭解Vue、React等框架除錯工具的使用
  

七、前端工程

前端工程化：以工程化方法和工具提高開發生產效率、降低維護難度

專案構建

• 1.理解npm、yarn依賴包管理的原理，兩者的區別
  
• 2.可以使用npm執行自定義指令碼
  
• 3.理解Babel、ESLint、webpack等工具在專案中承擔的作用
  
• 4.ESLint規則檢測原理，常用的ESLint配置
  
• 5.Babel的核心原理，可以自己編寫一個Babel外掛
  
• 6.可以配置一種前端程式碼相容方案，如Polyfill
  
• 7.Webpack的編譯原理、構建流程、熱更新原理，chunk、bundle和module的區別和應用
  
• 8.可熟練配置已有的loaders和plugins解決問題，可以自己編寫loaders和plugins
  

nginx

• 1.正向代理與反向代理的特點和例項
  
• 2.可手動搭建一個簡單的nginx伺服器、
  
• 3.熟練應用常用的nginx內建變數，掌握常用的匹配規則寫法
  
• 4.可以用nginx實現請求過濾、配置gzip、負載均衡等，並能解釋其內部原理
  

開發提速

• 1.熟練掌握一種介面管理、介面mock工具的使用，如yapi
  
• 2.掌握一種高效的日誌埋點方案，可快速使用日誌查詢工具定位線上問題
  
• 3.理解TDD與BDD模式，至少會使用一種前端單元測試框架
  

版本控制

• 1.理解Git的核心原理、工作流程、和SVN的區別
  
• 2.熟練使用常規的Git命令、git rebase、git stash等進階命令
  
• 3.可以快速解決線上分支回滾、線上分支錯誤合併等複雜問題
  

持續整合

• 1.理解CI/CD技術的意義，至少熟練掌握一種CI/CD工具的使用，如Jenkins
  
• 2.可以獨自完成架構設計、技術選型、環境搭建、全流程開發、部署上線等一套完整的開發流程（包括Web應用、移動客戶端應用、PC客戶端應用、小程式、H5等等）
  

八、專案和業務

後端技能

• 1.瞭解後端的開發方式，在應用程式中的作用，至少會使用一種後端語言
  
• 2.掌握資料最終在資料庫中是如何落地儲存的，能看懂表結構設計、表之間的關聯，至少會使用一種資料庫
  

效能優化

• 1.瞭解前端效能衡量指標、效能監控要點，掌握一種前端效能監控方案
  
• 2.瞭解常見的Web、App效能優化方案
  
• 3.SEO排名規則、SEO優化方案、前後端分離的SEO
  
• 4.SSR實現方案、優缺點、及其效能優化
  
• 5.Webpack的效能優化方案
  
• 6.Canvas效能優化方案
  
• 7.React、Vue等框架使用效能優化方案
  

前端安全

• 1.XSS攻擊的原理、分類、具體案例，前端如何防禦
  
• 2.CSRF攻擊的原理、具體案例，前端如何防禦
  
• 3.HTTP劫持、頁面劫持的原理、防禦措施
  

業務相關

• 1.能理解所開發專案的整體業務形態、業務目標、業務架構，可以快速定位線上業務問題
  
• 2.能理解所開發專案整體的技術架構、能快讀的根據新需求進行開發規劃、能快速根據業務報警、線上日誌等定位並解決線上技術問題
  
• 3.可以將自己的想法或新技術在業務中落地實踐，儘量在團隊中擁有一定的不可替代性
  

九、學習提升

vczh大神在知乎問題【如何能以後達到溫趙輪三位大神的水平？】下的回答：

這十幾年我一共做了三件事：

• 1、不以賺錢為目的選擇學習的內容；
• 2、以自己是否能造出輪子來衡量學習的效果；
• 3、堅持每天寫自己的程式碼，前10年每天至少6個小時，不包含學習和工作的時間。

上面幾點可能有點難，第一點我就做不到，但是做到下面幾點還是比較容易的。

關於寫部落格說明下，能給別人講明白的知識會比自己學習掌握的要深刻許多

• 1.擁有自己的技術部落格，或者在一些部落格平臺上擁有自己的專欄
  
• 2.定期的將知識進行總結，不斷完善自己的知識體系
  
• 3.儘量將自己的知識轉換成真實的產出，不要僅僅停留在書面理解層面，更重要的是實際應用
  
• 4.堅持輸出自己的程式碼，不要盲目的扎進公司業
  

十、技術之外

這部分可能比上面九條加起來重要！

• 1.瞭解網際網路人員術語：CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等
  
• 2.瞭解網際網路行業術語：B2B、B2C、C2C、O2O等
  
• 3.掌握網際網路行業溝通、問答、學習的
  
• 4.有一定的"PPT"能力
  
• 5.有一定的理財意識，至少了解儲蓄、貨幣基金、保險、指數基金、股票等基本的理財知識
  
• 6.掌握在繁重的工作和長期的電腦輻射的情況下保持健康的方法，建立正確的養生知識體系
  

十一、資源推薦

有了知識體系，在閱讀一篇技術文章的時候就很容易把它歸類，我一直以來就是這樣做的。
事實證明，在閱讀文章或書籍時，有目的和歸類的閱讀比"隨便看看"後的只是留存率要高很多。
每閱讀到一篇好的文章或者書籍，我都會收藏並歸類到我的知識體系中。

下面是一些我覺得還不錯的文章、部落格或者書籍教程等等，分享給大家，資源不多，但都是精品。
學習一門知識，最好先閱讀官方文件，把所有的API大概瀏覽一遍，再繼續看大佬們總結的進階知識，什麼東西是搬運過來的，什麼是乾貨，一目瞭然。
語言基礎

• [ ]JavaScript高階程式設計（必看）：book.douban.com/subject/105…
  
• [ ]高效能JavaScript：book.douban.com/subject/536…
  
• 現代JavaScript教程：zh.javascript.info/
  
• 阮一峰的ECMAScript 6教程：es6.ruanyifeng.com/
  
• ECMAScript 6標準：www.ecma-international.org/ecma-262/6.…
  
• HTML meta標籤總結與屬性使用介紹：segmentfault.com/a/119000000…
  
• CSS編碼指導：github.com/chadluo/CSS…
  

計算機基礎

• 大前端開發者需要了解的基礎編譯原理和語言知識：fullstack.blog/2017/06/24/…
  
• 圖解HTTP：book.douban.com/subject/258…
  
• [ ]JavaScript設計模式與開發實踐：book.douban.com/subject/263…
  
• 正則表示式30分鐘入門教程：link.juejin.im/?target=htt…
  

資料結構和演算法

• 資料結構與演算法之美：time.geekbang.org/column/intr…
  
• 用動畫的形式呈現解LeetCode題目的思路：github.com/MisterBooo/…
  
• JavaScript資料結構和演算法：github.com/ConardLi/aw…
  
• 30-seconds-of-code（裡面有很多js程式碼非常巧妙，我正在將它翻譯成中文）：github.com/ConardLi/30…
  

執行環境

• 《重學前端》中的瀏覽器原理章節：time.geekbang.org/column/arti…
  
• 圖解瀏覽器的基本工作原理：zhuanlan.zhihu.com/p/47407398
  
• 七天學會NodeJS：github.com/nqdeng/7-da…
  
• Node.js模組載入與執行原理：efe.baidu.com/blog/nodejs…
  

框架和類庫

• TypeScript Handbook：zhongsp.gitbooks.io/typescript-…
  
• React.js小書：huziketang.mangojuice.top/books/react…
  
• React深入系列：juejin.im/post/684490…
  
• Webpack React小書：fakefish.github.io/react-webpa…
  
• Vue.js技術揭祕：github.com/ustbhuangyi…
  
• Vuex-在Vue中管理狀態：sabe.io/tutorials/g…
  
• 你需要Mobx還是Redux？：juejin.im/post/684490…
  
• Underscore原始碼分析：yoyoyohamapi.gitbooks.io/undersercor…
  
• 微信小程式開發資源彙總：github.com/justjavac/a…
  
• 騰訊移動Web前端知識庫：github.com/AlloyTeam/M…
  

前端工程

• 一口（很長的）氣了解babel：zhuanlan.zhihu.com/p/43249121
  
• Webpack傻瓜式指南：zhuanlan.zhihu.com/p/20367175
  
• Webpack原理：segmentfault.com/a/119000001…
  
• 廖雪峰的git教程：www.liaoxuefeng.com/wiki/001373…
  
• 圖解Git：marklodato.github.io/visual-git-…
  
• 前端開發者必備的Nginx知識：juejin.im/post/684490…
  
• 使用Jenkins進行持續整合：www.liaoxuefeng.com/article/001…
  

專案和業務

• 常見六大Web安全攻防解析：github.com/ljianshu/Bl…
  
• 深入理解前端效能監控：juejin.im/post/1#head…
  
• [ ]高效能網站建設指南：book.douban.com/subject/313…
  
• 新人如何快速融入技術實力強的前端團隊：juejin.im/post/684490…
  

學習提升

• 印記中文（各種中文開發文件）：www.docschina.org/
  
• 前端學習方法：github.com/helloqingfe…
  
• 如何在工作內外獲得持續的技術成長：juejin.im/post/684490…
  
• 優秀的前端部落格彙總：github.com/foru17/fron…
  

另外推薦我一直在關注的幾位大佬的個人部落格：

• 冴羽的部落格：github.com/mqyqingfeng…
  
• 張鑫旭的部落格：www.zhangxinxu.com/wordpress/
  
• 左耳朵耗子：coolshell.cn/
  

技術之外

• 網際網路術語大全：www.jianshu.com/p/9a7ca206c…
  
• 網際網路溝通、問答、學習的藝術：zhuanlan.zhihu.com/p/41431775
  
• 經常加班至深夜，怎樣才能保持身體健康：www.zhihu.com/question/21…
  

其實在這個資訊發達的時代最不缺的就是資源，如何從眾多的資源中獲取到真正精華的部分，是非常重要的，資源在於精不在於多，強烈建議在保證深度的情況下再保證廣度。