前端技能自檢

轉(zhuǎn)自：code秘密花園

開篇

前端開發(fā)是一個(gè)非常特殊的行業(yè)，它的歷史實(shí)際上不是很長(zhǎng)艾扮，但是知識(shí)之繁雜谒主，技術(shù)迭代速度之快掉盅，是其他技術(shù)所不能比擬的也拜。

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

“到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一怔接√掠荆可是稀轨，與此相對(duì)的是扼脐，我發(fā)現(xiàn)極少或者幾乎沒有大學(xué)的計(jì)算機(jī)專業(yè)愿意開設(shè)前端課程，更沒有系統(tǒng)性的教學(xué)方案出現(xiàn)奋刽。大部分前端工程師的知識(shí)瓦侮，其實(shí)都是來自于實(shí)踐和工作中零散的學(xué)習(xí)”。

這樣是一個(gè)非常真實(shí)的現(xiàn)狀佣谐，實(shí)際上很多前端開發(fā)者都是自學(xué)甚至轉(zhuǎn)行過來的肚吏，前端入門簡(jiǎn)單，學(xué)習(xí)了幾個(gè) API以后上手做項(xiàng)目也很簡(jiǎn)單狭魂，但是這往往成為了限制自身發(fā)展的瓶頸罚攀。只是停留在會(huì)用階段是遠(yuǎn)遠(yuǎn)不夠的，我們還需要不斷探索和深入〈瞥危現(xiàn)在市面上并不缺少學(xué)習(xí)教程斋泄，技術(shù)文章，如果盲目的學(xué)習(xí)你會(huì)發(fā)現(xiàn)看過以后的知識(shí)留存率會(huì)很低镐牺，而且發(fā)現(xiàn)沒有了解到的知識(shí)越來越多炫掐，這會(huì)讓人產(chǎn)生焦慮。

實(shí)際上睬涧，除了堅(jiān)持學(xué)習(xí)的強(qiáng)大的自驅(qū)力募胃，你還需要一個(gè)很簡(jiǎn)單的學(xué)習(xí)方法旗唁。那就是：建立自己的知識(shí)體系。它能幫助你更系統(tǒng)性的學(xué)習(xí)痹束，同時(shí)你也時(shí)刻能知道自己哪些地方是不足的检疫。

我會(huì)把我工作和學(xué)習(xí)中接觸到的知識(shí)全部歸納到我的知識(shí)體系中，其中不僅僅包括我已經(jīng)學(xué)過的祷嘶，還有很多我沒有來得及學(xué)習(xí)的电谣。

這不僅僅是我的知識(shí)體系，更是我時(shí)刻提醒自己的自檢清單抹蚀。

下面我會(huì)把我的自檢清單分享給大家剿牺，你可以按照清單上的知識(shí)檢測(cè)自己還有哪些不足和提升，我也建議大家構(gòu)建自己的知識(shí)體系环壤，這樣工作或者學(xué)習(xí)甚至面試時(shí)晒来，你能快速定位到知識(shí)清單中的點(diǎn)。

知識(shí)體系

一郑现、JavaScript基礎(chǔ)

前端工程師吃飯的家伙湃崩，深度、廣度一樣都不能差接箫。

變量和類型

  • JavaScript規(guī)定了幾種語言類型
  • JavaScript對(duì)象的底層數(shù)據(jù)結(jié)構(gòu)是什么
  • Symbol類型在實(shí)際開發(fā)中的應(yīng)用攒读、可手動(dòng)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Symbol
  • JavaScript中的變量在內(nèi)存中的具體存儲(chǔ)形式
  • 基本類型對(duì)應(yīng)的內(nèi)置對(duì)象，以及他們之間的裝箱拆箱操作
  • 理解值類型和引用類型
  • null和 undefined的區(qū)別
  • 至少可以說出三種判斷 JavaScript數(shù)據(jù)類型的方式辛友，以及它們的優(yōu)缺點(diǎn)薄扁，如何準(zhǔn)確的判斷數(shù)組類型
  • 可能發(fā)生隱式類型轉(zhuǎn)換的場(chǎng)景以及轉(zhuǎn)換原則，應(yīng)如何避免或巧妙應(yīng)用
  • 出現(xiàn)小數(shù)精度丟失的原因废累， JavaScript可以存儲(chǔ)的最大數(shù)字邓梅、最大安全數(shù)字， JavaScript處理大數(shù)字的方法邑滨、避免精度丟失的方法

原型和原型鏈

  • 理解原型設(shè)計(jì)模式以及 JavaScript中的原型規(guī)則
  • instanceof的底層實(shí)現(xiàn)原理日缨，手動(dòng)實(shí)現(xiàn)一個(gè) instanceof
  • 實(shí)現(xiàn)繼承的幾種方式以及它們的優(yōu)缺點(diǎn)
  • 至少說出一種開源項(xiàng)目(如 Node)中應(yīng)用原型繼承的案例
  • 可以描述 new一個(gè)對(duì)象的詳細(xì)過程，手動(dòng)實(shí)現(xiàn)一個(gè) new操作符
  • 理解 es6 class構(gòu)造以及繼承的底層實(shí)現(xiàn)原理

