前言

互聯(lián)網(wǎng)建立50多年了，網(wǎng)站開(kāi)發(fā)技術(shù)日新月異，但web前端始終離不開(kāi)瀏覽器，最終還是HTML+JavaScript+CSS這3個(gè)核心，圍繞這3個(gè)核心而開(kāi)發(fā)出來(lái)大量技術(shù)框架/解決方案。

我從2000年初開(kāi)始做網(wǎng)站開(kāi)發(fā)，使用的技術(shù)不斷迭代，一些消失了，更多的出現(xiàn)了。

最近寫(xiě)過(guò) .NET技術(shù)大系概覽 （迄今為止最全的.NET技術(shù)棧），相信很多網(wǎng)友感嘆掌握的.NET技術(shù)遠(yuǎn)沒(méi)有這個(gè)技術(shù)棧里面所描述的多。

爆棧三部曲

Web前端開(kāi)發(fā)大系概覽 （前端開(kāi)發(fā)技術(shù)棧），包含大約180個(gè)技術(shù)點(diǎn)
數(shù)據(jù)庫(kù)開(kāi)發(fā)大系技術(shù)棧 （300多技術(shù)點(diǎn)）
.NET技術(shù)大系概覽 （迄今為止最全的.NET技術(shù)棧）

問(wèn)題

大家是否想過(guò)：

Web前端開(kāi)發(fā)究竟包含哪些技術(shù)呢？
我所掌握的技術(shù)這個(gè)子集，在Web前端技術(shù)大系這個(gè)超集里面占的比例是多少呢？
我究竟還沒(méi)有掌握多少Web前端技術(shù)呢？
面試的時(shí)候會(huì)考哪些技術(shù)呢？

相信很多網(wǎng)友看過(guò)我之前寫(xiě)的.NET技術(shù)大系概覽 （迄今為止最全的.NET技術(shù)棧），一個(gè)簡(jiǎn)單易懂的棧圖可以概括.NET這個(gè)龐大的技術(shù)生態(tài)圈里面基礎(chǔ)技術(shù)：

然后我也寫(xiě)了數(shù)據(jù)庫(kù)開(kāi)發(fā)大系技術(shù)棧 （300多技術(shù)點(diǎn)），一個(gè)簡(jiǎn)單易懂的棧圖可以概括數(shù)據(jù)庫(kù)這個(gè)龐大的技術(shù)生態(tài)圈里面基礎(chǔ)技術(shù)：

那么，Web前端開(kāi)發(fā)是否也應(yīng)該有這樣的技術(shù)棧概覽圖呢？

搜索了很久，沒(méi)有找到一個(gè)符合我要求的“較為全面”地表述Web前端技術(shù)大系的圖表。

互聯(lián)網(wǎng)上來(lái)去都是那幾個(gè)簡(jiǎn)單的，譬如這個(gè)：

或者這個(gè)：

或者這個(gè)：

不過(guò)這些都遠(yuǎn)遠(yuǎn)沒(méi)有高度概括整個(gè)Web前端開(kāi)發(fā)技術(shù)，和我需要的不一樣。

Web前端開(kāi)發(fā)技術(shù)棧

現(xiàn)在流行一個(gè)說(shuō)法，是Full Stack （全棧），簡(jiǎn)單地說(shuō)是萬(wàn)金油，說(shuō)得體面一點(diǎn)就是前端、后臺(tái)、存儲(chǔ)、架構(gòu)等都懂，我覺(jué)得我不是全棧，而是爆棧(stack overflow)，開(kāi)玩笑了。。。。

這個(gè)Web前端開(kāi)發(fā)技術(shù)棧，大約20個(gè)層級(jí)，大約100個(gè)技術(shù)點(diǎn)，從底層一直到最頂層：

瀏覽器
渲染引擎、JavaScript引擎
HTML/JavaScript/CSS三支柱
編輯器
編譯任務(wù)
編譯工具
打包、調(diào)試、質(zhì)量
測(cè)試
JS基礎(chǔ)類庫(kù)
JS類庫(kù)
UI框架
CSS預(yù)處理器
模板
現(xiàn)代化
安全/模式
中間語(yǔ)言
跨平臺(tái)解決方案

這個(gè)圖表里的分類未必準(zhǔn)確，相關(guān)技術(shù)也難免會(huì)有遺漏，歡迎大家指點(diǎn)以便不斷改進(jìn)。

Web前端技術(shù)實(shí)在太繁多限于篇幅，，這里沒(méi)有羅列一些技術(shù)。

以下是預(yù)覽圖：

因?yàn)閮?nèi)容太多，要看完整技術(shù)棧圖的，可以訪問(wèn)GitHub。

GitHub開(kāi)源

在GitHub開(kāi)源了：WebFrontEndStack

交互式瀏覽

點(diǎn)擊這里查看基于HTML的交互式圖示 (鼠標(biāo)拖動(dòng)/滾輪縮放)

總結(jié)

以上是生活随笔為你收集整理的Web前端开发大系概览 （前端开发技术栈）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。