一份不想成為勸退清單的勸退清單

一、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
• 3.實現繼承的幾種方式以及他們的優缺點
• 4.至少說出一種開源項目(如Node)中應用原型繼承的案例
• 5.可以描述new一個對象的詳細過程，手動實現一個new操作符
• 6.理解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.實現常用布局（三欄、圣杯、雙飛翼、吸頂），可是說出多種方式并理解其優缺點

三、計算機基礎

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

編譯原理

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

小結

是不是以為要結束了，都到小結了，哈哈，給你一個驚喜，再來看一份清單（檢驗一下成果）：

• 你關于性能優化是否只知道js文件擺放順序、減少請求、雪碧圖等等，卻連衡量指標window.performance.timing都不清楚是干什么的？
• 請你描述下一個網頁是如何渲染出來的，dom樹和css樹是如何合并的，瀏覽器的運行機制是什么，什么是否會造成渲染阻塞？
• 請簡述下js引擎的工作原理，js是怎樣處理事件的eventloop，宏任務源tasks和微任務源jobs分別有哪些？js是如何構造抽象語法書（AST）的？
• 你是否考慮全面你編寫的整個函數，或者整個功能的容錯性與擴展性？怎樣構建一個組件是最合理最科學的，對于錯誤的處理是否有統一的方式方法？
• 瀏覽器緩存的基本策略，什么時候該緩存什么時候不該緩存，以及對于控制緩存的字段的相關設置是否清楚？
• 你是否可以利用面向對象的思維去抽象你的功能，你會構建一個class（ES6）嗎？你對于前端架構的理解？
• 你會用VUE，你會用React，你讀得懂這兩個架構的源碼嗎？你懂他倆的基本設計模式嗎？讓你去構建一個類似的框架你如何下手？
• 你了解的ES6只是const、let、promise嗎？你考慮過ES6提出的真正趨勢嗎？
• 你會用less，那么讓你去寫一個loader你可以嗎？
• webpack你也會用，你了解其中原理嗎？你知道分析打包依賴的過程嗎？你知道tree-shakeing是如何干掉無用重復的代碼的嗎？
• 你真的熟練使用css嗎，那你知道position有幾個屬性嗎
• 你了解js的數據結構嗎？基本數據類型有哪些？復雜數據類型有哪些？在內存是如何表現的？
• 你可以用js去實現一個單向、雙向、循環鏈表嗎？你可以實現查找、插入、刪除操作嗎？
• 你了解基本常見算法嗎？快速排序寫一個？要是限制空間利用你該如何寫？
• 你了解貪心算法、動態規劃、分治算法、回溯算法等常見的算法嗎？
• 你是如何理解前端架構的？你了解持續集成嗎？
• 你了解基本的設計模式嗎？舉例單例模式、策略模式、代理模式、迭代模式、發布訂閱模式等等？
• 寫一個事件監聽函數唄？實現once、on、remove、emit功能
• node.js的實現層是什么？
• node的事件循環機制是怎樣的？
• node的child_process模塊有幾個api,分別的作用是什么？
• http1.0與1.1協議的區別？
• node是如何實現http模塊的？
• 如何構建一個主從模式？
• nginx相關配置了解過嗎？
• 如何看待前后端分離？（前端負責將數據按照產品設計渲染以及調用后端接口實現產品功能，而后端則提供數據接口，功能接口！前后端分離的開發模式是為了讓專業的人做專業的事，且現在前端和后端可以通過接口文檔實現并行開發，提高開發效率。）
• 你真的理解前端嗎？ （最最最扎心的問題，看完這些清單，可以試著正式回答一下這個問題）

認真的小結：

我自己看到這些問題的時候真的會被勸退，哈哈，感覺自己好菜，但是吧，人總是要成長的，為了那個多多的money，想想其實也挺簡單的，努力努力應該也可以吧，我猜，哈哈，讓我們一起在評論區打卡吧，先評論出你還沒開始認真學習這份清單是的薪資，最后再來展示一下學習完之后你的薪資，一起努力吧，一起打卡！！！（希望我別先放棄了哈哈！！）

總結

以上是生活随笔為你收集整理的一名前端工程师自检清单与思考（来吧，干完这套清单年薪30不是梦）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。