關(guān)于前端學(xué)習(xí)路線的一些建議（內(nèi)含經(jīng)典自測題）

然這篇文章花了很長時間，肯定也有其局限性；希望各位不吝指出。

入題

我們儼然能感受到前端崗位現(xiàn)在已經(jīng)發(fā)展成了最重要的研發(fā)崗位之一，所以對我們提出的要求也就越來越高。所以我們需要學(xué)的也就不僅僅只是 CSS & HTML & JavaScript 了。但這三大件一直都是前端的根本，這一點從未改變。而這三大件中 JavaScript 又是重中之重。

接下來我會結(jié)合我的一點經(jīng)驗，給出前端學(xué)習(xí)路線的一些具體建議。

三大件學(xué)習(xí)
庫工具
前端框架（ MVVM ）的學(xué)習(xí)
瀏覽器 & 計算機基礎(chǔ)
前端工程化
性能優(yōu)化
Nodejs
數(shù)據(jù)結(jié)構(gòu)和算法
依葫蘆畫瓢

三大件學(xué)習(xí)

現(xiàn)在每年依舊有很多初級入門的前端開發(fā)。所以對初入門的朋友也給出一點意見。

剛?cè)腴T的朋友，我覺得不應(yīng)該一開始就學(xué)習(xí)像 Vue、TypeScript、Webpack 等知識。應(yīng)該把重點放在 CSS & HTML & JavaScript 基礎(chǔ)知識的學(xué)習(xí)上。

CSS & HTML

對于剛?cè)腴T的朋友我依舊建議先將 CSS(3) & HTML(5) 的知識點認(rèn)真學(xué)習(xí)一邊。學(xué)習(xí)的途中最好是學(xué)習(xí)完一部分就自己在敲一遍代碼，加深自己的記憶。

當(dāng)然如果你愿意，建議你可以先仿一個網(wǎng)站的靜態(tài)頁面（掘金、知乎等都可以），有一些屬性就可以了解他實際的實現(xiàn)場景。

當(dāng)然剛開始敲代碼的時候還是不要過分依賴自動補全功能，一開始就使用自動補全對你記憶一些屬性時沒有幫助的；踏實點學(xué)習(xí)，日后會有回報的。

關(guān)于 CSS(3) 你需要了解的一些知識點

盒模型（標(biāo)準(zhǔn) & IE ）
flex、float、Normal Flow 等的理解
CSS 常用選擇器
行內(nèi)、內(nèi)部、外部樣式的區(qū)別
CSS 層疊規(guī)則
BFC 與 IFC 的了解
CSS3 的 transform、transition、animation 等屬性的運用了解
響應(yīng)式布局的理解
……

CSS 說容易也容易，說復(fù)雜也復(fù)雜；因為 CSS 總是能給你意外的驚喜。

HTML(5) 你需要了解的一些知識點

說到 HTML 我想有很多人是 div 一把梭。因為 div 用的爽，不用擔(dān)心默認(rèn)樣式。

有人說 HTML 語義化的優(yōu)點很多，比如清晰的頁面結(jié)構(gòu)、有利于 SEO、便于團(tuán)隊開發(fā)和維護(hù)；這些我都承認(rèn)，不過我還是喜歡 div 一把梭。

HTML 語義化( 不是很理解為什么面試總會問 )
canvas
本地存儲（ localStorage、sessionStorage、cookie 的理解）
video 和 audio 的使用
應(yīng)用緩存( cache manifest )
……

JavaScript

JavaScript 一直都是我們前端的基石，一定程度上 JavaScript 的理解深度決定了你的發(fā)展。所以一定要用心學(xué)習(xí)。

現(xiàn)在很多人一看到閉包、原型鏈、作用域鏈、繼承之類的文章都是直接跳過，你現(xiàn)在可以自問一下你的確理解這些基礎(chǔ)的知識點嗎？