作用域和閉包

  • 理解詞法作用域和動(dòng)態(tài)作用域
  • 理解 JavaScript的作用域和作用域鏈
  • 理解 JavaScript的執(zhí)行上下文棧掖看，可以應(yīng)用堆棧信息快速定位問題
  • this的原理以及幾種不同使用場(chǎng)景的取值
  • 閉包的實(shí)現(xiàn)原理和作用匣距，可以列舉幾個(gè)開發(fā)中閉包的實(shí)際應(yīng)用
  • 理解堆棧溢出和內(nèi)存泄漏的原理，如何防止
  • 如何處理循環(huán)的異步操作
  • 理解模塊化解決的實(shí)際問題哎壳，可列舉幾個(gè)模塊化方案并理解其中原理

執(zhí)行機(jī)制

  • 為何 try里面放 return毅待， finally還會(huì)執(zhí)行，理解其內(nèi)部機(jī)制
  • JavaScript如何實(shí)現(xiàn)異步編程耳峦，可以詳細(xì)描述 EventLoop機(jī)制
  • 宏任務(wù)和微任務(wù)分別有哪些
  • 可以快速分析一個(gè)復(fù)雜的異步嵌套邏輯恩静，并掌握分析方法
  • 使用 Promise實(shí)現(xiàn)串行
  • Node與瀏覽器 EventLoop的差異
  • 如何在保證頁面運(yùn)行流暢的情況下處理海量數(shù)據(jù)

語法和API

  • 理解 ECMAScript和 JavaScript的關(guān)系
  • 熟練運(yùn)用 es5、 es6提供的語法規(guī)范，
  • 熟練掌握 JavaScript提供的全局對(duì)象（例如 Date驶乾、 Math）邑飒、全局函數(shù)（例如 decodeURI、 isNaN）级乐、全局屬性（例如 Infinity疙咸、 undefined）
  • 熟練應(yīng)用 map、 reduce风科、 filter 等高階函數(shù)解決問題
  • setInterval需要注意的點(diǎn)撒轮，使用 settimeout實(shí)現(xiàn) setInterval
  • JavaScript提供的正則表達(dá)式 API、可以使用正則表達(dá)式（郵箱校驗(yàn)贼穆、 URL解析题山、去重等）解決常見問題
  • JavaScript異常處理的方式，統(tǒng)一的異常處理方案

二故痊、HTML和CSS

HTML

  • 從規(guī)范的角度理解 HTML顶瞳，從分類和語義的角度使用標(biāo)簽
  • 常用頁面標(biāo)簽的默認(rèn)樣式、自帶屬性愕秫、不同瀏覽器的差異慨菱、處理瀏覽器兼容問題的方式
  • 元信息類標(biāo)簽( head、 title戴甩、 meta)的使用目的和配置方法
  • HTML5離線緩存原理
  • 可以使用 CanvasAPI符喝、 SVG等繪制高性能的動(dòng)畫

CSS

  • CSS盒模型，在不同瀏覽器的差異
  • CSS所有選擇器及其優(yōu)先級(jí)甜孤、使用場(chǎng)景协饲，哪些可以繼承，如何運(yùn)用 at規(guī)則
  • CSS偽類和偽元素有哪些课蔬，它們的區(qū)別和實(shí)際應(yīng)用
  • HTML文檔流的排版規(guī)則囱稽， CSS幾種定位的規(guī)則郊尝、定位參照物二跋、對(duì)文檔流的影響，如何選擇最好的定位方式流昏，雪碧圖實(shí)現(xiàn)原理
  • 水平垂直居中的方案扎即、可以實(shí)現(xiàn) 6種以上并對(duì)比它們的優(yōu)缺點(diǎn)
  • BFC實(shí)現(xiàn)原理，可以解決的問題况凉，如何創(chuàng)建 BFC
  • 可使用 CSS函數(shù)復(fù)用代碼谚鄙，實(shí)現(xiàn)特殊效果
  • PostCSS、 Sass刁绒、 Less的異同闷营，以及使用配置，至少掌握一種
  • CSS模塊化方案、如何配置按需加載傻盟、如何防止 CSS阻塞渲染
  • 熟練使用 CSS實(shí)現(xiàn)常見動(dòng)畫速蕊，如漸變、移動(dòng)娘赴、旋轉(zhuǎn)规哲、縮放等等
  • CSS瀏覽器兼容性寫法，了解不同 API在不同瀏覽器下的兼容性情況
  • 掌握一套完整的響應(yīng)式布局方案

