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

時間  2020-06-16
標籤 一名 合格 前端 工程師 自檢 清單 简体版
原文   原文鏈接

開篇

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

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

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

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

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

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

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

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

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

1、JavaScript基礎

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

變量和類型

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

    答：JavaScript7種 ,null,undefined,Boolean,String,Number,symbol,object

  • 2.JavaScript對象的底層數據結構是什麼

    答：JS 運行原理:
  1. 每調用一個函數就會生成一個執行環境（俗稱執行上下文）,執行上下文環境數量沒有限制
  2. 棧頂永遠是正在執行的函數， 函數執行完， 彈出棧，以此類推，全局環境在最底部，
    先進後出的原則。
  3. 單線程
  4. 同步執行，只有棧頂的上下文處於執行中，其餘上下文須要等待
  5. 每次某個函數被調用，就會有個新的執行上下文爲其建立，即便是調用的自身函數，也是如此。
    JS 生命週期:
  6. JS運行時分兩個階段， 編譯階段,以及執行階段。 編譯階段會進行此法解析，代碼檢查，以及肯定
    做用域規則
  7. 執行階段又分爲兩個階段， 建立上下文以及運行代碼
  8. 建立上下文，會建立一個變量對象，用來存儲 參數，以及變量，肯定this指向，肯定做用域鏈
  9. 運行代碼階段，進行賦值等等。

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

    答：Symbol是Es6中新增的一個基本類型 Symbol！==Symbol， 如定義對象const A=new Symbol（） const B=new 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.理解多端框架的內部實現原理，至少了解一個多端框架的使用

    數據流管理

    • 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等框架調試工具的使用

    7、前端工程

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

    項目構建

    • 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等等）

    8、項目和業務

    後端技能

    • 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.能夠將本身的想法或新技術在業務中落地實踐，儘可能在團隊中擁有必定的不可替代性

    9、學習提高

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

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

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

    上面幾點可能有點難，第一點我就作不到，可是作到下面績點仍是比較容易的。

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

    • 1.擁有本身的技術博客，或者在一些博客平臺上擁有本身的專欄

    • 2.按期的將知識進行總結，不斷完善本身的知識體系

    • 3.儘可能將本身的知識轉換成真實的產出，不要僅僅停留在書面理解層面，更重要的是實際應用

    • 4.堅持輸出本身的代碼，不要盲目的扎進公司業

    10、技術以外

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

    • 1.瞭解互聯網人員術語：CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等

    • 2.瞭解互聯網行業術語：B2B、B2C、C2C、O2O等

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

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

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

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

    11、資源推薦

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

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

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

    下面是一些我以爲還不錯的文章、博客或者書籍教程等等，分享給你們，資源很少，但都是精品。

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

    語言基礎

    計算機基礎

    數據結構和算法

    運行環境

    框架和類庫

    前端工程

    項目和業務

    學習提高

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

    技術以外

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

    小結

    但願你閱讀本篇文章後能夠達到如下幾點：

    • 從知識清單中找到本身的知識盲點與欠缺

    • 具備知識體系化的思想，開始創建本身的知識體系

    • 閱讀文章時將知識歸類到知識體系中，並不斷完善本身的知識體系

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

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

    若是你有什麼好的知識、資源推薦，歡迎在評論區留言。

    轉載做者：https://juejin.im/post/5cc1da82f265da036023b628

    相關文章
    相關標籤/搜索
    每日一句
      每一个你不满意的现在，都有一个你没有努力的曾经。
    本站公眾號
       歡迎關注本站公眾號,獲取更多信息
    聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程