JavaScript 的基礎(chǔ)知識點確實很多，所以《JavaScript 高級程序設(shè)計》寫了 700 多頁；不過當(dāng)你 JS 基礎(chǔ)扎實后，你會發(fā)現(xiàn)你在學(xué)習(xí)框架、亦或是學(xué)習(xí)框架源碼的時候會輕松許多。

JavaScript（ES6+）你需要了解的一些知識點

類型轉(zhuǎn)換
this
作用域（作用域鏈）
原型鏈以及繼承
閉包的理解
動態(tài)作用域和詞法作用域
JavaScript 執(zhí)行機制
promise & async
……

上面說的 CSS & HTML & JavaScript 的基礎(chǔ)知識點并不需要你一入門就全部都理解透徹；有些雖然是基礎(chǔ)，但卻也有它的難度。就算是高級也不敢說自己全都掌握了，有句話說的挺好 —— 書讀百遍、其義自見。

我們第一遍學(xué)習(xí)不可能盡懂，到最少可以給我留下一個印象。過一段時間再學(xué)習(xí)這塊知識點的時候，你肯定會有一個全新的理解。學(xué)習(xí)只一個需要一直在線的任務(wù)，重復(fù)的學(xué)習(xí)可以幫助你保持持續(xù)的競爭力。

我先聲明一點，我并沒有說其他技術(shù)不需要去學(xué)習(xí)，只不過初入門最好重點是先將基礎(chǔ)夯實。

其實三大件的學(xué)習(xí)不需要花費多少時間，有基礎(chǔ)的大概 3 個月就可以大致的看一遍。是否真的理解這是后話，不過已經(jīng)算是入門了。

CSS & HTML & JavaScript 推薦書籍/網(wǎng)站

_ W3C 的 CSS&HTML 網(wǎng)絡(luò)教程
《CSS 權(quán)威指南》
《CSS 揭秘》
《JavaScript 高級程序設(shè)計》
《你不知道的 JavaScript》上卷
_ ECMAScript 6 入門

HTML 不知道推薦什么書。我個人覺得看教程和動手實踐就基本沒什問題。

接下來我們就可以學(xué)習(xí)一些工具類的庫了。

庫工具

對于庫工具而言我們常用的有 JQuery、underScore、zepto、Moment 等

JQuery: 降低開發(fā)者操作 DOM 的復(fù)雜度
UnderScore: 提供實用的函數(shù)
Zepto: JQuery 的簡化版
Moment: 日期和時間操作庫

這些庫給我們提供了很大的便利，省去了我們編寫相關(guān)方法的時間，同時也是我們的程序更加穩(wěn)健 —— 我們自己寫的方法很可能在某些情況下就出 bug 了。

當(dāng)然對于這些庫我們不僅僅只是去了解 API，我們需要去學(xué)習(xí)它的源碼。看看如果自己寫相關(guān)方法的話是不是也想到了這種方式，這些庫工具是也是一個很好地學(xué)習(xí)工具，我們不應(yīng)該忽略。

比如讓你自己實現(xiàn)節(jié)流函數(shù)，你會如何實現(xiàn)。
過濾對象應(yīng)該如何實現(xiàn)
……

這種問題的答案不就在 Underscore 源碼里面嗎？

我們在學(xué)習(xí)庫工具的時候，必定是需要回頭看 JavaScript 基礎(chǔ)的；這也就進(jìn)一步夯實了基礎(chǔ)。

前端框架（ MVVM ）的學(xué)習(xí)

當(dāng)下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我們更加方便的操作 DOM,那么現(xiàn)在 MVVM 框架則是讓我們從手動更新 DOM 的繁雜操作中解放出來。

至于 React 和 Vue 該學(xué)習(xí)哪一個，更多的還是看當(dāng)下公司使用的是哪一個（也不是必然）。對于 Vue(React) 該如何使用其實不用多久就能上手，我們更應(yīng)該關(guān)心的是他們背后的設(shè)計思想和實現(xiàn)原理。