手寫

  • 手寫圖片瀑布流效果
  • 使用 CSS繪制幾何圖形（圓形诽表、三角形唉锌、扇形、菱形等）
  • 使用純 CSS實(shí)現(xiàn)曲線運(yùn)動(dòng)（貝塞爾曲線）
  • 實(shí)現(xiàn)常用布局（三欄竿奏、圣杯袄简、雙飛翼、吸頂）泛啸，可是說出多種方式并理解其優(yōu)缺點(diǎn)

三痘番、計(jì)算機(jī)基礎(chǔ)

關(guān)于編譯原理，不需要理解非常深入平痰，但是最基本的原理和概念一定要懂汞舱，這對(duì)于學(xué)習(xí)一門編程語言非常重要

編譯原理

  • 理解代碼到底是什么，計(jì)算機(jī)如何將代碼轉(zhuǎn)換為可以運(yùn)行的目標(biāo)程序
  • 正則表達(dá)式的匹配原理和性能優(yōu)化
  • 如何將 JavaScript代碼解析成抽象語法樹( AST)
  • base64的編碼原理
  • 幾種進(jìn)制的相互轉(zhuǎn)換計(jì)算方法宗雇，在 JavaScript中如何表示和轉(zhuǎn)換

網(wǎng)絡(luò)協(xié)議

  • 理解什么是協(xié)議昂芜，了解 TCP/IP網(wǎng)絡(luò)協(xié)議族的構(gòu)成，每層協(xié)議在應(yīng)用程序中發(fā)揮的作用
  • 三次握手和四次揮手詳細(xì)原理赔蒲，為什么要使用這種機(jī)制
  • 有哪些協(xié)議是可靠泌神， TCP有哪些手段保證可靠交付
  • DNS的作用、 DNS解析的詳細(xì)過程舞虱， DNS優(yōu)化原理
  • CDN的作用和原理
  • HTTP請(qǐng)求報(bào)文和響應(yīng)報(bào)文的具體組成欢际，能理解常見請(qǐng)求頭的含義，有幾種請(qǐng)求方式矾兜，區(qū)別是什么
  • HTTP所有狀態(tài)碼的具體含義损趋，看到異常狀態(tài)碼能快速定位問題
  • HTTP1.1、 HTTP2.0帶來的改變
  • HTTPS的加密原理椅寺，如何開啟 HTTPS浑槽，如何劫持 HTTPS請(qǐng)求
  • 理解 WebSocket協(xié)議的底層原理、與 HTTP的區(qū)別

設(shè)計(jì)模式

  • 熟練使用前端常用的設(shè)計(jì)模式編寫代碼返帕，如單例模式桐玻、裝飾器模式、代理模式等
  • 發(fā)布訂閱模式和觀察者模式的異同以及實(shí)際應(yīng)用
  • 可以說出幾種設(shè)計(jì)模式在開發(fā)中的實(shí)際應(yīng)用荆萤，理解框架源碼中對(duì)設(shè)計(jì)模式的應(yīng)用

四镊靴、數(shù)據(jù)結(jié)構(gòu)和算法

據(jù)我了解的大部分前端對(duì)這部分知識(shí)有些欠缺，甚至抵觸，但是偏竟，如果突破更高的天花板算行，這部分知識(shí)是必不可少的，而且我親身經(jīng)歷——非常有用苫耸！

JavaScript編碼能力

  • 多種方式實(shí)現(xiàn)數(shù)組去重州邢、扁平化、對(duì)比優(yōu)缺點(diǎn)
  • 多種方式實(shí)現(xiàn)深拷貝褪子、對(duì)比優(yōu)缺點(diǎn)
  • 手寫函數(shù)柯里化工具函數(shù)量淌、并理解其應(yīng)用場(chǎng)景和優(yōu)勢(shì)
  • 手寫防抖和節(jié)流工具函數(shù)、并理解其內(nèi)部原理和應(yīng)用場(chǎng)景
  • 實(shí)現(xiàn)一個(gè) sleep函數(shù)

手動(dòng)實(shí)現(xiàn)前端輪子

  • 手動(dòng)實(shí)現(xiàn) call嫌褪、apply呀枢、bind
  • 手動(dòng)實(shí)現(xiàn)符合 Promise/A+規(guī)范的 Promise、手動(dòng)實(shí)現(xiàn) asyncawait
  • 手寫一個(gè) EventEmitter實(shí)現(xiàn)事件發(fā)布笼痛、訂閱
  • 可以說出兩種實(shí)現(xiàn)雙向綁定的方案裙秋、可以手動(dòng)實(shí)現(xiàn)
  • 手寫 JSON.stringify、 JSON.parse
  • 手寫一個(gè)模版引擎缨伊，并能解釋其中原理
  • 手寫 懶加載摘刑、 下拉刷新、 上拉加載刻坊、 預(yù)加載等效果

