# 为什么?
大家是否想过:
* Web 前端开发究竟包含哪些技术呢?
* 我所掌握的技术这个子集,在 Web 前端技术大系这个超集里面占的比例是多少呢?
* 我究竟还没有掌握多少 Web 前端技术呢?
* 面试的时候会考哪些技术呢?
那么,Web 前端开发是否也应该有这样的技术栈概览图呢?搜索了很久,没有找到一个符合我要求的“较为全面”地表述 Web 前端技术大系的图表。所以我们自行设计了这个 Web
前端技术栈。
这个图表里的分类未必准确,相关技术也难免会有遗漏,欢迎大家指点以便不断改进。
Web 前端技术实在太繁多限于篇幅,,这里没有罗列一些技术。
您可以点击下面链接查看交互式预览图(用鼠标移动/缩放/点击节点打开相关网站):
[Link]
locale=zh-cn
# Web 前端技术栈
<!--BUILD_START-->
- Web 前端开发技术栈
- 浏览器
- [Internet Explorer]([Link]
explorer/download-ie)
- [Chrome]([Link]
- [Firefox]([Link]
- [Safari]([Link]
- [Opera]([Link]
- [Edge]([Link]
- [Netscape ;-)]([Link]
- 协议
- [HTTP/1.1]([Link]
- 链接
- 会话
- 授权
- 请求
- 响应
- [HTTP/2]([Link]
- 压缩
- 打包
- 服务器端推送
- WebSocket
- Web 三剑客
- HTML (HyperText Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript
- 标准
- W3C
- HTML
- CSS
- XHTML
- XML
- 核心概念
- HTML
-
[DOM]([Link]
-
[Element]([Link]
- Attribute
- JavaScript
-
[Prototype]([Link]
Global_Objects/Object/prototype)
-
[Scope]([Link]
-
[Closure]([Link]
- [JSON (JavaSript Object
Notation)]([Link]
- [AJAX (Asynchronous JavaScript and
XML)]([Link]
- CSS
- Selector
- Priority
- Specificity
- Box Model
- 渲染引擎
- [Trident (IE)]([Link]
- [Blink / prev. WebKit (Chrome)]([Link]
- [Gecko
(Firefox)]([Link]
- [WebKit (Safari)]([Link]
- [Blink / prev. Presto (Opera)]([Link]
- [EdgeHTML (Edge)]([Link]
- 脚本引擎
- [JScript (IE8- / ASP)]([Link]
- [Chakra (IE9+ /
Edge)]([Link]
- [V8 (Chrome / Opera / Nodejs /
MongoDB)]([Link]
[[GitHub]]([Link]
- [SpiderMonkey (Firefox)](
[Link]
- [JavaScriptCore
(Safari)]([Link]
- 运行时
- Cookie
- Local Cache
- Session Storage
- Local Storage
- Components
- Extensions
- Plugins
- Resources
- Images
- Icons
- Fonts
- Audios
- Videos
- 编辑器
- [Sublime Text]([Link]
- [WebStorm]([Link]
- [Atom]([Link] [[GitHub]]([Link]
- [Vim]([Link]
- [Emacs]([Link]
- [Brackets]([Link]
[[GitHub]]([Link]
- [Light Table]([Link]
[[GitHub]]([Link]
- [Visual Studio]([Link]
- [Visual Studio Code (Linux & Mac)]([Link]
[[GitHub]]([Link]
- Dreamweaver ;-)
- FrontPage / SharePoint Designer ;-)
- 编译任务
- 精简
- 编译
- 合并
- 混淆
- 图像优化
- 单元测试
- 编译工具
- [Grunt]([Link]
[[GitHub]]([Link]
- [Gulp]([Link]
[[GitHub]]([Link]
- [Brunch]([Link]
[[GitHub]]([Link]
- [Yeoman]([Link]
- Broccoli [[GitHub]]([Link]
- 调试
- [Developer Tools]([Link]
- [Firebug]([Link]
[[GitHub]]([Link]
- 基础工具
- [[Link]]([Link]
[[GitHub]]([Link]
- [[Link]]([Link]
[[GitHub]]([Link]
-
[SpiderMonkey]([Link]
SpiderMonkey)
- 质量控制
- [JSLint]([Link]
[[GitHub]]([Link]
- [JSHint]([Link]
[[GitHub]]([Link]
- [jscs]([Link]
[[GitHub]]([Link]
- [Closure Linter]([Link]
- 包管理
- [npm]([Link] [[GitHub]]([Link]
- [Bower]([Link] [[GitHub]]([Link]
# Web 前端技术栈
<!--BUILD_START-->
- Web 前端开发技术栈
- 浏览器
- [Internet Explorer]([Link]
explorer/download-ie)
- [Chrome]([Link]
- [Firefox]([Link]
- [Safari]([Link]
- [Opera]([Link]
- [Edge]([Link]
- [Netscape ;-)]([Link]
- 协议
- [HTTP/1.1]([Link]
- 链接
- 会话
- 授权
- 请求
- 响应
- [HTTP/2]([Link]
- 压缩
- 打包
- 服务器端推送
- WebSocket
- Web 三剑客
- HTML (HyperText Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript
- 标准
- W3C
- HTML
- CSS
- XHTML
- XML
- 核心概念
- HTML
-
[DOM]([Link]
-
[Element]([Link]
- Attribute
- JavaScript
-
[Prototype]([Link]
Global_Objects/Object/prototype)
-
[Scope]([Link]
-
[Closure]([Link]
- [JSON (JavaSript Object
Notation)]([Link]
- [AJAX (Asynchronous JavaScript and
XML)]([Link]
- CSS
- Selector
- Priority
- Specificity
- Box Model
- 渲染引擎
- [Trident (IE)]([Link]
- [Blink / prev. WebKit (Chrome)]([Link]
- [Gecko
(Firefox)]([Link]
- [WebKit (Safari)]([Link]
- [Blink / prev. Presto (Opera)]([Link]
- [EdgeHTML (Edge)]([Link]
- 脚本引擎
- [JScript (IE8- / ASP)]([Link]
- [Chakra (IE9+ /
Edge)]([Link]
- [V8 (Chrome / Opera / Nodejs /
MongoDB)]([Link]
[[GitHub]]([Link]
- [SpiderMonkey (Firefox)](
[Link]
- [JavaScriptCore
(Safari)]([Link]
- 运行时
- Cookie
- Local Cache
- Session Storage
- Local Storage
- Components
- Extensions
- Plugins
- Resources
- Images
- Icons
- Fonts
- Audios
- Videos
- 编辑器
- [Sublime Text]([Link]
- [WebStorm]([Link]
- [Atom]([Link] [[GitHub]]([Link]
- [Vim]([Link]
- [Emacs]([Link]
- [Brackets]([Link]
[[GitHub]]([Link]
- [Light Table]([Link]
[[GitHub]]([Link]
- [Visual Studio]([Link]
- [Visual Studio Code (Linux & Mac)]([Link]
[[GitHub]]([Link]
- Dreamweaver ;-)
- FrontPage / SharePoint Designer ;-)
- 编译任务
- 精简
- 编译
- 合并
- 混淆
- 图像优化
- 单元测试
- 编译工具
- [Grunt]([Link]
[[GitHub]]([Link]
- [Gulp]([Link]
[[GitHub]]([Link]
- [Brunch]([Link]
[[GitHub]]([Link]
- [Yeoman]([Link]
- Broccoli [[GitHub]]([Link]
- 调试
- [Developer Tools]([Link]
- [Firebug]([Link]
[[GitHub]]([Link]
- 基础工具
- [[Link]]([Link]
[[GitHub]]([Link]
- [[Link]]([Link]
[[GitHub]]([Link]
-
[SpiderMonkey]([Link]
SpiderMonkey)
- 质量控制
- [JSLint]([Link]
[[GitHub]]([Link]
- [JSHint]([Link]
[[GitHub]]([Link]
- [jscs]([Link]
[[GitHub]]([Link]
- [Closure Linter]([Link]
- 包管理
- [npm]([Link] [[GitHub]]([Link]
- [Bower]([Link]
[[GitHub]]([Link] Web 前端技术栈
<!--BUILD_START-->
- Web 前端开发技术栈
- 浏览器
- [Internet Explorer]([Link]
explorer/download-ie)
- [Chrome]([Link]
- [Firefox]([Link]
- [Safari]([Link]
- [Opera]([Link]
- [Edge]([Link]
- [Netscape ;-)]([Link]
- 协议
- [HTTP/1.1]([Link]
- 链接
- 会话
- 授权
- 请求
- 响应
- [HTTP/2]([Link]
- 压缩
- 打包
- 服务器端推送
- WebSocket
- Web 三剑客
- HTML (HyperText Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript
- 标准
- W3C
- HTML
- CSS
- XHTML
- XML
- 核心概念
- HTML
-
[DOM]([Link]
-
[Element]([Link]
- Attribute
- JavaScript
-
[Prototype]([Link]
Global_Objects/Object/prototype)
-
[Scope]([Link]
-
[Closure]([Link]
- [JSON (JavaSript Object
Notation)]([Link]
- [AJAX (Asynchronous JavaScript and
XML)]([Link]
- CSS
- Selector
- Priority
- Specificity
- Box Model
- 渲染引擎
- [Trident (IE)]([Link]
- [Blink / prev. WebKit (Chrome)]([Link]
- [Gecko
(Firefox)]([Link]
- [WebKit (Safari)]([Link]
- [Blink / prev. Presto (Opera)]([Link]
- [EdgeHTML (Edge)]([Link]
- 脚本引擎
- [JScript (IE8- / ASP)]([Link]
- [Chakra (IE9+ /
Edge)]([Link]
- [V8 (Chrome / Opera / Nodejs /
MongoDB)]([Link]
[[GitHub]]([Link]
- [SpiderMonkey (Firefox)](
[Link]
- [JavaScriptCore
(Safari)]([Link]
- 运行时
- Cookie
- Local Cache
- Session Storage
- Local Storage
- Components
- Extensions
- Plugins
- Resources
- Images
- Icons
- Fonts
- Audios
- Videos
- 编辑器
- [Sublime Text]([Link]
- [WebStorm]([Link]
- [Atom]([Link] [[GitHub]]([Link]
- [Vim]([Link]
- [Emacs]([Link]
- [Brackets]([Link]
[[GitHub]]([Link]
- [Light Table]([Link]
[[GitHub]]([Link]
- [Visual Studio]([Link]
- [Visual Studio Code (Linux & Mac)]([Link]
[[GitHub]]([Link]
- Dreamweaver ;-)
- FrontPage / SharePoint Designer ;-)
- 编译任务
- 精简
- 编译
- 合并
- 混淆
- 图像优化
- 单元测试
- 编译工具
- [Grunt]([Link]
[[GitHub]]([Link]
- [Gulp]([Link]
[[GitHub]]([Link]
- [Brunch]([Link]
[[GitHub]]([Link]
- [Yeoman]([Link]
- Broccoli [[GitHub]]([Link]
- 调试
- [Developer Tools]([Link]
- [Firebug]([Link]
[[GitHub]]([Link]
- 基础工具
- [[Link]]([Link]
[[GitHub]]([Link]
- [[Link]]([Link]
[[GitHub]]([Link]
-
[SpiderMonkey]([Link]
SpiderMonkey)
- 质量控制
- [JSLint]([Link]
[[GitHub]]([Link]
- [JSHint]([Link]
[[GitHub]]([Link]
- [jscs]([Link]
[[GitHub]]([Link]
- [Closure Linter]([Link]
- 包管理
- [npm]([Link] [[GitHub]]([Link]
- [Bower]([Link] [[GitHub]]([Link]