一些問題

響應(yīng)式的基本原理是什么
發(fā)布訂閱模式的理解
Virtual DOM 的理解
前端路由的實現(xiàn)原理
nextTick / setState 的實現(xiàn)原理
diff 算法
單頁面應(yīng)用（SPA）的原理和優(yōu)缺點
……

我們對于框架的 API 使用沒必要花太多時間，應(yīng)該多研究他們背后的設(shè)計思想和實現(xiàn)原理。

Vue 和 React 我該選擇哪一個？

對于這個問題相比很多人都有困擾（有些人兩個都學(xué)，也就沒有這個困擾），這個問題已經(jīng)有很多人回答了。但我還是覺得不是非要選擇哪一個才是政治正確，選擇你需要的。

感興趣的可以看看這篇文章：

React or Vue: Which Javascript UI Library Should You Be Using?

以下是提煉的文中觀點：

Vue的優(yōu)勢是：

模板和渲染函數(shù)的彈性選擇
簡單的語法和項目配置
更快的渲染速度和更小的體積

React的優(yōu)勢是：

更適合大型應(yīng)用和更好的可測試性
同時適用于 Web 端和原生 App
更大的生態(tài)系統(tǒng)，更多的支持和好用的工具

Vue 相關(guān)資料

對于框架的一些學(xué)習(xí)資料我個人更傾向于推薦官方文檔，有很多問題官方文檔已經(jīng)說得很清楚了。市面上有些書籍也就是對官方文檔進(jìn)行了一個擴(kuò)寫（不排除有精良之作）。

Vue 官網(wǎng) & Vue Router 官網(wǎng) & Vuex 官網(wǎng)
剖析 Vue.js 內(nèi)部運行機制掘金小冊
vue 技術(shù)揭秘

瀏覽器 & 計算機基礎(chǔ)

如果你希望能能快速進(jìn)階到高級工程師，那么對于瀏覽器 & 計算機基礎(chǔ)的知識你就必要又有一定的掌握。因為這能讓你更好的理解前端。

瀏覽器一直是 JavaScript 最重要的宿主環(huán)境，所以我們必須去了解 JavaScript 在瀏覽器中是如何執(zhí)行的。

我們前端開發(fā)接觸最多的應(yīng)該就是瀏覽器了，記得工作第一年最頭痛的就是處理 IE 的兼容問題。工作中出現(xiàn)的很多問題都和瀏覽器有關(guān)，所以我覺得了解瀏覽器工作原理是非常有必要的。

為何要學(xué)習(xí)瀏覽器工作原理？

準(zhǔn)確評估 Web 開發(fā)項目的可行性
從更高維度審視頁面
解決面試中遇到的絕大部分瀏覽器問題

計算機基礎(chǔ)

對于計算機基礎(chǔ)我們需要做到大體了解，這樣的話我們對整體的流程會有一個大概的把握。在實際開發(fā)過程中不會過于被動。

需要了解的一些知識點

瀏覽器緩存機制
瀏覽器中 JavaScript 的執(zhí)行機制
頁面渲染原理
瀏覽器安全問題
瀏覽器為什么會跨域
如何系統(tǒng)的優(yōu)化頁面
HTTP 與 HTTPS 的區(qū)別
TCP/IP 協(xié)議
三次握手和四次揮手
CDN 的作用和原理
正向代理與反向代理的特點
……

這里僅僅列出了一部分知識點，如果想全面的學(xué)習(xí)可以看下面推薦的資料。

瀏覽器 & 網(wǎng)絡(luò)基礎(chǔ)推薦書籍/資料

《瀏覽器工作原理與實踐》專欄
《圖解 HTTP》
《網(wǎng)絡(luò)是怎樣連接的》

前端工程化

從事前端稍微久一點的開發(fā)就一定會有這個感受 —— 前端開發(fā)越來越工程化，越來越復(fù)雜。