數(shù)據(jù)結(jié)構(gòu)

  • 理解常見數(shù)據(jù)結(jié)構(gòu)的特點(diǎn)枷恕，以及他們?cè)诓煌瑘?chǎng)景下使用的優(yōu)缺點(diǎn)
  • 理解 數(shù)組、 字符串的存儲(chǔ)原理谭胚，并熟練應(yīng)用他們解決問題
  • 理解 二叉樹徐块、 棧、 隊(duì)列灾而、 哈希表的基本結(jié)構(gòu)和特點(diǎn)胡控，并可以應(yīng)用它解決問題
  • 了解 圖、 堆的基本結(jié)構(gòu)和使用場(chǎng)景

算法

  • 1.可計(jì)算一個(gè)算法的時(shí)間復(fù)雜度和空間復(fù)雜度旁趟，可估計(jì)業(yè)務(wù)邏輯代碼的耗時(shí)和內(nèi)存消耗
  • 2.至少理解五種排序算法的實(shí)現(xiàn)原理昼激、應(yīng)用場(chǎng)景、優(yōu)缺點(diǎn)轻庆，可快速說出時(shí)間癣猾、空間復(fù)雜度
  • 3.了解遞歸和循環(huán)的優(yōu)缺點(diǎn)、應(yīng)用場(chǎng)景余爆、并可在開發(fā)中熟練應(yīng)用
  • 4.可應(yīng)用 回溯算法、 貪心算法夸盟、 分治算法蛾方、 動(dòng)態(tài)規(guī)劃等解決復(fù)雜問題
  • 5.前端處理海量數(shù)據(jù)的算法方案

五、運(yùn)行環(huán)境

我們需要理清語言和環(huán)境的關(guān)系：

ECMAScript描述了 JavaScript語言的語法和基本對(duì)象規(guī)范

瀏覽器作為 JavaScript的一種運(yùn)行環(huán)境，為它提供了：文檔對(duì)象模型（ DOM）桩砰，描述處理網(wǎng)頁內(nèi)容的方法和接口拓春、瀏覽器對(duì)象模型（ BOM），描述與瀏覽器進(jìn)行交互的方法和接口

Node也是 JavaScript的一種運(yùn)行環(huán)境亚隅，為它提供了操作 I/O硼莽、網(wǎng)絡(luò)等 API

瀏覽器API

  • 瀏覽器提供的符合 W3C標(biāo)準(zhǔn)的 DOM操作 API、瀏覽器差異煮纵、兼容性
  • 瀏覽器提供的瀏覽器對(duì)象模型 ( BOM)提供的所有全局 API懂鸵、瀏覽器差異、兼容性
  • 大量 DOM操作行疏、海量數(shù)據(jù)的性能優(yōu)化(合并操作匆光、 Diff、 requestAnimationFrame等)
  • 瀏覽器海量數(shù)據(jù)存儲(chǔ)酿联、操作性能優(yōu)化
  • DOM事件流的具體實(shí)現(xiàn)機(jī)制终息、不同瀏覽器的差異、事件代理
  • 前端發(fā)起網(wǎng)絡(luò)請(qǐng)求的幾種方式及其底層實(shí)現(xiàn)贞让、可以手寫原生 ajax周崭、 fetch、可以熟練使用第三方庫
  • 瀏覽器的同源策略喳张，如何避免同源策略休傍，幾種方式的異同點(diǎn)以及如何選型
  • 瀏覽器提供的幾種存儲(chǔ)機(jī)制、優(yōu)缺點(diǎn)蹲姐、開發(fā)中正確的選擇
  • 瀏覽器跨標(biāo)簽通信

瀏覽器原理

  • 各瀏覽器使用的 JavaScript引擎以及它們的異同點(diǎn)磨取、如何在代碼中進(jìn)行區(qū)分
  • 請(qǐng)求數(shù)據(jù)到請(qǐng)求結(jié)束與服務(wù)器進(jìn)行了幾次交互
  • 可詳細(xì)描述瀏覽器從輸入 URL到頁面展現(xiàn)的詳細(xì)過程
  • 瀏覽器解析 HTML代碼的原理，以及構(gòu)建 DOM樹的流程
  • 瀏覽器如何解析 CSS規(guī)則柴墩，并將其應(yīng)用到 DOM樹上
  • 瀏覽器如何將解析好的帶有樣式的 DOM樹進(jìn)行繪制
  • 瀏覽器的運(yùn)行機(jī)制忙厌，如何配置資源異步同步加載
  • 瀏覽器回流與重繪的底層原理，引發(fā)原因江咳，如何有效避免
  • 瀏覽器的垃圾回收機(jī)制逢净，如何避免內(nèi)存泄漏
  • 瀏覽器采用的緩存方案，如何選擇和控制合適的緩存方案

