前端技能自檢

轉自：code祕密花園

開篇

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

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

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

這樣是一個非常真實的現狀，實際上很多前端開發者都是自學甚至轉行過來的，前端入門簡單，學習了幾個 API以後上手做項目也很簡單，但是這往往成爲了限制自身發展的瓶頸。只是停留在會用階段是遠遠不夠的，我們還需要不斷探索和深入。現在市面上並不缺少學習教程，技術文章，如果盲目的學習你會發現看過以後的知識留存率會很低，而且發現沒有瞭解到的知識越來越多，這會讓人產生焦慮。

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

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

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

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

一、JavaScript基礎

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

變量和類型

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

原型和原型鏈

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

作用域和閉包

• 理解詞法作用域和動態作用域
• 理解 JavaScript的作用域和作用域鏈
• 理解 JavaScript的執行上下文棧，可以應用堆棧信息快速定位問題
• this的原理以及幾種不同使用場景的取值
• 閉包的實現原理和作用，可以列舉幾個開發中閉包的實際應用
• 理解堆棧溢出和內存泄漏的原理，如何防止
• 如何處理循環的異步操作
• 理解模塊化解決的實際問題，可列舉幾個模塊化方案並理解其中原理

執行機制

• 爲何 try裏面放 return， finally還會執行，理解其內部機制
• JavaScript如何實現異步編程，可以詳細描述 EventLoop機制
• 宏任務和微任務分別有哪些
• 可以快速分析一個複雜的異步嵌套邏輯，並掌握分析方法
• 使用 Promise實現串行
• Node與瀏覽器 EventLoop的差異
• 如何在保證頁面運行流暢的情況下處理海量數據

語法和API

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

二、HTML和CSS

HTML

• 從規範的角度理解 HTML，從分類和語義的角度使用標籤
• 常用頁面標籤的默認樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器兼容問題的方式
• 元信息類標籤( head、 title、 meta)的使用目的和配置方法
• HTML5離線緩存原理
• 可以使用 CanvasAPI、 SVG等繪製高性能的動畫

CSS

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

手寫

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

三、計算機基礎

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

編譯原理

• 理解代碼到底是什麼，計算機如何將代碼轉換爲可以運行的目標程序
• 正則表達式的匹配原理和性能優化
• 如何將 JavaScript代碼解析成抽象語法樹( AST)
• base64的編碼原理
• 幾種進制的相互轉換計算方法，在 JavaScript中如何表示和轉換

網絡協議

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

設計模式

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

四、數據結構和算法

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

JavaScript編碼能力

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

手動實現前端輪子

• 手動實現 call、apply、bind
• 手動實現符合 Promise/A+規範的 Promise、手動實現 asyncawait
• 手寫一個 EventEmitter實現事件發佈、訂閱
• 可以說出兩種實現雙向綁定的方案、可以手動實現
• 手寫 JSON.stringify、 JSON.parse
• 手寫一個模版引擎，並能解釋其中原理
• 手寫 懶加載、 下拉刷新、 上拉加載、 預加載等效果

數據結構

• 理解常見數據結構的特點，以及他們在不同場景下使用的優缺點
• 理解 數組、 字符串的存儲原理，並熟練應用他們解決問題
• 理解 二叉樹、 棧、 隊列、 哈希表的基本結構和特點，並可以應用它解決問題
• 瞭解 圖、 堆的基本結構和使用場景

算法

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

五、運行環境

我們需要理清語言和環境的關係：

ECMAScript描述了 JavaScript語言的語法和基本對象規範

瀏覽器作爲 JavaScript的一種運行環境，爲它提供了：文檔對象模型（ DOM），描述處理網頁內容的方法和接口、瀏覽器對象模型（ BOM），描述與瀏覽器進行交互的方法和接口

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

瀏覽器API

• 瀏覽器提供的符合 W3C標準的 DOM操作 API、瀏覽器差異、兼容性
• 瀏覽器提供的瀏覽器對象模型 ( BOM)提供的所有全局 API、瀏覽器差異、兼容性
• 大量 DOM操作、海量數據的性能優化(合併操作、 Diff、 requestAnimationFrame等)
• 瀏覽器海量數據存儲、操作性能優化
• DOM事件流的具體實現機制、不同瀏覽器的差異、事件代理
• 前端發起網絡請求的幾種方式及其底層實現、可以手寫原生 ajax、 fetch、可以熟練使用第三方庫
• 瀏覽器的同源策略，如何避免同源策略，幾種方式的異同點以及如何選型
• 瀏覽器提供的幾種存儲機制、優缺點、開發中正確的選擇
• 瀏覽器跨標籤通信