對于前端開發(fā)來說，現(xiàn)在前端要做的不只是切頁面調(diào)接口這么簡單，我們需要了解的技術(shù)無疑更加廣泛。

前端工程化的一點淺見

由于項目的復(fù)雜度越來越高，前端需要做的工作就越來越繁重。當(dāng)項目復(fù)雜就會產(chǎn)生許多問題，比如：

如何進(jìn)行高效的多人協(xié)作？
如何保證項目的可維護(hù)性？
如何提高項目的開發(fā)質(zhì)量？
如何降低項目生產(chǎn)的風(fēng)險？

前端工程化細(xì)分的話我覺得可以分成模塊化、組件化、規(guī)范化三個方向。或者說一切能提升前端開發(fā)效率，提高前端應(yīng)用質(zhì)量的手段和工具都是前端工程化的實踐。

模塊化

JavaScript 模塊化
CSS 模塊化
資源模塊化

組件化

從 UI 拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結(jié)構(gòu)單元，我們稱之為組件。

也就是將復(fù)雜頁面按功能拆分成多個獨立的組件。

規(guī)范化

編碼規(guī)范
接口規(guī)范
git 使用規(guī)范
CodeReview
UI 元素規(guī)范

前端工程化一些知識點

理解 Babel、ESLint、webpack 等工具在項目中的作用
Babel 的核心原理
Webpack 的編譯原理、構(gòu)建流程、熱更新原理
nginx 的基本理解
理解 Git 的工作流程
Mock 的意義及優(yōu)點

性能優(yōu)化

提起性能優(yōu)化，大家最先想到的是什么？我最先想到的是一道面試題：

從輸入 URL 到頁面加載完成的具體過程

因為從直觀層面來看，我們前端需要優(yōu)化的步驟基本都在這個加載工程當(dāng)中。

性能優(yōu)化現(xiàn)在對于前端來說已經(jīng)是必不可少的技能了，當(dāng)然現(xiàn)在有些所謂的性能優(yōu)化的技巧現(xiàn)在都成為了一種需要遵從的規(guī)范。

我們需要關(guān)注兩個方向的性能優(yōu)化：

運行時的優(yōu)化
開發(fā)時的優(yōu)化

性能優(yōu)化一些知識點

前端性能衡量指標(biāo)、性能監(jiān)控（performance,LightHouse）
常見的性能優(yōu)化方案有哪些
SSR 方案的性能優(yōu)化
Webpack 的性能優(yōu)化方案
React、Vue 等框架使用性能優(yōu)化方案
網(wǎng)絡(luò)層面的優(yōu)化方案
頁面渲染層面的優(yōu)化方案
白屏的優(yōu)化方案
……

推薦資料

《大型網(wǎng)站性能優(yōu)化實戰(zhàn)》
《前端性能優(yōu)化原理與實踐》掘金小冊

Nodejs

我們知道由于 Nodejs 的出現(xiàn)，前端開發(fā)出現(xiàn)了一個新的高潮。JS 開始可以涉及后端領(lǐng)域，JS 的可能性更大了。

Nodejs 一些知識點

Nodejs 在應(yīng)用程序中的作用
Express 和 Koa 的區(qū)別
Nodejs 的底層運行原理、和瀏覽器的異同
Nodejs 非阻塞機制的實現(xiàn)原理
……

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

這一點我也比較薄弱，就不展開了。關(guān)于這部分你可以刷 leetcode。

另外推一本書《學(xué)習(xí) JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法》（第三版）

依葫蘆畫瓢

我們在項目開發(fā)的過程中可以接觸到很多優(yōu)秀的庫工具或者是 UI 庫。如 lodash、underscore、moment、element-ui、antd design 等。