Node

  • 理解 Node在應(yīng)用程序中的作用歼指，可以使用 Node搭建前端運(yùn)行環(huán)境爹土、使用 Node操作文件、操作數(shù)據(jù)庫等等
  • 掌握一種 Node開發(fā)框架踩身，如 Express胀茵， Express和 Koa的區(qū)別
  • 熟練使用 Node提供的 API如 Path、 Http挟阻、 ChildProcess等并理解其實(shí)現(xiàn)原理
  • Node的底層運(yùn)行原理琼娘、和瀏覽器的異同
  • Node事件驅(qū)動(dòng)峭弟、非阻塞機(jī)制的實(shí)現(xiàn)原理

六、框架和類庫

輪子層出不窮脱拼，從原理上理解才是正道

TypeScript

  • 理解 泛型瞒瘸、 接口等面向?qū)ο蟮南嚓P(guān)概念， TypeScript對(duì)面向?qū)ο罄砟畹膶?shí)現(xiàn)
  • 理解使用 TypeScript的好處熄浓，掌握 TypeScript基礎(chǔ)語法
  • TypeScript的規(guī)則檢測(cè)原理
  • 可以在 React声离、 Vue等框架中使用 TypeScript進(jìn)行開發(fā)

React

  • React和 vue選型和優(yōu)缺點(diǎn)工禾、核心架構(gòu)的區(qū)別
  • React中 setState的執(zhí)行機(jī)制匾荆，如何有效的管理狀態(tài)
  • React的事件底層實(shí)現(xiàn)機(jī)制
  • React的虛擬 DOM和 Diff算法的內(nèi)部實(shí)現(xiàn)
  • React的 Fiber工作原理阻星，解決了什么問題
  • ReactRouter和 VueRouter的底層實(shí)現(xiàn)原理、動(dòng)態(tài)加載實(shí)現(xiàn)原理
  • 可熟練應(yīng)用 ReactAPI惯雳、生命周期等朝巫，可應(yīng)用 HOC、 render props石景、 Hooks等高階用法解決問題
  • 基于 React的特性和原理劈猿，可以手動(dòng)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 React

Vue

  • 熟練使用 Vue的 API、生命周期潮孽、鉤子函數(shù)
  • MVVM框架設(shè)計(jì)理念
  • Vue雙向綁定實(shí)現(xiàn)原理揪荣、 Diff算法的內(nèi)部實(shí)現(xiàn)
  • Vue的事件機(jī)制
  • 從 template轉(zhuǎn)換成真實(shí) DOM的實(shí)現(xiàn)機(jī)制

多端開發(fā)

  • 單頁面應(yīng)用（ SPA）的原理和優(yōu)缺點(diǎn)，掌握一種快速開發(fā) SPA的方案
  • 理解 Viewport往史、 em仗颈、 rem的原理和用法，分辨率椎例、 px挨决、 ppi、 dpi订歪、 dp的區(qū)別和實(shí)際應(yīng)用
  • 移動(dòng)端頁面適配解決方案脖祈、不同機(jī)型適配方案
  • 掌握一種 JavaScript移動(dòng)客戶端開發(fā)技術(shù)，如 ReactNative：可以搭建 ReactNative開發(fā)環(huán)境刷晋，熟練進(jìn)行開發(fā)盖高，可理解 ReactNative的運(yùn)作原理，不同端適配
  • 掌握一種 JavaScript PC客戶端開發(fā)技術(shù)眼虱，如 Electron：可搭建 Electron開發(fā)環(huán)境喻奥，熟練進(jìn)行開發(fā)，可理解 Electron的運(yùn)作原理
  • 掌握一種小程序開發(fā)框架或原生小程序開發(fā)
  • 理解多端框架的內(nèi)部實(shí)現(xiàn)原理捏悬，至少了解一個(gè)多端框架的使用

數(shù)據(jù)流管理

  • 掌握 React和 Vue傳統(tǒng)的跨組件通信方案撞蚕，對(duì)比采用數(shù)據(jù)流管理框架的異同
  • 熟練使用 Redux管理數(shù)據(jù)流，并理解其實(shí)現(xiàn)原理邮破，中間件實(shí)現(xiàn)原理
  • 熟練使用 Mobx管理數(shù)據(jù)流诈豌，并理解其實(shí)現(xiàn)原理仆救，相比 Redux有什么優(yōu)勢(shì)
  • 熟練使用 Vuex管理數(shù)據(jù)流抒和，并理解其實(shí)現(xiàn)原理
  • 以上數(shù)據(jù)流方案的異同和優(yōu)缺點(diǎn)矫渔，不情況下的技術(shù)選型

