0% found this document useful (0 votes)
7 views8 pages

Web 前端开发技术栈概览

The document presents a comprehensive overview of web front-end development technologies, including browsers, protocols, core concepts, rendering engines, and tools. It emphasizes the importance of understanding the full technology stack and invites contributions for improvement. An interactive preview of the technology stack is also provided for users to explore further.

Uploaded by

Jim Wang
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views8 pages

Web 前端开发技术栈概览

The document presents a comprehensive overview of web front-end development technologies, including browsers, protocols, core concepts, rendering engines, and tools. It emphasizes the importance of understanding the full technology stack and invites contributions for improvement. An interactive preview of the technology stack is also provided for users to explore further.

Uploaded by

Jim Wang
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

# 为什么?

大家是否想过:
* 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]

You might also like