我們可能自己設(shè)計不出來這么優(yōu)秀的工具，但是我們完全可以依葫蘆畫瓢自己按著這些工具寫一遍，你就會發(fā)現(xiàn)里面有很多不可思議的技巧、優(yōu)秀的思想。

依葫蘆畫瓢對學(xué)習(xí)來說也是一個非常有用的技巧。

序員書庫（ID：OpenSourceTop）綜合整理
綜合自：https://space.bilibili.com/511221970?spm_id_from=333.788.b_765f7570696e666f.2、https://www.zhihu.com/people/zhou-bo-lei

上個月，香港中文大學(xué)（CUHK）信息工程系助理教授周博磊在知乎上表示自己有一個大膽的想法：每周把每節(jié)課用中文在B站上直播《強化學(xué)習(xí)》課程：

近日，經(jīng)過一番內(nèi)心掙扎的周博磊終于在B站上上傳了第一課。

這門課講了什么？

該課程分為基礎(chǔ)部分和高階強化部分，基礎(chǔ)部分是由8個小節(jié)組成，每一節(jié)可能會有兩個課時左右，首先從強化學(xué)習(xí)的基礎(chǔ)開始。

第二部分是高階的課程內(nèi)容，如圍棋AI AlphaGo、游戲AI AlphaStar、OpenAI Five以及強化學(xué)習(xí)的分布式構(gòu)建、生成模型等。課程使用的編程語言是Python，深度學(xué)習(xí)框架則是PyTorch為主。

此外，周博磊老師還推薦讀者使用《深度學(xué)習(xí)》這本書，這本書的英文版是開源的，可以免費下載，《深度學(xué)習(xí)》下載地址：http://incompleteideas.net/book/the- book- 2nd.html

課程適合人群

這門課程面向大三大四以及研一的同學(xué)。你應(yīng)該具備一些線性代數(shù)的背景知識，上過概率論、機器學(xué)習(xí)相關(guān)的一門課程（數(shù)據(jù)挖掘、模式識別、深度學(xué)習(xí)等）。有Python和PyTorch編程經(jīng)驗。

第一節(jié)課部分PPT展示

第一課包含上下兩個部分，主要介紹強化學(xué)習(xí)的基本概念、序列決策入門、強化學(xué)習(xí)編程實踐等內(nèi)容。部分PPT展示如下：

課程地址：https://space.bilibili.com/511221970?spm_id_from=333.788.b_765f7570696e666f.2

最后，課程的PPT和代碼都會上傳到Github上，需要的同學(xué)也可以前往下載。（Github地址：https://github.com/zhoubolei/introRL）

里還是要說一下我的前端學(xué)習(xí)群：594959296，從我一個人到現(xiàn)在的1455人都是我每篇文章每個特效聚集的小伙伴，可以說都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來，歡迎初學(xué)和進(jìn)階中的小伙伴。

下面的技巧，后三個，請謹(jǐn)慎用于團(tuán)隊項目中(主要考慮到可讀性的問題)，不然，leader 干你沒商量。

Boolean

這個技巧用的很多，也非常的簡單

通過兩個取反，可以強制轉(zhuǎn)換為Boolean類型。較為常用。

Number

這個也特別簡單，String轉(zhuǎn)化為Number

會自動轉(zhuǎn)化為number類型的。較為常用。

IIFE

這個其實非常有實用價值，不算是裝逼。只是其他語言里沒有這么玩的，給不太了解js的同學(xué)看那可牛逼大了。

實用價值在于可以防止全局污染。不過現(xiàn)在隨著ES2015的普及已經(jīng)沒什么必要用這個了，我相信五年之后，這種寫法就會逐漸沒落。

自己干五年，在實習(xí)生面前裝逼用也是蠻不錯的嘛~

Closure

閉包嘛，js 特別好玩的一個地方。上面的立即執(zhí)行函數(shù)就是對閉包的一種運用。

不了解的回去翻翻書，知乎上也有很多討論，可以去看看。