實(shí)用庫

  • 至少掌握一種 UI組件框架，如 antd design摧莽，理解其設(shè)計(jì)理念庙洼、底層實(shí)現(xiàn)
  • 掌握一種圖表繪制框架，如 Echart镊辕，理解其設(shè)計(jì)理念油够、底層實(shí)現(xiàn)，可以自己實(shí)現(xiàn)圖表
  • 掌握一種 GIS開發(fā)框架征懈，如百度地圖 API
  • 掌握一種可視化開發(fā)框架石咬，如 Three.js、 D3
  • 工具函數(shù)庫卖哎，如 lodash鬼悠、 underscore、 moment等亏娜，理解使用的工具類或工具函數(shù)的具體實(shí)現(xiàn)原理

開發(fā)和調(diào)試

  • 熟練使用各瀏覽器提供的調(diào)試工具
  • 熟練使用一種代理工具實(shí)現(xiàn)請(qǐng)求代理焕窝、抓包，如 charles
  • 可以使用 Android维贺、 IOS模擬器進(jìn)行調(diào)試它掂，并掌握一種真機(jī)調(diào)試方案
  • 了解 Vue、 React等框架調(diào)試工具的使用

七溯泣、前端工程

前端工程化：以工程化方法和工具提高開發(fā)生產(chǎn)效率虐秋、降低維護(hù)難度

項(xiàng)目構(gòu)建

  • 理解 npm、 yarn依賴包管理的原理垃沦，兩者的區(qū)別
  • 可以使用 npm運(yùn)行自定義腳本
  • 理解 Babel客给、 ESLint、 webpack等工具在項(xiàng)目中承擔(dān)的作用
  • ESLint規(guī)則檢測(cè)原理栏尚，常用的 ESLint配置
  • Babel的核心原理起愈，可以自己編寫一個(gè) Babel插件
  • 可以配置一種前端代碼兼容方案，如 Polyfill
  • Webpack的編譯原理译仗、構(gòu)建流程抬虽、熱更新原理， chunk纵菌、 bundle和 module的區(qū)別和應(yīng)用
  • 可熟練配置已有的 loaders和 plugins解決問題阐污，可以自己編寫 loaders和 plugins

nginx

  • 正向代理與反向代理的特點(diǎn)和實(shí)例
  • 可手動(dòng)搭建一個(gè)簡(jiǎn)單的 nginx服務(wù)器、
  • 熟練應(yīng)用常用的 nginx內(nèi)置變量咱圆，掌握常用的匹配規(guī)則寫法
  • 可以用 nginx實(shí)現(xiàn)請(qǐng)求過濾笛辟、配置 gzip功氨、負(fù)載均衡等，并能解釋其內(nèi)部原理

開發(fā)提速

  • 熟練掌握一種接口管理手幢、接口 mock工具的使用捷凄，如 yapi
  • 掌握一種高效的日志埋點(diǎn)方案，可快速使用日志查詢工具定位線上問題
  • 理解 TDD與 BDD模式围来，至少會(huì)使用一種前端單元測(cè)試框架

版本控制

  • 理解 Git的核心原理跺涤、工作流程、和 SVN的區(qū)別
  • 熟練使用常規(guī)的 Git命令监透、 git rebase桶错、 git stash等進(jìn)階命令
  • 可以快速解決 線上分支回滾、 線上分支錯(cuò)誤合并等復(fù)雜問題

持續(xù)集成

  • 理解 CI/CD技術(shù)的意義胀蛮，至少熟練掌握一種 CI/CD工具的使用院刁，如 Jenkins
  • 可以獨(dú)自完成架構(gòu)設(shè)計(jì)、技術(shù)選型粪狼、環(huán)境搭建退腥、全流程開發(fā)、部署上線等一套完整的開發(fā)流程（包括 Web應(yīng)用鸳玩、移動(dòng)客戶端應(yīng)用阅虫、 PC客戶端應(yīng)用、小程序不跟、 H5等等）

八颓帝、項(xiàng)目和業(yè)務(wù)

后端技能

  • 了解后端的開發(fā)方式，在應(yīng)用程序中的作用窝革，至少會(huì)使用一種后端語言
  • 掌握數(shù)據(jù)最終在數(shù)據(jù)庫中是如何落地存儲(chǔ)的购城，能看懂表結(jié)構(gòu)設(shè)計(jì)、表之間的關(guān)聯(lián)虐译，至少會(huì)使用一種數(shù)據(jù)庫

性能優(yōu)化

  • 了解前端性能衡量指標(biāo)瘪板、性能監(jiān)控要點(diǎn)，掌握一種前端性能監(jiān)控方案
  • 了解常見的 Web漆诽、 App性能優(yōu)化方案
  • SEO排名規(guī)則侮攀、 SEO優(yōu)化方案、前后端分離的 SEO
  • SSR實(shí)現(xiàn)方案厢拭、優(yōu)缺點(diǎn)兰英、及其性能優(yōu)化
  • Webpack的性能優(yōu)化方案
  • Canvas性能優(yōu)化方案
  • React、 Vue等框架使用性能優(yōu)化方案

