Web前端開發大系概覽 （前端開發技術棧）
前言
網際網路建立50多年了，網站開發技術日新月異，但web前端始終離不開瀏覽器，最終還是HTML+JavaScript+CSS這3個核心，圍繞這3個核心而開發出來大量技術框架/解決方案。
我從2000年初開始做網站開發，使用的技術不斷迭代，一些消失了，更多的出現了。
爆棧三部曲
問題
大家是否想過：
- Web前端開發究竟包含哪些技術呢？
- 我所掌握的技術這個子集，在Web前端技術大系這個超集裡面佔的比例是多少呢？
- 我究竟還沒有掌握多少Web前端技術呢？
- 面試的時候會考哪些技術呢？
相信很多網友看過我之前寫的，一個簡單易懂的棧圖可以概括.NET這個龐大的技術生態圈裡面基礎技術：
然後我也寫了，一個簡單易懂的棧圖可以概括資料庫這個龐大的技術生態圈裡面基礎技術：
那麼，Web前端開發是否也應該有這樣的技術棧概覽圖呢？
搜尋了很久，沒有找到一個符合我要求的“較為全面”地表述Web前端技術大系的圖表。
網際網路上來去都是那幾個簡單的，譬如這個：
或者這個：
或者這個：
不過這些都遠遠沒有高度概括整個Web前端開發技術，和我需要的不一樣。
Web前端開發技術棧
現在流行一個說法，是Full Stack （全棧），簡單地說是萬金油，說得體面一點就是前端、後臺、儲存、架構等都懂，我覺得我不是全棧，而是爆棧(stack overflow)，開玩笑了。。。。
這個Web前端開發技術棧，大約20個層級，大約100個技術點，從底層一直到最頂層：
- 瀏覽器
- 渲染引擎、JavaScript引擎
- HTML/JavaScript/CSS三支柱
- 編輯器
- 編譯任務
- 編譯工具
- 打包、除錯、質量
- 測試
- JS基礎類庫
- JS類庫
- UI框架
- CSS前處理器
- 模板
- 現代化
- 安全/模式
- 中間語言
- 跨平臺解決方案
這個圖表裡的分類未必準確，相關技術也難免會有遺漏，歡迎大家指點以便不斷改進。
Web前端技術實在太繁多限於篇幅，，這裡沒有羅列一些技術。
以下是預覽圖：
因為內容太多，要看完整技術棧圖的，可以訪問GitHub。
GitHub開源
互動式瀏覽
點選 這裡 檢視基於HTML的互動式圖示 (滑鼠拖動/滾輪縮放)
相關推薦
Web前端開發大系概覽 （前端開發技術棧）
前言 網際網路建立50多年了，網站開發技術日新月異，但web前端始終離不開瀏覽器，最終還是HTML+JavaScript+CSS這3個核心，圍繞這3個核心而開發出來大量技術框架/解決方案。 我從2000年初開始做網站開發，使用的技術不斷迭代，一些消失了，更多的出現了。 爆棧三部曲 問題
記錄開發Nodejs c++ addon的一些經驗（一、技術棧）
c++編寫 fstream href ren http lan www. 記錄 ref Nodejs c++ addon 是用c++去編寫Nodejs的插件 技術棧： 1、node-gyp 一個用於把c++文件編譯成node可執行文件的庫 2、v8 google
前端開發——滾滾屏（沒有縱向滾動條）
1.前端流程： 1）需求分析 2）原型圖（低保真）——產品經理/設計師/策劃繪製 3）做效果圖 4）程式碼實現 2.優秀網站欣賞： 1）百度錢包 一分錢專享 ： https://1.b
2017年最權威的1000集大型web前端視頻教程（愛創課堂出品）文後附錄視頻下載鏈接
前端 前端學習 前端入門 2017年最新愛創課堂前端開發課程介紹愛創課堂Web前端開發工程師培訓-價值1萬8課程資料持續更新中，第一時間領取請加QQ2079576908Web前端開發工程師，主要職責是利用HTML、XHTML、CSS、JAVAScript、FLASH等各種Web前端技術進行客戶端
Web開發——JavaScript庫（jQuery遍歷——祖先）
遍歷圖解： 1、jQuery 遍歷 - 祖先 祖先是父、祖父或曾祖父等等。 通過 jQuery，您能夠向上遍歷 DOM 樹，以查詢元素的祖先。 1.1 向上遍歷 DOM 樹 這些 jQuery 方法很有用，它們用於向上遍歷 DOM 樹： parent()：返回被選元素的直接父
Web開發——JavaScript庫（jQuery效果——Callback/Chaning）
Callback 函式在當前動畫 100% 完成之後執行。 1、jQuery Callback 1.1 jQuery 動畫的問題 許多 jQuery 函式涉及動畫。這些函式也許會將 speed 或 duration 作為可選引數。 例子：$("p")
web前端面試題整理（前端和計算機相關知識）
1. 你能描述一下漸進增強和優雅降級之間的不同嗎?定義:優雅降級（graceful degradation): 一開始就構建站點的完整功能，然後針對瀏覽器測試和修復漸進增強（progressive enhancement): 一開始只構建站點的最少特性，然後不斷針對各瀏覽器
爆棧三部曲：資料庫開發大系技術棧 （300多技術點）
前言 這個資料庫技術棧是我寫的“爆棧三部曲”的最後一部 ;-) 最近我寫過 ，相信很多網友感嘆掌握的.NET技術遠沒有這個技術棧裡面所描述的多。 然後我還寫 ，包含大約180個技術點，做前端的都會覺得前端開發包含的技術相對繁多。 什麼叫全棧(full stack)？簡單地說就是萬金油，we
Web開發知識點彙總（每天積累一點點）
定義 Servlet是一個執行在Web伺服器端的Java小程式，Servlet接受和響應來自Web客戶端的請求，使用HTTP進行通訊。 HTTP請求 GET-從指定的資源請求資料 POST-
Android開發之AudioManager（音頻管理器）具體解釋
應該 數量 service eth out 開發 要求 type 路由 AudioManager簡單介紹： AudioManager類提供了訪問音量和振鈴器mode控制。使用Context.getSystemService（Context.AUDIO_SERVICE）
用vue開發一個app（2，main.js）
.html 第一次用 courier ace 第一次 router -s 提示 新建 昨天跟著vue的官網搭建了vue的一個腳手架，我也是第一次用VUE一切都在摸索階段。 今天試著看下裏面腳手架裏面有點什麽東西 先看看main.js
android mvp高速開發框架介紹（dileber的簡單介紹）
activity 數據 -c pos androi mod family 基於 ebe 今天我為大家介紹一款android mvp框架：dileber（https://github.com/dileber/dileber.git） 官方交流qq群：171443
前端模塊化（CommonJs,AMD和CMD）
pan path 我們 指定 exports 意思 ... IT 依賴 前端模塊規範有三種：CommonJs,AMD和CMD。 CommonJs用在服務器端，AMD和CMD用在瀏覽器環境 AMD 是 RequireJS 在推廣過程中對模塊定義的規範化產出。 CMD
python3 開發面試題（裝飾器必須考）6.4
args 返回 event aps 面試題 wrap spl def pen def f(): print("2018-06-04") # 每次調用f的時候 在打印"2018-06-04" 之前打印一句 開始， 之後再打印一句 結束 d
ionic + node.js + Mongodb 開發環境安裝（Windows 和 ios 系統）
ionic config文件 點擊 服務管理 https 鍵盤 imageview 輸入 all 1. Windows 環境。 1. Visual Studio Code. 作為源代碼編輯器， 可以從此處 Visual Studio Code 下載， 註意選擇W
Python 3網絡爬蟲開發實戰.pdf（崔慶才著）
god 百萬 mitmproxy 2.2.3 協議 filter 分布式部署 基本 適合 內容簡介 · · · · · · 本書介紹了如何利用Python 3開發網絡爬蟲，書中首先介紹了環境配置和基礎知識，然後討論了urllib、requests、正則表達式、Bea
watchOS 開發 - 初體驗（使用 IB 新增 Label）
編譯環境 一、建立專案 二、查看錶盤，新增label 三、連線 四、InterfaceController apple Watch啟動原理 五、問題 六、
網易雲覆盤：雲端計算前端這一年（AngularJS粉慎入）
此文已由作者趙雨森授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 2017年的前端已然沒有劇烈的變動，但發展勢頭仍然不減。語言、標準、框架和庫逐漸穩定和完善，各團隊再也不用花大把精力放在造輪子上，而更多的是去積累所需的元件庫、開發合適的工具以及整合自己的解決方案。 我們雲端計算
大資料開發學習路線圖（自學必備詳細版）
在產業網際網路時代，越來越多的企業開始通過大資料分析技術來提升企業競爭力。通過大資料及物聯網技術，可以更精準地瞭解整個生產過程情況，藉助大資料收集和分析每個環節的資料，找到具有價值的資訊，優化工作，提升效率，制定更有針對性的營銷方案，從而更好的增強企業在市場上的核心競爭力。 系統學習大資料，通常要具備以
前端的學習總結（前端必看）
中國的IT圈裡有句話叫做“程式設計師吃的是青春飯”，許多IT公司也不願意僱傭大齡程式設計師。因此，在有限的時間快速掌握高階技術變得非常重要。為了幫助新入行的小白快速走向技術人生的巔峰，這裡分享一篇資深前端工作師總結的前端學習經驗。 這裡主要講的是自學，網站開發開發大致分為前端和後端，前端主要負責實現視覺和互動