一名【合格】前端工程師的自檢清單
2.2k 次閱讀 · 讀完需要 47 分鐘
287
開篇
前端開發(fā)是一個非常特殊的行業(yè)新蟆,它的歷史實際上不是很長赂摆,但是知識之繁雜,技術(shù)迭代速度之快是其他技術(shù)所不能比擬的录择。
winter
在他的《重學前端》課程中提到:
到現(xiàn)在為止桦卒,前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一雳灵。可是闸盔,與此相對的是悯辙,我發(fā)現(xiàn)極少或者幾乎沒有大學的計算機專業(yè)愿意開設前端課程,更沒有系統(tǒng)性的教學方案出現(xiàn)迎吵。大部分前端工程師的知識躲撰,其實都是來自于實踐和工作中零散的學習。
這樣是一個非常真實的現(xiàn)狀击费,實際上很多前端開發(fā)者都是自學甚至轉(zhuǎn)行過來的拢蛋,前端入門簡單,學習了幾個API
以后上手做項目也很簡單蔫巩,但是這往往成為了限制自身發(fā)展的瓶頸谆棱。
只是停留在會用階段是遠遠不夠的快压,我們還需要不斷探索和深入。現(xiàn)在市面上并不缺少學習教程垃瞧,技術(shù)文章蔫劣,如果盲目的學習你會發(fā)現(xiàn)看過以后的知識留存率會很低,而且發(fā)現(xiàn)沒有了解到的知識越來越多个从,這會讓人產(chǎn)生焦慮脉幢。
實際上,除了堅持學習的強大的自驅(qū)力嗦锐,你還需要一個很簡單的學習方法嫌松。那就是:建立自己的知識體系。它能幫助你更系統(tǒng)性的學習奕污,同時你也時刻能知道自己哪些地方是不足的萎羔。
我會把我工作和學習中接觸到的知識全部歸納到我的知識體系中,其中不僅僅包括我已經(jīng)學過的碳默,還有很多我沒有來得及學習的贾陷。
這不僅僅是我的知識體系,更是我時刻提醒自己的自檢清單腻窒。
下面我會把我的自檢清單分享給大家昵宇,你可以按照清單上的知識檢測自己還有哪些不足和提升,我也建議大家建自己的知識體系儿子,這樣工作或者學習甚至面試時瓦哎,你能快速定位到知識清單中的點,如果你有哪些我沒歸納到的點柔逼,歡迎在評論區(qū)告訴我蒋譬。
[圖片上傳失敗...(image-455ff2-1556508366096)]
一、JavaScript基礎
前端工程師吃飯的家伙愉适,深度犯助、廣度一樣都不能差。
變量和類型
- 1.
JavaScript
規(guī)定了幾種語言類型 - 2.
JavaScript
對象的底層數(shù)據(jù)結(jié)構(gòu)是什么 - 3.
Symbol
類型在實際開發(fā)中的應用维咸、可手動實現(xiàn)一個簡單的Symbol
- 4.
JavaScript
中的變量在內(nèi)存中的具體存儲形式 - 5.基本類型對應的內(nèi)置對象剂买,以及他們之間的裝箱拆箱操作
- 6.理解值類型和引用類型
- 7.
null
和undefined
的區(qū)別 - 8.至少可以說出三種判斷
JavaScript
數(shù)據(jù)類型的方式,以及他們的優(yōu)缺點癌蓖,如何準確的判斷數(shù)組類型 - 9.可能發(fā)生隱式類型轉(zhuǎn)換的場景以及轉(zhuǎn)換原則瞬哼,應如何避免或巧妙應用
- 10.出現(xiàn)小數(shù)精度丟失的原因,
JavaScript
可以存儲的最大數(shù)字租副、最大安全數(shù)字坐慰,JavaScript
處理大數(shù)字的方法、避免精度丟失的方法
原型和原型鏈
- 1.理解原型設計模式以及
JavaScript
中的原型規(guī)則 - 2.
instanceof
的底層實現(xiàn)原理用僧,手動實現(xiàn)一個instanceof
- 4.實現(xiàn)繼承的幾種方式以及他們的優(yōu)缺點
- 5.至少說出一種開源項目(如
Node
)中應用原型繼承的案例 - 6.可以描述
new
一個對象的詳細過程结胀,手動實現(xiàn)一個new
操作符 - 7.理解
es6 class
構(gòu)造以及繼承的底層實現(xiàn)原理
作用域和閉包
- 1.理解詞法作用域和動態(tài)作用域
- 2.理解
JavaScript
的作用域和作用域鏈 - 3.理解
JavaScript
的執(zhí)行上下文棧赞咙,可以應用堆棧信息快速定位問題 - 4.
this
的原理以及幾種不同使用場景的取值 - 5.閉包的實現(xiàn)原理和作用,可以列舉幾個開發(fā)中閉包的實際應用
- 6.理解堆棧溢出和內(nèi)存泄漏的原理糟港,如何防止
- 7.如何處理循環(huán)的異步操作
- 8.理解模塊化解決的實際問題攀操,可列舉幾個模塊化方案并理解其中原理
執(zhí)行機制
- 1.為何
try
里面放return
,finally
還會執(zhí)行着逐,理解其內(nèi)部機制 - 2.
JavaScript
如何實現(xiàn)異步編程崔赌,可以詳細描述EventLoop
機制 - 3.宏任務和微任務分別有哪些
- 4.可以快速分析一個復雜的異步嵌套邏輯意蛀,并掌握分析方法
- 5.使用
Promise
實現(xiàn)串行 - 6.
Node
與瀏覽器EventLoop
的差異 - 7.如何在保證頁面運行流暢的情況下處理海量數(shù)據(jù)
語法和API
- 1.理解
ECMAScript
和JavaScript
的關(guān)系 - 2.熟練運用
es5
耸别、es6
提供的語法規(guī)范, - 3.熟練掌握
JavaScript
提供的全局對象(例如Date
县钥、Math
)秀姐、全局函數(shù)(例如decodeURI
、isNaN
)若贮、全局屬性(例如Infinity
省有、undefined
) - 4.熟練應用
map
、reduce
谴麦、filter
等高階函數(shù)解決問題 - 5.
setInterval
需要注意的點蠢沿,使用settimeout
實現(xiàn)setInterval
- 6.
JavaScript
提供的正則表達式API
、可以使用正則表達式(郵箱校驗匾效、URL
解析舷蟀、去重等)解決常見問題 - 7.
JavaScript
異常處理的方式,統(tǒng)一的異常處理方案
二面哼、HTML和CSS
HTML
- 1.從規(guī)范的角度理解
HTML
野宜,從分類和語義的角度使用標簽 - 2.常用頁面標簽的默認樣式、自帶屬性魔策、不同瀏覽器的差異匈子、處理瀏覽器兼容問題的方式
- 3.元信息類標簽(
head
、title
闯袒、meta
)的使用目的和配置方法 - 4.
HTML5
離線緩存原理 - 5.可以使用
Canvas API
虎敦、SVG
等繪制高性能的動畫
CSS
- 1.
CSS
盒模型,在不同瀏覽器的差異 - 2.
CSS
所有選擇器及其優(yōu)先級政敢、使用場景其徙,哪些可以繼承,如何運用at
規(guī)則 - 3.
CSS
偽類和偽元素有哪些堕仔,它們的區(qū)別和實際應用 - 4.
HTML
文檔流的排版規(guī)則擂橘,CSS
幾種定位的規(guī)則、定位參照物摩骨、對文檔流的影響通贞,如何選擇最好的定位方式朗若,雪碧圖實現(xiàn)原理 - 5.水平垂直居中的方案、可以實現(xiàn)
6
種以上并對比它們的優(yōu)缺點 - 6.
BFC
實現(xiàn)原理昌罩,可以解決的問題哭懈,如何創(chuàng)建BFC
- 7.可使用
CSS
函數(shù)復用代碼,實現(xiàn)特殊效果 - 8.
PostCSS
茎用、Sass
遣总、Less
的異同,以及使用配置轨功,至少掌握一種 - 9.
CSS
模塊化方案旭斥、如何配置按需加載、如何防止CSS
阻塞渲染 - 10.熟練使用
CSS
實現(xiàn)常見動畫古涧,如漸變垂券、移動、旋轉(zhuǎn)羡滑、縮放等等 - 11.
CSS
瀏覽器兼容性寫法菇爪,了解不同API
在不同瀏覽器下的兼容性情況 - 12.掌握一套完整的響應式布局方案
手寫
- 1.手寫圖片瀑布流效果
- 2.使用
CSS
繪制幾何圖形(圓形、三角形柒昏、扇形凳宙、菱形等) - 3.使用純
CSS
實現(xiàn)曲線運動(貝塞爾曲線) - 4.實現(xiàn)常用布局(三欄、圣杯职祷、雙飛翼氏涩、吸頂),可是說出多種方式并理解其優(yōu)缺點
三堪旧、計算機基礎
關(guān)于編譯原理削葱,不需要理解非常深入,但是最基本的原理和概念一定要懂淳梦,這對于學習一門編程語言非常重要
編譯原理
- 1.理解代碼到底是什么析砸,計算機如何將代碼轉(zhuǎn)換為可以運行的目標程序
- 2.正則表達式的匹配原理和性能優(yōu)化
- 3.如何將
JavaScript
代碼解析成抽象語法樹(AST
) - 4.
base64
的編碼原理 - 5.幾種進制的相互轉(zhuǎn)換計算方法,在
JavaScript
中如何表示和轉(zhuǎn)換
網(wǎng)絡協(xié)議
- 1.理解什么是協(xié)議爆袍,了解
TCP/IP
網(wǎng)絡協(xié)議族的構(gòu)成首繁,每層協(xié)議在應用程序中發(fā)揮的作用 - 2.三次握手和四次揮手詳細原理,為什么要使用這種機制
- 3.有哪些協(xié)議是可靠陨囊,
TCP
有哪些手段保證可靠交付 - 4.
DNS
的作用弦疮、DNS
解析的詳細過程,DNS
優(yōu)化原理 - 5.
CDN
的作用和原理 - 6.
HTTP
請求報文和響應報文的具體組成蜘醋,能理解常見請求頭的含義胁塞,有幾種請求方式,區(qū)別是什么 - 7.
HTTP
所有狀態(tài)碼的具體含義,看到異常狀態(tài)碼能快速定位問題 - 8.
HTTP1.1
啸罢、HTTP2.0
帶來的改變 - 9.
HTTPS
的加密原理编检,如何開啟HTTPS
,如何劫持HTTPS
請求 - 10.理解
WebSocket
協(xié)議的底層原理扰才、與HTTP
的區(qū)別
設計模式
- 1.熟練使用前端常用的設計模式編寫代碼允懂,如單例模式、裝飾器模式衩匣、代理模式等
- 2.發(fā)布訂閱模式和觀察者模式的異同以及實際應用
- 3.可以說出幾種設計模式在開發(fā)中的實際應用蕾总,理解框架源碼中對設計模式的應用
四、數(shù)據(jù)結(jié)構(gòu)和算法
據(jù)我了解的大部分前端對這部分知識有些欠缺琅捏,甚至抵觸生百,但是,如果突破更高的天花板午绳,這部分知識是必不可少的置侍,而且我親身經(jīng)歷——非常有用映之!
JavaScript編碼能力
- 1.多種方式實現(xiàn)數(shù)組去重拦焚、扁平化、對比優(yōu)缺點
- 2.多種方式實現(xiàn)深拷貝杠输、對比優(yōu)缺點
- 3.手寫函數(shù)柯里化工具函數(shù)赎败、并理解其應用場景和優(yōu)勢
- 4.手寫防抖和節(jié)流工具函數(shù)、并理解其內(nèi)部原理和應用場景
- 5.實現(xiàn)一個
sleep
函數(shù)
手動實現(xiàn)前端輪子
- 1.手動實現(xiàn)
call蠢甲、apply僵刮、bind
- 2.手動實現(xiàn)符合
Promise/A+
規(guī)范的Promise
、手動實現(xiàn)async await
- 3.手寫一個
EventEmitter
實現(xiàn)事件發(fā)布鹦牛、訂閱 - 4.可以說出兩種實現(xiàn)雙向綁定的方案搞糕、可以手動實現(xiàn)
- 5.手寫
JSON.stringify
、JSON.parse
- 6.手寫一個模版引擎曼追,并能解釋其中原理
- 7.手寫
懶加載
窍仰、下拉刷新
、上拉加載
礼殊、預加載
等效果
數(shù)據(jù)結(jié)構(gòu)
- 1.理解常見數(shù)據(jù)結(jié)構(gòu)的特點驹吮,以及他們在不同場景下使用的優(yōu)缺點
- 2.理解
數(shù)組
、字符串
的存儲原理晶伦,并熟練應用他們解決問題 - 3.理解
二叉樹
碟狞、棧
、隊列
婚陪、哈希表
的基本結(jié)構(gòu)和特點族沃,并可以應用它解決問題 - 4.了解
圖
、堆
的基本結(jié)構(gòu)和使用場景
算法
- 1.可計算一個算法的時間復雜度和空間復雜度,可估計業(yè)務邏輯代碼的耗時和內(nèi)存消耗
- 2.至少理解五種排序算法的實現(xiàn)原理脆淹、應用場景智润、優(yōu)缺點,可快速說出時間未辆、空間復雜度
- 3.了解遞歸和循環(huán)的優(yōu)缺點窟绷、應用場景、并可在開發(fā)中熟練應用
- 4.可應用
回溯算法
咐柜、貪心算法
兼蜈、分治算法
、動態(tài)規(guī)劃
等解決復雜問題 - 5.前端處理海量數(shù)據(jù)的算法方案
五拙友、運行環(huán)境
我們需要理清語言和環(huán)境的關(guān)系:
ECMAScript
描述了JavaScript
語言的語法和基本對象規(guī)范瀏覽器作為
JavaScript
的一種運行環(huán)境为狸,為它提供了:文檔對象模型(DOM
),描述處理網(wǎng)頁內(nèi)容的方法和接口遗契、瀏覽器對象模型(BOM
)辐棒,描述與瀏覽器進行交互的方法和接口Node也是
JavaScript
的一種運行環(huán)境,為它提供了操作I/O
牍蜂、網(wǎng)絡等API
瀏覽器API
- 1.瀏覽器提供的符合
W3C
標準的DOM
操作API
漾根、瀏覽器差異、兼容性 - 2.瀏覽器提供的瀏覽器對象模型 (
BOM
)提供的所有全局API
鲫竞、瀏覽器差異辐怕、兼容性 - 3.大量
DOM
操作、海量數(shù)據(jù)的性能優(yōu)化(合并操作从绘、Diff
寄疏、requestAnimationFrame
等) - 4.瀏覽器海量數(shù)據(jù)存儲、操作性能優(yōu)化
- 5.
DOM
事件流的具體實現(xiàn)機制僵井、不同瀏覽器的差異陕截、事件代理 - 6.前端發(fā)起網(wǎng)絡請求的幾種方式及其底層實現(xiàn)、可以手寫原生
ajax
批什、fetch
农曲、可以熟練使用第三方庫 - 7.瀏覽器的同源策略,如何避免同源策略渊季,幾種方式的異同點以及如何選型
- 8.瀏覽器提供的幾種存儲機制朋蔫、優(yōu)缺點、開發(fā)中正確的選擇
- 9.瀏覽器跨標簽通信
瀏覽器原理
- 1.各瀏覽器使用的
JavaScript
引擎以及它們的異同點却汉、如何在代碼中進行區(qū)分 - 2.請求數(shù)據(jù)到請求結(jié)束與服務器進行了幾次交互
- 3.可詳細描述瀏覽器從輸入
URL
到頁面展現(xiàn)的詳細過程 - 4.瀏覽器解析
HTML
代碼的原理驯妄,以及構(gòu)建DOM
樹的流程 - 5.瀏覽器如何解析
CSS
規(guī)則,并將其應用到DOM
樹上 - 6.瀏覽器如何將解析好的帶有樣式的
DOM
樹進行繪制 - 7.瀏覽器的運行機制合砂,如何配置資源異步同步加載
- 8.瀏覽器回流與重繪的底層原理青扔,引發(fā)原因,如何有效避免
- 9.瀏覽器的垃圾回收機制,如何避免內(nèi)存泄漏
- 10.瀏覽器采用的緩存方案微猖,如何選擇和控制合適的緩存方案
Node
- 1.理解
Node
在應用程序中的作用谈息,可以使用Node
搭建前端運行環(huán)境、使用Node
操作文件凛剥、操作數(shù)據(jù)庫等等 - 2.掌握一種
Node
開發(fā)框架侠仇,如Express
,Express
和Koa
的區(qū)別 - 3.熟練使用
Node
提供的API
如Path
犁珠、Http
逻炊、Child Process
等并理解其實現(xiàn)原理 - 4.
Node
的底層運行原理、和瀏覽器的異同 - 5.
Node
事件驅(qū)動犁享、非阻塞機制的實現(xiàn)原理
六余素、框架和類庫
輪子層出不窮,從原理上理解才是正道
TypeScript
- 1.理解
泛型
炊昆、接口
等面向?qū)ο蟮南嚓P(guān)概念桨吊,TypeScript
對面向?qū)ο罄砟畹膶崿F(xiàn) - 2.理解使用
TypeScript
的好處,掌握TypeScript
基礎語法 - 3.
TypeScript
的規(guī)則檢測原理 - 4.可以在
React
凤巨、Vue
等框架中使用TypeScript
進行開發(fā)
React
- 1.
React
和vue
選型和優(yōu)缺點视乐、核心架構(gòu)的區(qū)別 - 2.
React
中setState
的執(zhí)行機制,如何有效的管理狀態(tài) - 3.
React
的事件底層實現(xiàn)機制 - 4.
React
的虛擬DOM
和Diff
算法的內(nèi)部實現(xiàn) - 5.
React
的Fiber
工作原理磅甩,解決了什么問題 - 6.
React Router
和Vue Router
的底層實現(xiàn)原理炊林、動態(tài)加載實現(xiàn)原理 - 7.可熟練應用
React API
、生命周期等卷要,可應用HOC
、render props
独榴、Hooks
等高階用法解決問題 - 8.基于
React
的特性和原理僧叉,可以手動實現(xiàn)一個簡單的React
Vue
- 1.熟練使用
Vue
的API
、生命周期棺榔、鉤子函數(shù) - 2.
MVVM
框架設計理念 - 3.
Vue
雙向綁定實現(xiàn)原理瓶堕、Diff
算法的內(nèi)部實現(xiàn) - 4.
Vue
的事件機制 - 5.從
template
轉(zhuǎn)換成真實DOM
的實現(xiàn)機制
多端開發(fā)
- 1.單頁面應用(
SPA
)的原理和優(yōu)缺點,掌握一種快速開發(fā)SPA
的方案 - 2.理解
Viewport
症歇、em
郎笆、rem
的原理和用法,分辨率忘晤、px
宛蚓、ppi
、dpi
设塔、dp
的區(qū)別和實際應用 - 3.移動端頁面適配解決方案凄吏、不同機型適配方案
- 4.掌握一種
JavaScript
移動客戶端開發(fā)技術(shù),如React Native
:可以搭建React Native
開發(fā)環(huán)境,熟練進行開發(fā)痕钢,可理解React Native
的運作原理图柏,不同端適配 - 5.掌握一種
JavaScript
PC
客戶端開發(fā)技術(shù),如Electron
:可搭建Electron
開發(fā)環(huán)境任连,熟練進行開發(fā)蚤吹,可理解Electron
的運作原理 - 6.掌握一種小程序開發(fā)框架或原生小程序開發(fā)
- 7.理解多端框架的內(nèi)部實現(xiàn)原理,至少了解一個多端框架的使用
數(shù)據(jù)流管理
- 1.掌握
React
和Vue
傳統(tǒng)的跨組件通信方案随抠,對比采用數(shù)據(jù)流管理框架的異同 - 2.熟練使用
Redux
管理數(shù)據(jù)流距辆,并理解其實現(xiàn)原理,中間件實現(xiàn)原理 - 3.熟練使用
Mobx
管理數(shù)據(jù)流暮刃,并理解其實現(xiàn)原理跨算,相比Redux
有什么優(yōu)勢 - 4.熟練使用
Vuex
管理數(shù)據(jù)流,并理解其實現(xiàn)原理 - 5.以上數(shù)據(jù)流方案的異同和優(yōu)缺點椭懊,不情況下的技術(shù)選型
實用庫
- 1.至少掌握一種
UI
組件框架诸蚕,如antd design
,理解其設計理念氧猬、底層實現(xiàn) - 2.掌握一種圖表繪制框架背犯,如
Echart
,理解其設計理念盅抚、底層實現(xiàn)漠魏,可以自己實現(xiàn)圖表 - 3.掌握一種
GIS
開發(fā)框架,如百度地圖API
- 4.掌握一種可視化開發(fā)框架妄均,如
Three.js
柱锹、D3
- 5.工具函數(shù)庫,如
lodash
丰包、underscore
禁熏、moment
等,理解使用的工具類或工具函數(shù)的具體實現(xiàn)原理
開發(fā)和調(diào)試
- 1.熟練使用各瀏覽器提供的調(diào)試工具
- 2.熟練使用一種代理工具實現(xiàn)請求代理邑彪、抓包瞧毙,如
charls
- 3.可以使用
Android
、IOS
模擬器進行調(diào)試寄症,并掌握一種真機調(diào)試方案 - 4.了解
Vue
宙彪、React
等框架調(diào)試工具的使用
七、前端工程
前端工程化:以工程化方法和工具提高開發(fā)生產(chǎn)效率有巧、降低維護難度
項目構(gòu)建
- 1.理解
npm
释漆、yarn
依賴包管理的原理,兩者的區(qū)別 - 2.可以使用
npm
運行自定義腳本 - 3.理解
Babel
剪决、ESLint
灵汪、webpack
等工具在項目中承擔的作用 - 4.
ESLint
規(guī)則檢測原理檀训,常用的ESLint
配置 - 5.
Babel
的核心原理,可以自己編寫一個Babel
插件 - 6.可以配置一種前端代碼兼容方案享言,如
Polyfill
- 7.
Webpack
的編譯原理峻凫、構(gòu)建流程、熱更新原理览露,chunk
荧琼、bundle
和module
的區(qū)別和應用 - 8.可熟練配置已有的
loaders
和plugins
解決問題,可以自己編寫loaders
和plugins
nginx
- 1.正向代理與反向代理的特點和實例
- 2.可手動搭建一個簡單的
nginx
服務器差牛、 - 3.熟練應用常用的
nginx
內(nèi)置變量命锄,掌握常用的匹配規(guī)則寫法 - 4.可以用
nginx
實現(xiàn)請求過濾、配置gzip
偏化、負載均衡等脐恩,并能解釋其內(nèi)部原理
開發(fā)提速
- 1.熟練掌握一種接口管理、接口
mock
工具的使用侦讨,如yapi
- 2.掌握一種高效的日志埋點方案驶冒,可快速使用日志查詢工具定位線上問題
- 3.理解
TDD
與BDD
模式,至少會使用一種前端單元測試框架
版本控制
- 1.理解
Git
的核心原理韵卤、工作流程骗污、和SVN
的區(qū)別 - 2.熟練使用常規(guī)的
Git
命令、git rebase
沈条、git stash
等進階命令 - 3.可以快速解決
線上分支回滾
需忿、線上分支錯誤合并
等復雜問題
持續(xù)集成
- 1.理解
CI/CD
技術(shù)的意義,至少熟練掌握一種CI/CD
工具的使用蜡歹,如Jenkins
- 2.可以獨自完成架構(gòu)設計屋厘、技術(shù)選型、環(huán)境搭建季稳、全流程開發(fā)擅这、部署上線等一套完整的開發(fā)流程(包括
Web
應用、移動客戶端應用景鼠、PC
客戶端應用、小程序痹扇、H5
等等)
八铛漓、項目和業(yè)務
后端技能
- 1.了解后端的開發(fā)方式,在應用程序中的作用鲫构,至少會使用一種后端語言
- 2.掌握數(shù)據(jù)最終在數(shù)據(jù)庫中是如何落地存儲的浓恶,能看懂表結(jié)構(gòu)設計、表之間的關(guān)聯(lián)结笨,至少會使用一種數(shù)據(jù)庫
性能優(yōu)化
- 1.了解前端性能衡量指標包晰、性能監(jiān)控要點湿镀,掌握一種前端性能監(jiān)控方案
- 2.了解常見的
Web
、App
性能優(yōu)化方案 - 3.
SEO
排名規(guī)則伐憾、SEO
優(yōu)化方案勉痴、前后端分離的SEO
- 4.
SSR
實現(xiàn)方案、優(yōu)缺點树肃、及其性能優(yōu)化 - 5.
Webpack
的性能優(yōu)化方案 - 6.
Canvas
性能優(yōu)化方案 - 7.
React
蒸矛、Vue
等框架使用性能優(yōu)化方案
前端安全
- 1.
XSS
攻擊的原理、分類胸嘴、具體案例雏掠,前端如何防御 - 2.
CSRF
攻擊的原理、具體案例劣像,前端如何防御 - 3.
HTTP
劫持乡话、頁面劫持的原理、防御措施
業(yè)務相關(guān)
- 1.能理解所開發(fā)項目的整體業(yè)務形態(tài)耳奕、業(yè)務目標绑青、業(yè)務架構(gòu),可以快速定位線上業(yè)務問題
- 2.能理解所開發(fā)項目整體的技術(shù)架構(gòu)吮铭、能快讀的根據(jù)新需求進行開發(fā)規(guī)劃时迫、能快速根據(jù)業(yè)務報警、線上日志等定位并解決線上技術(shù)問題
- 3.可以將自己的想法或新技術(shù)在業(yè)務中落地實踐谓晌,盡量在團隊中擁有一定的不可替代性
九掠拳、學習提升
vczh
大神在知乎問題【如何能以后達到溫趙輪三位大神的水平?】下的回答:
這十幾年我一共做了三件事:
- 1纸肉、不以賺錢為目的選擇學習的內(nèi)容溺欧;
- 2、以自己是否能造出輪子來衡量學習的效果柏肪;
- 3姐刁、堅持每天寫自己的代碼,前10年每天至少6個小時烦味,不包含學習和工作的時間聂使。
上面幾點可能有點難,第一點我就做不到谬俄,但是做到下面績點還是比較容易的柏靶。
關(guān)于寫博客說明下,能給別人講明白的知識會比自己學習掌握的要深刻許多
- 1.擁有自己的技術(shù)博客溃论,或者在一些博客平臺上擁有自己的專欄
- 2.定期的將知識進行總結(jié)屎蜓,不斷完善自己的知識體系
- 3.盡量將自己的知識轉(zhuǎn)換成真實的產(chǎn)出,不要僅僅停留在書面理解層面,更重要的是實際應用
- 4.堅持輸出
自己
的代碼棚饵,不要盲目的扎進公司業(yè)
十、技術(shù)之外
這部分可能比上面九條加起來重要忿族!
- 1.了解互聯(lián)網(wǎng)人員術(shù)語:
CEO
扼劈、CTO
驻啤、COO
、CFO
测僵、PM
街佑、QA
、UI
捍靠、FE
沐旨、DEV
、DBA
榨婆、OPS
等 - 2.了解互聯(lián)網(wǎng)行業(yè)術(shù)語:
B2B
磁携、B2C
、C2C
良风、O2O
等 - 3.掌握互聯(lián)網(wǎng)行業(yè)溝通谊迄、問答、學習的
- 4.有一定的
"PPT"
能力 - 5.有一定的理財意識烟央,至少了解儲蓄统诺、貨幣基金、保險疑俭、指數(shù)基金粮呢、股票等基本的理財知識
- 6.掌握在繁重的工作和長期的電腦輻射的情況下保持健康的方法,建立正確的養(yǎng)生知識體系
十一钞艇、資源推薦
有了知識體系啄寡,在閱讀一篇技術(shù)文章的時候就很容易把它歸類,我一直以來就是這樣做的哩照。
事實證明挺物,在閱讀文章或書籍時,有目的和歸類的閱讀比"隨便看看"后的只是留存率要高很多飘弧。
每閱讀到一篇好的文章或者書籍识藤,我都會收藏并歸類到我的知識體系中。
下面是一些我覺得還不錯的文章次伶、博客或者書籍教程等等蹋岩,分享給大家,資源不多学少,但都是精品。
學習一門知識秧骑,最好先閱讀官方文檔版确,把所有的API
大概瀏覽一遍扣囊,再繼續(xù)看大佬們總結(jié)的進階知識,什么東西是搬運過來的绒疗,什么是干貨侵歇,一目了然。
語言基礎
- [??]
JavaScript
高級程序設計(必看):https://book.douban.com/subje... - [??]高性能
JavaScript
:https://book.douban.com/subje... - 現(xiàn)代
JavaScript
教程:https://zh.javascript.info/ - 阮一峰的
ECMAScript 6
教程:http://es6.ruanyifeng.com/ -
ECMAScript 6
標準:https://www.ecma-internationa... -
HTML meta
標簽總結(jié)與屬性使用介紹:https://segmentfault.com/a/11... -
CSS
編碼指導:https://github.com/chadluo/CS...
計算機基礎
- 大前端開發(fā)者需要了解的基礎編譯原理和語言知識:http://fullstack.blog/2017/06...
- 圖解
HTTP
:https://book.douban.com/subje... - [??]
JavaScript
設計模式與開發(fā)實踐:https://book.douban.com/subje... - 正則表達式30分鐘入門教程:https://link.juejin.im/?targe...
數(shù)據(jù)結(jié)構(gòu)和算法
- 數(shù)據(jù)結(jié)構(gòu)與算法之美:https://time.geekbang.org/col...
- 用動畫的形式呈現(xiàn)解
LeetCode
題目的思路:https://github.com/MisterBooo... -
JavaScript
數(shù)據(jù)結(jié)構(gòu)和算法:https://github.com/ConardLi/a... -
30-seconds-of-code
(里面有很多js
代碼非常巧妙吓蘑,我正在將它翻譯成中文):https://github.com/ConardLi/3...
運行環(huán)境
- 《重學前端》中的瀏覽器原理章節(jié):https://time.geekbang.org/col...
- 圖解瀏覽器的基本工作原理:https://zhuanlan.zhihu.com/p/...
- 七天學會
NodeJS
:https://github.com/nqdeng/7-d... -
Node.js
模塊加載與運行原理:https://efe.baidu.com/blog/no...
框架和類庫
-
TypeScript Handbook
:https://zhongsp.gitbooks.io/t... -
React.js
小書:http://huziketang.mangojuice.... -
React
深入系列:https://juejin.im/post/5cad39... -
Webpack React
小書:https://fakefish.github.io/re... -
Vue.js
技術(shù)揭秘:https://github.com/ustbhuangy... -
Vuex
-在Vue
中管理狀態(tài):https://sabe.io/tutorials/get... - 你需要
Mobx
還是Redux
惕虑?:https://juejin.im/post/5a7fd7... -
Underscore
源碼分析:https://yoyoyohamapi.gitbooks... - 微信小程序開發(fā)資源匯總:https://github.com/justjavac/...
- 騰訊移動
Web
前端知識庫:https://github.com/AlloyTeam/...
前端工程
- 一口(很長的)氣了解
babel
:https://zhuanlan.zhihu.com/p/... -
Webpack
傻瓜式指南:https://zhuanlan.zhihu.com/p/... -
Webpack
原理:https://segmentfault.com/a/11... - 廖雪峰的
git
教程:https://www.liaoxuefeng.com/w... - 圖解
Git
:https://marklodato.github.io/... - 前端開發(fā)者必備的
Nginx
知識:https://juejin.im/post/5c85a6... - 使用Jenkins進行持續(xù)集成:https://www.liaoxuefeng.com/a...
項目和業(yè)務
- 常見六大
Web
安全攻防解析:https://github.com/ljianshu/B... - 深入理解前端性能監(jiān)控:https://juejin.im/post/5caaac...
- [??]高性能網(wǎng)站建設指南:https://book.douban.com/subje...
- 新人如何快速融入技術(shù)實力強的前端團隊:https://juejin.im/post/5cb860...
學習提升
- 印記中文(各種中文開發(fā)文檔):https://www.docschina.org/
- 前端學習方法:https://github.com/helloqingf...
- 如何在工作內(nèi)外獲得持續(xù)的技術(shù)成長:https://juejin.im/post/5cbd74...
- 優(yōu)秀的前端博客匯總:https://github.com/foru17/fro...
另外推薦我一直在關(guān)注的幾位大佬的個人博客:
- 冴羽的博客:https://github.com/mqyqingfen...
- 張鑫旭的博客:https://www.zhangxinxu.com/wo...
- 左耳朵耗子:https://coolshell.cn/
技術(shù)之外
- 互聯(lián)網(wǎng)術(shù)語大全:http://www.reibang.com/p/9a7...
- 互聯(lián)網(wǎng)溝通、問答磨镶、學習的藝術(shù):https://zhuanlan.zhihu.com/p/...
- 經(jīng)常加班至深夜溃蔫,怎樣才能保持身體健康:https://www.zhihu.com/questio...
其實在這個信息發(fā)達的時代最不缺的就是資源,如何從眾多的資源中獲取到真正精華的部分琳猫,是非常重要的伟叛,資源在于精不在于多,強烈建議在保證深度的情況下再保證廣度脐嫂。
小結(jié)
希望你閱讀本篇文章后可以達到以下幾點:
- 從知識清單中找到自己的知識盲點與欠缺
- 具有知識體系化的思想统刮,開始建立自己的知識體系
- 閱讀文章時將知識歸類到知識體系中,并不斷完善自己的知識體系
- 從文章中獲取到了有用的資源
文中如有錯誤账千,歡迎在評論區(qū)指正侥蒙,如果這篇文章幫助到了你,歡迎點贊和關(guān)注匀奏。
如果你有什么好的知識鞭衩、資源推薦,歡迎在評論區(qū)留言攒射。
想閱讀更多優(yōu)質(zhì)文章醋旦、下載文章中思維導圖源文件、可關(guān)注我的github博客会放,后續(xù)的文章我也會按照知識清單來寫饲齐,你的star?、點贊和關(guān)注是我持續(xù)創(chuàng)作的動力咧最!