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

時間 2019-11-05

標籤一名合格前端工程師自檢清單简体版

原文原文鏈接

開篇

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

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

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

這樣是一個很是真實的現狀，實際上不少前端開發者都是自學甚至轉行過來的，前端入門簡單，學習了幾個API之後上手作項目也很簡單，可是這每每成爲了限制自身發展的瓶頸。vue

只是停留在會用階段是遠遠不夠的，咱們還須要不斷探索和深刻。如今市面上並不缺乏學習教程，技術文章，若是盲目的學習你會發現看過之後的知識留存率會很低，並且發現沒有了解到的知識愈來愈多，這會讓人產生焦慮。java

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

我會把我工做和學習中接觸到的知識所有概括到個人知識體系中，其中不只僅包括我已經學過的，還有不少我沒有來得及學習的。react

這不只僅是個人知識體系，更是我時刻提醒本身的自檢清單。webpack

下面我會把個人自檢清單分享給你們，你能夠按照清單上的知識檢測本身還有哪些不足和提高，我也建議你們建本身的知識體系，這樣工做或者學習甚至面試時，你能快速定位到知識清單中的點，若是你有哪些我沒概括到的點，歡迎在評論區告訴我。nginx

1、JavaScript基礎

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

變量和類型

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異常處理的方式，統一的異常處理方案

2、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.實現經常使用佈局（三欄、聖盃、雙飛翼、吸頂），但是說出多種方式並理解其優缺點

3、計算機基礎

關於編譯原理，不須要理解很是深刻，可是最基本的原理和概念必定要懂，這對於學習一門編程語言很是重要

編譯原理

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.能夠說出幾種設計模式在開發中的實際應用，理解框架源碼中對設計模式的應用

4、數據結構和算法

據我瞭解的大部分前端對這部分知識有些欠缺，甚至抵觸，可是，若是突破更高的天花板，這部分知識是必不可少的，並且我親身經歷——很是有用！

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.前端處理海量數據的算法方案

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事件驅動、非阻塞機制的實現原理

6、框架和類庫

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

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.理解多端框架的內部實現原理，至少了解一個多端框架的使用