一名【合格】前端工程師的自檢清單

ConardLi發表於2019-04-26

開篇

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

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

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

這樣是一個非常真實的現狀,實際上很多前端開發者都是自學甚至轉行過來的,前端入門簡單,學習了幾個API以後上手做專案也很簡單,但是這往往成為了限制自身發展的瓶頸。

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

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

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

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

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

一名【合格】前端工程師的自檢清單

一、JavaScript基礎

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

變數和型別

  • 1.JavaScript規定了幾種語言型別

  • 2.JavaScript物件的底層資料結構是什麼

  • 3.Symbol型別在實際開發中的應用、可手動實現一個簡單的Symbol

  • 4.JavaScript中的變數在記憶體中的具體儲存形式

  • 5.基本型別對應的內建物件,以及他們之間的裝箱拆箱操作

  • 6.理解值型別和引用型別

  • 7.nullundefined的區別

  • 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裡面放returnfinally還會執行,理解其內部機制

  • 2.JavaScript如何實現非同步程式設計,可以詳細描述EventLoop機制

  • 3.巨集任務和微任務分別有哪些

  • 4.可以快速分析一個複雜的非同步巢狀邏輯,並掌握分析方法

  • 5.使用Promise實現序列

  • 6.Node與瀏覽器EventLoop的差異

  • 7.如何在保證頁面執行流暢的情況下處理海量資料

