本文關(guān)鍵詞：Web前端開(kāi)發(fā)技術(shù)，由筆耕文化傳播整理發(fā)布。

前言

互聯(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ù)棧里面所描述的多。

大家是否想過(guò)：

相信很多網(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ù)，和我需要的不一樣。

現(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)，從底層一直到最頂層：

這個(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)源了：WebFrontEndStack

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

  本文關(guān)鍵詞：Web前端開(kāi)發(fā)技術(shù)，由筆耕文化傳播整理發(fā)布。