瀏覽器原理

• 各瀏覽器使用的 JavaScript引擎以及它們的異同點、如何在代碼中進行區分
• 請求數據到請求結束與服務器進行了幾次交互
• 可詳細描述瀏覽器從輸入 URL到頁面展現的詳細過程
• 瀏覽器解析 HTML代碼的原理，以及構建 DOM樹的流程
• 瀏覽器如何解析 CSS規則，並將其應用到 DOM樹上
• 瀏覽器如何將解析好的帶有樣式的 DOM樹進行繪製
• 瀏覽器的運行機制，如何配置資源異步同步加載
• 瀏覽器迴流與重繪的底層原理，引發原因，如何有效避免
• 瀏覽器的垃圾回收機制，如何避免內存泄漏
• 瀏覽器採用的緩存方案，如何選擇和控制合適的緩存方案

Node

• 理解 Node在應用程序中的作用，可以使用 Node搭建前端運行環境、使用 Node操作文件、操作數據庫等等
• 掌握一種 Node開發框架，如 Express， Express和 Koa的區別
• 熟練使用 Node提供的 API如 Path、 Http、 ChildProcess等並理解其實現原理
• Node的底層運行原理、和瀏覽器的異同
• Node事件驅動、非阻塞機制的實現原理

六、框架和類庫

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

TypeScript

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

React

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

Vue

• 熟練使用 Vue的 API、生命週期、鉤子函數
• MVVM框架設計理念
• Vue雙向綁定實現原理、 Diff算法的內部實現
• Vue的事件機制
• 從 template轉換成真實 DOM的實現機制

多端開發

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

數據流管理

• 掌握 React和 Vue傳統的跨組件通信方案，對比採用數據流管理框架的異同
• 熟練使用 Redux管理數據流，並理解其實現原理，中間件實現原理
• 熟練使用 Mobx管理數據流，並理解其實現原理，相比 Redux有什麼優勢
• 熟練使用 Vuex管理數據流，並理解其實現原理
• 以上數據流方案的異同和優缺點，不情況下的技術選型

實用庫

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

開發和調試

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

七、前端工程

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

項目構建

• 理解 npm、 yarn依賴包管理的原理，兩者的區別
• 可以使用 npm運行自定義腳本
• 理解 Babel、 ESLint、 webpack等工具在項目中承擔的作用
• ESLint規則檢測原理，常用的 ESLint配置
• Babel的核心原理，可以自己編寫一個 Babel插件
• 可以配置一種前端代碼兼容方案，如 Polyfill
• Webpack的編譯原理、構建流程、熱更新原理， chunk、 bundle和 module的區別和應用
• 可熟練配置已有的 loaders和 plugins解決問題，可以自己編寫 loaders和 plugins

nginx

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

開發提速

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

版本控制

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

持續集成

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

八、項目和業務

後端技能

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

性能優化

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

前端安全

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

業務相關

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

九、學習提升

vczh大神在知乎問題【如何能以後達到溫趙輪三位大神的水平？】下的回答：
這十幾年我一共做了三件事：

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

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

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

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

十、技術之外

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

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

十一、資源推薦

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

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

語言基礎

• JavaScript高級程序設計：https://book.douban.com/subject/10546125/
• 高性能 JavaScript：https://book.douban.com/subject/5362856/
• 現代 JavaScript教程：https://zh.javascript.info/
• 阮一峯的 ECMAScript6教程：http://es6.ruanyifeng.com/
• ECMAScript6標準：https://www.ecma-international.org/ecma-262/6.0/
• HTML meta標籤總結與屬性使用介紹：https://segmentfault.com/a/1190000004279791
• CSS編碼指導：https://github.com/chadluo/CSS-Guidelines/blob/master/README.md

計算機基礎