閉包用起來對初學(xué)者來說簡直就是大牛的標(biāo)志(其實并不是)。

上面用到了閉包，看起來還挺裝逼的吧。不過好像沒什么實用價值。

那么這樣呢？

通過高階函數(shù)很輕松的實現(xiàn)判定類別。(別忘了有判定Array的Array.isArray())

當(dāng)然，很明顯，這只是基礎(chǔ)，并不能更裝逼一點。來看下一節(jié)

Event

事件響應(yīng)前端肯定都寫爛了，一般來說如何寫一個計數(shù)器呢？

好像是沒什么問題哦，但是！變量times為什么放在外面，就用了一次放在外面，命名沖突了怎么辦，或者萬一在外面修改了怎么辦。

這個時候這樣一個事件監(jiān)聽代碼就比較牛逼了

怎么樣，是不是立刻感覺不一樣了。瞬間逼格高了起來！

通過創(chuàng)建一個閉包，把times封裝到里面，然后返回函數(shù)。這個用法不太常見。

parseInt

高能預(yù)警
從這里開始，下面的代碼謹(jǐn)慎寫到公司代碼里！

parseInt

這個函數(shù)太普通了，怎么能裝逼。答案是

現(xiàn)在摁下

F12

，在console里復(fù)制粘貼這樣的代碼：

這個技巧十分裝逼，原理是

是一個叫做按位非的操作，會返回數(shù)值的反碼。是二進(jìn)制操作。

原因在于JavaScript中的number都是double類型的，在位操作的時候要轉(zhuǎn)化成int，兩次~就還是原數(shù)。

Hex

十六進(jìn)制操作。其實就是一個Array.prototype.toString(16)的用法

看到這個詞腦袋里冒出的肯定是CSS的顏色。

做到隨機的話可以這樣

底下的原文鏈接非常建議去讀一下，后三個技巧都是在那里學(xué)到的。

注：
此隨機數(shù)會產(chǎn)生五位，四位，甚至一位的顏色。所以嚴(yán)謹(jǐn)?shù)脑掃€是要做一下判定的

@yangfch3

,
然后其實也有了很多改進(jìn)的地方。詳細(xì)請看下面的評論

@scar

,
謝謝

@mitsunchieh

的勘誤, 真的從各位大神身上學(xué)到了很多

左移操作。這個操作特別叼。一般得玩 C 玩得多的，這個操作會懂一些。一般半路出家的前端碼農(nóng)可能不太了解(說的是我 ?)。

這個也是二進(jìn)制操作。將數(shù)值二進(jìn)制左移

解釋上面的

1<<24

的操作。

其實是1左移24位。

000000000000000000000001

左移24位，變成了

1000000000000000000000000

不信？

試著在console粘貼下面的代碼

其實還有一種更容易理解的方法來解釋

二進(jìn)制操作。

BTW

最后想說的

不安逸，不浮躁。任何學(xué)習(xí)都不是一蹴而就的，牛B就是一個學(xué)習(xí)積累的過程，別指望兩三個月，你的水平就多么厲害。倚天屠龍記里面的武功最牛B的是張三豐，而不是張無忌。
任何工作都需要多種技能，別忽略了html,css等其他知識的學(xué)習(xí)。

javascript學(xué)習(xí)是一個時時刻刻需要思考的技能，他并不是一勞永逸的，所以學(xué)習(xí)javascript需要自己有一個持續(xù)學(xué)習(xí)的心。

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗可以關(guān)注我的微信公眾號：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

在線咨詢

上一篇：「HTML一」 html基礎(chǔ)
下一篇：如何編寫屬于自己的 PostCSS 8 插件？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

關(guān)于前端學(xué)習(xí)路線的一些建議（內(nèi)含經(jīng)典自測題）

Boolean

Number

IIFE

Closure

Event

parseInt

Hex

BTW

最后想說的

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗可以關(guān)注我的微信公眾號：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

您的項目需求