語法和API

  • 1.理解ECMAScriptJavaScript的關係

  • 2.熟練運用es5es6提供的語法規範,

  • 3.熟練掌握JavaScript提供的全域性物件(例如DateMath)、全域性函式(例如decodeURIisNaN)、全域性屬性(例如Infinityundefined

  • 4.熟練應用mapreducefilter 等高階函式解決問題

  • 5.setInterval需要注意的點,使用settimeout實現setInterval

  • 6.JavaScript提供的正規表示式API、可以使用正規表示式(郵箱校驗、URL解析、去重等)解決常見問題

  • 7.JavaScript異常處理的方式,統一的異常處理方案

二、HTML和CSS

HTML

  • 1.從規範的角度理解HTML,從分類和語義的角度使用標籤

  • 2.常用頁面標籤的預設樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器相容問題的方式

  • 3.元資訊類標籤(headtitlemeta)的使用目的和配置方法

  • 4.HTML5離線快取原理

  • 5.可以使用Canvas APISVG等繪製高效能的動畫

CSS

  • 1.CSS盒模型,在不同瀏覽器的差異

  • 2.CSS所有選擇器及其優先順序、使用場景,哪些可以繼承,如何運用at規則

  • 3.CSS偽類和偽元素有哪些,它們的區別和實際應用

  • 4.HTML文件流的排版規則,CSS幾種定位的規則、定位參照物、對文件流的影響,如何選擇最好的定位方式,雪碧圖實現原理

  • 5.水平垂直居中的方案、可以實現6種以上並對比它們的優缺點

  • 6.BFC實現原理,可以解決的問題,如何建立BFC

  • 7.可使用CSS函式複用程式碼,實現特殊效果

  • 8.PostCSSSassLess的異同,以及使用配置,至少掌握一種

  • 9.CSS模組化方案、如何配置按需載入、如何防止CSS阻塞渲染

  • 10.熟練使用CSS實現常見動畫,如漸變、移動、旋轉、縮放等等

  • 11.CSS瀏覽器相容性寫法,瞭解不同API在不同瀏覽器下的相容性情況

  • 12.掌握一套完整的響應式佈局方案

手寫

  • 1.手寫圖片瀑布流效果

  • 2.使用CSS繪製幾何圖形(圓形、三角形、扇形、菱形等)

  • 3.使用純CSS實現曲線運動(貝塞爾曲線)

  • 4.實現常用佈局(三欄、聖盃、雙飛翼、吸頂),可是說出多種方式並理解其優缺點

三、計算機基礎

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

編譯原理

  • 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.1HTTP2.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.stringifyJSON.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操作、海量資料的效能優化(合併操作、DiffrequestAnimationFrame等)

  • 4.瀏覽器海量資料儲存、操作效能優化

  • 5.DOM事件流的具體實現機制、不同瀏覽器的差異、事件代理

  • 6.前端發起網路請求的幾種方式及其底層實現、可以手寫原生ajaxfetch、可以熟練使用第三方庫

  • 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開發框架,如ExpressExpressKoa的區別

  • 3.熟練使用Node提供的APIPathHttpChild Process等並理解其實現原理

  • 4.Node的底層執行原理、和瀏覽器的異同

  • 5.Node事件驅動、非阻塞機制的實現原理

六、框架和類庫

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

TypeScript

  • 1.理解泛型介面等物件導向的相關概念,TypeScript對物件導向理念的實現

  • 2.理解使用TypeScript的好處,掌握TypeScript基礎語法

  • 3.TypeScript的規則檢測原理

  • 4.可以在ReactVue等框架中使用TypeScript進行開發

React

  • 1.Reactvue選型和優缺點、核心架構的區別

  • 2.ReactsetState的執行機制,如何有效的管理狀態

  • 3.React的事件底層實現機制

  • 4.React的虛擬DOMDiff演算法的內部實現

  • 5.ReactFiber工作原理,解決了什麼問題

  • 6.React RouterVue Router的底層實現原理、動態載入實現原理

  • 7.可熟練應用React API、生命週期等,可應用HOCrender propsHooks等高階用法解決問題

  • 8.基於React的特性和原理,可以手動實現一個簡單的React

Vue

  • 1.熟練使用VueAPI、生命週期、鉤子函式

  • 2.MVVM框架設計理念

  • 3.Vue雙向繫結實現原理、Diff演算法的內部實現

  • 4.Vue的事件機制

  • 5.從template轉換成真實DOM的實現機制

多端開發

  • 1.單頁面應用(SPA)的原理和優缺點,掌握一種快速開發SPA的方案

  • 2.理解Viewportemrem的原理和用法,解析度、pxppidpidp的區別和實際應用

  • 3.移動端頁面適配解決方案、不同機型適配方案

  • 4.掌握一種JavaScript移動客戶端開發技術,如React Native:可以搭建React Native開發環境,熟練進行開發,可理解React Native的運作原理,不同端適配

  • 5.掌握一種JavaScript PC客戶端開發技術,如Electron:可搭建Electron開發環境,熟練進行開發,可理解Electron的運作原理

  • 6.掌握一種小程式開發框架或原生小程式開發

  • 7.理解多端框架的內部實現原理,至少了解一個多端框架的使用

資料流管理

  • 1.掌握ReactVue傳統的跨元件通訊方案,對比採用資料流管理框架的異同

  • 2.熟練使用Redux管理資料流,並理解其實現原理,中介軟體實現原理

  • 3.熟練使用Mobx管理資料流,並理解其實現原理,相比Redux有什麼優勢

  • 4.熟練使用Vuex管理資料流,並理解其實現原理

  • 5.以上資料流方案的異同和優缺點,不情況下的技術選型

實用庫

  • 1.至少掌握一種UI元件框架,如antd design,理解其設計理念、底層實現

  • 2.掌握一種圖表繪製框架,如Echart,理解其設計理念、底層實現,可以自己實現圖表

  • 3.掌握一種GIS開發框架,如百度地圖API

  • 4.掌握一種視覺化開發框架,如Three.jsD3

  • 5.工具函式庫,如lodashunderscoremoment等,理解使用的工具類或工具函式的具體實現原理

開發和除錯

  • 1.熟練使用各瀏覽器提供的除錯工具

  • 2.熟練使用一種代理工具實現請求代理、抓包,如charls

  • 3.可以使用AndroidIOS模擬器進行除錯,並掌握一種真機除錯方案

  • 4.瞭解VueReact等框架除錯工具的使用

七、前端工程

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

專案構建

  • 1.理解npmyarn依賴包管理的原理,兩者的區別

  • 2.可以使用npm執行自定義指令碼

  • 3.理解BabelESLintwebpack等工具在專案中承擔的作用

  • 4.ESLint規則檢測原理,常用的ESLint配置

  • 5.Babel的核心原理,可以自己編寫一個Babel外掛

  • 6.可以配置一種前端程式碼相容方案,如Polyfill

  • 7.Webpack的編譯原理、構建流程、熱更新原理,chunkbundlemodule的區別和應用

  • 8.可熟練配置已有的loadersplugins解決問題,可以自己編寫loadersplugins

nginx

  • 1.正向代理與反向代理的特點和例項

  • 2.可手動搭建一個簡單的nginx伺服器、

  • 3.熟練應用常用的nginx內建變數,掌握常用的匹配規則寫法

  • 4.可以用nginx實現請求過濾、配置gzip、負載均衡等,並能解釋其內部原理

開發提速

  • 1.熟練掌握一種介面管理、介面mock工具的使用,如yapi

  • 2.掌握一種高效的日誌埋點方案,可快速使用日誌查詢工具定位線上問題

  • 3.理解TDDBDD模式,至少會使用一種前端單元測試框架

版本控制

  • 1.理解Git的核心原理、工作流程、和SVN的區別

  • 2.熟練使用常規的Git命令、git rebasegit stash等進階命令

  • 3.可以快速解決線上分支回滾線上分支錯誤合併等複雜問題

持續整合

  • 1.理解CI/CD技術的意義,至少熟練掌握一種CI/CD工具的使用,如Jenkins

  • 2.可以獨自完成架構設計、技術選型、環境搭建、全流程開發、部署上線等一套完整的開發流程(包括Web應用、移動客戶端應用、PC客戶端應用、小程式、H5等等)

八、專案和業務

後端技能

  • 1.瞭解後端的開發方式,在應用程式中的作用,至少會使用一種後端語言

  • 2.掌握資料最終在資料庫中是如何落地儲存的,能看懂表結構設計、表之間的關聯,至少會使用一種資料庫

效能優化

  • 1.瞭解前端效能衡量指標、效能監控要點,掌握一種前端效能監控方案

  • 2.瞭解常見的WebApp效能優化方案

  • 3.SEO排名規則、SEO優化方案、前後端分離的SEO

  • 4.SSR實現方案、優缺點、及其效能優化

  • 5.Webpack的效能優化方案

  • 6.Canvas效能優化方案

  • 7.ReactVue等框架使用效能優化方案

前端安全

  • 1.XSS攻擊的原理、分類、具體案例,前端如何防禦

  • 2.CSRF攻擊的原理、具體案例,前端如何防禦

  • 3.HTTP劫持、頁面劫持的原理、防禦措施

業務相關

  • 1.能理解所開發專案的整體業務形態、業務目標、業務架構,可以快速定位線上業務問題

  • 2.能理解所開發專案整體的技術架構、能快讀的根據新需求進行開發規劃、能快速根據業務報警、線上日誌等定位並解決線上技術問題

  • 3.可以將自己的想法或新技術在業務中落地實踐,儘量在團隊中擁有一定的不可替代性

九、學習提升

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

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

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

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

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

  • 1.擁有自己的技術部落格,或者在一些部落格平臺上擁有自己的專欄

  • 2.定期的將知識進行總結,不斷完善自己的知識體系

  • 3.儘量將自己的知識轉換成真實的產出,不要僅僅停留在書面理解層面,更重要的是實際應用

  • 4.堅持輸出自己的程式碼,不要盲目的扎進公司業

十、技術之外

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

  • 1.瞭解網際網路人員術語:CEOCTOCOOCFOPMQAUIFEDEVDBAOPS

  • 2.瞭解網際網路行業術語:B2BB2CC2CO2O

  • 3.掌握網際網路行業溝通、問答、學習的

  • 4.有一定的"PPT"能力

  • 5.有一定的理財意識,至少了解儲蓄、貨幣基金、保險、指數基金、股票等基本的理財知識

  • 6.掌握在繁重的工作和長期的電腦輻射的情況下保持健康的方法,建立正確的養生知識體系

十一、資源推薦

有了知識體系,在閱讀一篇技術文章的時候就很容易把它歸類,我一直以來就是這樣做的。

事實證明,在閱讀文章或書籍時,有目的和歸類的閱讀比"隨便看看"後的只是留存率要高很多。

每閱讀到一篇好的文章或者書籍,我都會收藏並歸類到我的知識體系中。

下面是一些我覺得還不錯的文章、部落格或者書籍教程等等,分享給大家,資源不多,但都是精品。

學習一門知識,最好先閱讀官方文件,把所有的API大概瀏覽一遍,再繼續看大佬們總結的進階知識,什麼東西是搬運過來的,什麼是乾貨,一目瞭然。

語言基礎

計算機基礎

資料結構和演算法

執行環境

框架和類庫

前端工程

專案和業務

學習提升

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

技術之外

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

小結

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

  • 從知識清單中找到自己的知識盲點與欠缺

  • 具有知識體系化的思想,開始建立自己的知識體系

  • 閱讀文章時將知識歸類到知識體系中,並不斷完善自己的知識體系

  • 從文章中獲取到了有用的資源

文中如有錯誤,歡迎在評論區指正,如果這篇文章幫助到了你,歡迎點贊和關注。

如果你有什麼好的知識、資源推薦,歡迎在評論區留言。

想閱讀更多優質文章、下載文章中思維導圖原始檔、可關注我的github部落格,後續的文章我也會按照知識清單來寫,你的star✨、點贊和關注是我持續創作的動力!

推薦關注我的微信公眾號【code祕密花園】,每天推送高質量文章,我們一起交流成長。

一名【合格】前端工程師的自檢清單

相關文章