• 大前端開發者需要了解的基礎編譯原理和語言知識：http://fullstack.blog/2017/06/24/%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%80%85%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%84%E5%9F%BA%E7%A1%80%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86%E5%92%8C%E8%AF%AD%E8%A8%80%E7%9F%A5%E8%AF%86
• 圖解 HTTP：https://book.douban.com/subject/25863515/
• JavaScript設計模式與開發實踐：https://book.douban.com/subject/26382780/
• 正則表達式30分鐘入門教程：https://link.juejin.im/?target=https%3A%2F%2Fdeerchao.net%2Ftutorials%2Fregex%2Fregex.htm

數據結構和算法

• 數據結構與算法之美：https://time.geekbang.org/column/intro/126
• 用動畫的形式呈現解LeetCode題目的思路：https://github.com/MisterBooo/LeetCodeAnimation
• JavaScript數據結構和算法：https://github.com/ConardLi/awesome-coding-js
• 30-seconds-of-code：https://github.com/ConardLi/30-seconds-of-code-Zh-CN

運行環境

• 圖解瀏覽器的基本工作原理：https://zhuanlan.zhihu.com/p/47407398
• 七天學會 NodeJS：https://github.com/nqdeng/7-days-nodejs
• Node.js模塊加載與運行原理：https://efe.baidu.com/blog/nodejs-module-analyze/

框架和類庫

• TypeScriptHandbookhttps://zhongsp.gitbooks.io/typescript-handbook/content/
• React.js小書：http://huziketang.mangojuice.top/books/react/
• React深入系列：https://juejin.im/post/5cad39b3f265da03502b1c0a
• WebpackReact小書：https://fakefish.github.io/react-webpack-cookbook/index.html
• Vue.js技術揭祕：https://github.com/ustbhuangyi/vue-analysis
• Vuex-在 Vue中管理狀態：https://sabe.io/tutorials/getting-started-with-vuex
• 你需Mobx還是 Redux？：https://juejin.im/post/5a7fd72c5188257a766324ae
• Underscore源碼分析：https://yoyoyohamapi.gitbooks.io/undersercore-analysis/content/
• 微信小程序開發資源彙總：https://github.com/justjavac/awesome-wechat-weapp
• 騰訊移動 Web前端知識庫：https://github.com/AlloyTeam/Mars

前端工程

• 一口（很長的）氣了解 babel：https://zhuanlan.zhihu.com/p/43249121
• Webpack傻瓜式指南：https://zhuanlan.zhihu.com/p/20367175
• Webpack原理：https://segmentfault.com/a/1190000015088834?utm_source=tag-newest
• 廖雪峯git教程：https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
• 圖解 Git：https://marklodato.github.io/visual-git-guide/index-zh-cn.html
• 必備Nginx知識：https://juejin.im/post/5c85a64d6fb9a04a0e2e038c
• 使用Jenkins進行持續集成：https://www.liaoxuefeng.com/article/001463233913442cdb2d1bd1b1b42e3b0b29eb1ba736c5e000

項目和業務

• 常見六大 Web安全攻防解析：https://github.com/ljianshu/Blog/issues/56
• 深入理解前端性能監控：https://juejin.im/post/5caaacc0e51d452b45296487#heading-5
• [📚]高性能網站建設指南：https://book.douban.com/subject/3132277/
• 新人如何快速融入技術實力強的前端團隊：https://juejin.im/post/5cb860a86fb9a06890705f14

學習提升

• 印記中文（各種中文開發文檔）：https://www.docschina.org/
• 前端學習方法：https://github.com/helloqingfeng/Awsome-Front-End-learning-resource/tree/master/01-FE-learning-master
• 如何在工作內外獲得持續的技術成長：https://juejin.im/post/5cbd7477f265da039d32834e
• 優秀的前端博客彙總：https://github.com/foru17/front-end-collect

另外推薦我一直在關注的幾位大佬的個人博客：

• 冴羽的博客：https://github.com/mqyqingfeng/Blog
• 張鑫旭的博客：https://www.zhangxinxu.com/wordpress/
• 左耳朵耗子：https://coolshell.cn/

技術之外

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

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

小結

希望你閱讀本篇文章後可以達到以下幾點：

• 從知識清單中找到自己的知識盲點與欠缺
• 具有知識體系化的思想，開始建立自己的知識體系
• 閱讀文章時將知識歸類到知識體系中，並不斷完善自己的知識體系
• 從文章中獲取到了有用的資源