前端安全

  • XSS攻擊的原理供鸠、分類畦贸、具體案例，前端如何防御
  • CSRF攻擊的原理楞捂、具體案例薄坏，前端如何防御
  • HTTP劫持趋厉、頁面劫持的原理、防御措施

業(yè)務(wù)相關(guān)

  • 能理解所開發(fā)項(xiàng)目的整體業(yè)務(wù)形態(tài)胶坠、業(yè)務(wù)目標(biāo)君账、業(yè)務(wù)架構(gòu)，可以快速定位線上業(yè)務(wù)問題
  • 能理解所開發(fā)項(xiàng)目整體的技術(shù)架構(gòu)涵但、能快讀的根據(jù)新需求進(jìn)行開發(fā)規(guī)劃杈绸、能快速根據(jù)業(yè)務(wù)報(bào)警帖蔓、線上日志等定位并解決線上技術(shù)問題
  • 可以將自己的想法或新技術(shù)在業(yè)務(wù)中落地實(shí)踐矮瘟，盡量在團(tuán)隊(duì)中擁有一定的不可替代性

九、學(xué)習(xí)提升

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

  • 不以賺錢為目的選擇學(xué)習(xí)的內(nèi)容澈侠；
  • 以自己是否能造出輪子來衡量學(xué)習(xí)的效果；
  • 堅(jiān)持每天寫自己的代碼埋酬，前10年每天至少6個(gè)小時(shí)哨啃，不包含學(xué)習(xí)和工作的時(shí)間。

上面幾點(diǎn)可能有點(diǎn)難写妥，第一點(diǎn)我就做不到拳球，但是做到下面幾點(diǎn)還是比較容易的。

關(guān)于寫博客說明下珍特，能給別人講明白的知識(shí)會(huì)比自己學(xué)習(xí)掌握的要深刻許多

  • 擁有自己的技術(shù)博客祝峻，或者在一些博客平臺(tái)上擁有自己的專欄
  • 定期的將知識(shí)進(jìn)行總結(jié)，不斷完善自己的知識(shí)體系
  • 盡量將自己的知識(shí)轉(zhuǎn)換成真實(shí)的產(chǎn)出扎筒，不要僅僅停留在書面理解層面莱找，更重要的是實(shí)際應(yīng)用
  • 堅(jiān)持輸出 自己 的代碼，不要盲目的扎進(jìn)公司業(yè)務(wù)

十嗜桌、技術(shù)之外

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

  • 了解互聯(lián)網(wǎng)人員術(shù)語： CEO、 CTO骨宠、 COO浮定、 CFO、 PM层亿、 QA桦卒、 UI、 FE棕所、 DEV闸盔、 DBA、 OPS等
  • 了解互聯(lián)網(wǎng)行業(yè)術(shù)語： B2B琳省、 B2C迎吵、 C2C躲撰、 O2O等
  • 掌握互聯(lián)網(wǎng)行業(yè)溝通、問答击费、學(xué)習(xí)的
  • 有一定的 "PPT"能力
  • 有一定的理財(cái)意識(shí)拢蛋，至少了解儲(chǔ)蓄、貨幣基金蔫巩、保險(xiǎn)谆棱、指數(shù)基金、股票等基本的理財(cái)知識(shí)
  • 掌握在繁重的工作和長(zhǎng)期的電腦輻射的情況下保持健康的方法圆仔，建立正確的養(yǎng)生知識(shí)體系

十一垃瞧、資源推薦

有了知識(shí)體系，在閱讀一篇技術(shù)文章的時(shí)候就很容易把它歸類坪郭，我一直以來就是這樣做的个从。 事實(shí)證明，在閱讀文章或書籍時(shí)歪沃，有目的和歸類的閱讀比"隨便看看"后的知識(shí)留存率要高很多嗦锐。 每閱讀到一篇好的文章或者書籍，我都會(huì)收藏并歸類到我的知識(shí)體系中沪曙。

下面是一些我覺得還不錯(cuò)的文章奕污、博客或者書籍教程等等，分享給大家液走，資源不多碳默，但都是精品。 學(xué)習(xí)一門知識(shí)育灸，最好先閱讀官方文檔腻窒，把所有的 API大概瀏覽一遍，再繼續(xù)看大佬們總結(jié)的進(jìn)階知識(shí)磅崭，什么東西是搬運(yùn)過來的儿子，什么是干貨，一目了然砸喻。

語言基礎(chǔ)

計(jì)算機(jī)基礎(chǔ)

數(shù)據(jù)結(jié)構(gòu)和算法

運(yùn)行環(huán)境

框架和類庫

前端工程

項(xiàng)目和業(yè)務(wù)

學(xué)習(xí)提升

另外推薦我一直在關(guān)注的幾位大佬的個(gè)人博客：

技術(shù)之外

其實(shí)在這個(gè)信息發(fā)達(dá)的時(shí)代最不缺的就是資源，如何從眾多的資源中獲取到真正精華的部分癣漆，是非常重要的维咸，資源在于精不在于多，強(qiáng)烈建議在保證深度的情況下再保證廣度。

小結(jié)

希望你閱讀本篇文章后可以達(dá)到以下幾點(diǎn)：

  • 從知識(shí)清單中找到自己的知識(shí)盲點(diǎn)與欠缺
  • 具有知識(shí)體系化的思想癌蓖，開始建立自己的知識(shí)體系
  • 閱讀文章時(shí)將知識(shí)歸類到知識(shí)體系中瞬哼，并不斷完善自己的知識(shí)體系
  • 從文章中獲取到了有用的資源
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市租副，隨后出現(xiàn)的幾起案子坐慰，更是在濱河造成了極大的恐慌，老刑警劉巖用僧，帶你破解...
    沈念sama閱讀 216,919評(píng)論 6贊 502
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件结胀，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡责循，警方通過查閱死者的電腦和手機(jī)糟港，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來沼死，“玉大人着逐，你說我怎么就攤上這事∫庵” “怎么了？”我有些...
    開封第一講書人閱讀 163,316評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵健芭，是天一觀的道長(zhǎng)县钥。 經(jīng)常有香客問我，道長(zhǎng)慈迈，這世上最難降的妖魔是什么若贮？ 我笑而不...
    開封第一講書人閱讀 58,294評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮痒留，結(jié)果婚禮上谴麦，老公的妹妹穿的比我還像新娘。我一直安慰自己伸头，他們只是感情好匾效，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評(píng)論 6贊 390
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著恤磷，像睡著了一般面哼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上扫步，一...
    開封第一講書人閱讀 51,245評(píng)論 1贊 299
  • 城市分裂傳說
    那天魔策，我揣著相機(jī)與錄音，去河邊找鬼河胎。 笑死闯袒，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播政敢，決...
    沈念sama閱讀 40,120評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼原茅，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了堕仔？” 一聲冷哼從身側(cè)響起擂橘，我...
    開封第一講書人閱讀 38,964評(píng)論 0贊 275
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎摩骨，沒想到半個(gè)月后通贞，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,376評(píng)論 1贊 313
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡恼五，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評(píng)論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年昌罩，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灾馒。...
    茶點(diǎn)故事閱讀 39,764評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡茎用，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出睬罗，到底是詐尸還是另有隱情轨功，我是刑警寧澤，帶...
    沈念sama閱讀 35,460評(píng)論 5贊 344
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布容达，位于F島的核電站古涧，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏花盐。R本人自食惡果不足惜羡滑，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評(píng)論 3贊 327
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望算芯。 院中可真熱鬧柒昏，春花似錦、人聲如沸熙揍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽诈嘿。三九已至堪旧，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間奖亚，已是汗流浹背淳梦。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留昔字，地道東北人爆袍。 一個(gè)月前我還...
    沈念sama閱讀 47,819評(píng)論 2贊 370
  • 代替公主和親
    正文 我出身青樓首繁，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親陨囊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子弦疮，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評(píng)論 2贊 354

推薦閱讀更多精彩內(nèi)容

  • 前端開發(fā)面試題 面試題目： 根據(jù)你的等級(jí)和職位的變化，入門級(jí)到專家級(jí)蜘醋，廣度和深度都會(huì)有所增加胁塞。 題目類型： 理論知...
    怡寶丶閱讀 2,582評(píng)論 0贊 7
  • 【轉(zhuǎn)載】CSDN - 張林blog http://blog.csdn.net/XIAOZHUXMEN/articl...
    竿牘閱讀 3,488評(píng)論 1贊 14
  • JavaScript 介紹js的基本數(shù)據(jù)類型。 Undefined压语、Null啸罢、Boolean、Number胎食、St...
    cuikangjie閱讀 472評(píng)論 0贊 3
  • 應(yīng)該思維就是用別人的行動(dòng)標(biāo)準(zhǔn)來代替自發(fā)行動(dòng)的思維方式扰才。 之后，我們思考了為什么應(yīng)該思維是一種暴政厕怜，因?yàn)樗麜?huì)阻礙我們...
    情淺吟涼閱讀 272評(píng)論 0贊 0
  • 難過時(shí)粥航，通常都是自我排解琅捏。可能會(huì)聽歌躁锡，一個(gè)人去操場(chǎng)走走午绳，抬頭看看天空∮持或者會(huì)寫成日志形式記錄下來。有些東西想通了也...
    你說我聽ai閱讀 211評(píng)論 0贊 0