前言

互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案。

我从2000年初开始做网站开发,使用的技术不断迭代,一些消失了,更多的出现了。

最近写过  .NET技术大系概览
(迄今为止最全的.NET技术栈) 
,相信很多网友感叹掌握的.NET技术远没有这个技术栈里面所描述的多。

参考资料

1,我之前的那篇文章:让我们都建立自己的知识树吧

2,王福朋的,自己总结的web前端知识体系大全【欢迎补充】

3,灵感之源的两篇文章:.NET技术大系概览
(迄今为止最全的.NET技术栈),Web前端开发大系概览
(前端开发技术栈)

Web前端技术栈

  • Web前端开发技术栈
    • 浏览器
      • Internet
        Explorer
      • Chrome
      • Firefox
      • Safari
      • Opera
      • Edge
      • Netscape 😉
    • 协议
      • HTTP/1.1
        • 链接
        • 会话
        • 授权
        • 请求
        • 响应
      • HTTP/2
        • 压缩
        • 打包
        • 服务器端推送
      • WebSocket
    • Web三剑客
      • HTML (HyperText Markup Language)
      • CSS (Cascading Style Sheets)
      • JavaScript
    • 标准
      • W3C
        • HTML
        • CSS
        • XHTML
        • XML
    • 核心概念
      • HTML
        • DOM
        • Element
        • Attribute
      • JavaScript
        • Prototype
        • Scope
        • Closure
        • JSON (JavaSript Object
          Notation)
        • AJAX (Asynchronous JavaScript and
          XML)
      • CSS
        • Selector
        • Priority
        • Specificity
        • Box Model
    • 渲染引擎
      • Trident
        (IE))
      • Blink / prev. WebKit
        (Chrome)
      • Gecko
        (Firefox)
      • WebKit (Safari)
      • Blink / prev. Presto
        (Opera)
      • EdgeHTML (Edge)
    • 脚本引擎
      • JScript (IE8- /
        ASP)
      • Chakra (IE9+ /
        Edge))
      • V8 (Chrome / Opera / Nodejs /
        MongoDB) [GitHub]
      • SpiderMonkey
        (Firefox)
      • Nitro
        (Safari)
    • 运行时
      • Cookie
      • Local Cache
      • Session Storage
      • Local Storage
      • Components
        • Extensions
        • Plugins
      • Resources
        • Images
        • Icons
        • Fonts
        • Audios
        • Videos
    • 编辑器
      • Sublime Text
      • WebStorm
      • Atom [GitHub]
      • Vim
      • Emacs
      • Brackets [GitHub]
      • Light
        Table [GitHub]
      • Visual Studio
      • Visual Studio Code
      • Dreamweaver 😉
      • FrontPage / SharePoint Designer 😉
    • 编译任务
      • 精简
      • 编译
      • 合并
      • 混淆
      • 图像优化
      • 单元测试
    • 编译工具
      • Grunt [GitHub]
      • Gulp [GitHub]
      • Brunch [GitHub]
      • Yeoman
      • Broccoli [GitHub]
    • 调试
      • Developer Tools
      • Firebug [GitHub]
    • 基础工具
      • Node.js [GitHub]
      • Phantom.js [GitHub]
      • SpiderMonkey
    • 质量控制
      • JSLint [GitHub]
      • JSHint [GitHub]
      • jscs [GitHub]
      • Closure
        Linter
    • 包管理
      • npm [GitHub]
      • Bower [GitHub]
    • 测试
      • 工具
        • QUnit [GitHub]
        • Jasmine [GitHub]
        • Mocha [GitHub]
        • Selenium [GitHub]
        • WebDriverIO [GitHub]
        • Protractor
        • Chai [GitHub]
        • Sinon.JS [GitHub]
        • Karma [GitHub]
        • nodeunit [GitHub]
        • tape [GitHub]
        • speckjs [GitHub]
      • 在线工具
        • Sauce Labs
        • Browser Stack
        • Browser Shots
        • Browserling
        • Browser Sandbox
        • Cross Browser
          Testing
        • Browsera
        • SortSite
    • 库 / 框架
      • 基础库
        • jQuery [GitHub]
        • Prototype [GitHub]
        • Zepto [GitHub]
        • MooTool [GitHub]
      • 模块化
        • ES6 Module
        • CommonJS
          • webpack [GitHub]
          • browserify [GitHub]
        • AMD
          • RequireJS [GitHub]
        • UMD
          • umd [GitHub]
      • 框架
        • AngularJS [GitHub]
        • Backbone [GitHub]
        • Knockout [GitHub]
        • Ember [GitHub]
        • React [GitHub]
        • polymer [GitHub]
        • Deft.js [GitHub]
        • Vue [GitHub]
        • Riot [GitHub]
      • UI框架
        • Bootstrap [GitHub]
        • Semantic
          UI [GitHub]
        • Foundation [GitHub]
        • Material
          UI [GitHub]
        • WinJS [GitHub]
        • Pure [GitHub]
        • Amaze
          UI [GitHub]
      • WebSocket
        • Socket.io [GitHub]
        • web-socket-js [GitHub]
      • 数据可视化
        • D3 [GitHub]
        • Echarts [GitHub]
        • HighCharts [GitHub]
        • Vis.js [GitHub]
        • Flot [GitHub]
      • WebGL
        • Three.js [GitHub]
        • Babylon.js [GitHub]
        • Pixi.js [GitHub]
      • CSS3 动画
        • Animate.css [GitHub]
        • bounce.js [GitHub]
        • Effeckt.css [GitHub]
        • move.js [GitHub]
      • 流程控制
        • ES6
          • Promise
          • Generator
        • ES7
          • yield
          • await
        • async [GitHub]
        • co [GitHub]
        • Promise
          • Bluebird [GitHub]
          • q [GitHub]
          • when.js [GitHub]
      • 函数式编程
        • bacon.js [GitHub]
        • immutable.js [GitHub]
        • ramda [GitHub]
        • underscore.js [GitHub]
        • lodash [GitHub]
        • ReactiveX [GitHub]
      • 手机 UI 框架
        • jQuery
          Mobile [GitHub]
        • Jo [GitHub]
        • Dojo
          Mobile
        • Lungo [GitHub]
    • CSS 预处理器
      • LESS
        • LESS [GitHub]
        • Hat [GitHub]
      • Sass(SCSS)
        • Compass [GitHub]
        • Bourbon [GitHub]
        • Gumby [GitHub]
      • Stylus
        • nib [GitHub]
    • 未来标准
      • babel [GitHub]
    • 模板引擎
      • Handlebars [GitHub]
      • Haml [GitHub]
      • Slim [GitHub]
      • Jade [GitHub]
      • Ejs
      • Spacebars
      • mustache [GitHub]
    • 统一化
      • Normalize [GitHub]
      • Reset
    • 最佳实践
      • SEO
      • Responsiveness
      • CDN
    • 安全
      • Sandbox
      • XSS
      • CORS
    • 中间语言
      • CoffeeScript [GitHub]
      • TypeScript [GitHub]
      • ClojureScript [GitHub]
      • JSX
        (Facebook)
    • 移动应用开发
      • PhoneGap /
        Cordova [GitHub]
      • MUI [GitHub]
      • React
        Native [GitHub]
      • Ionic [GitHub]
    • 桌面应用开发
      • Electron [GitHub]
      • NW.js [GitHub]

以下是各种前端职称的列表和说明。最常被大家称呼的两个职位名称是前端开发者或者前端工程师。请记住,只要是称呼中包含前端client-sideweb UIHTMLCSS或者JavaScript两个字的称呼,一般都说明这个人掌握了一定程度的HTML、CSS、DOM和JavaScript方面的专业知识。

关于作者:灵感之源

图片 1

智能实验室创始人。做过开源,写过千万下载量软件,爱美剧电影音乐美女。定居澳洲悉尼。twitter加unruledboy。移民澳新的去freeoz论坛中国域名hioz

个人主页 ·
我的文章 ·
6 ·
  

图片 2

记得几年前写过一篇关于.NET开发方面的知识总结,但是随着技术的发展以及自己技术理解的提升,觉得有必要对那篇文章加以更新和完善。

最近在园子里也看到有人写关于.NET知识体系的文章,特别是灵感之源写的两篇文章,一篇是关于web前端的Web前端开发大系概览
(前端开发技术栈),和一篇关于.NET服务端的.NET技术大系概览
(迄今为止最全的.NET技术栈),都总结得非常好。现在我将前端和服务端都总结成一个xmind思维导图的形式,当然有很多地方参考了unruledboy兄弟的文章,在这里向他表示感谢。

后面我也将这些内容作为项目开源了,放在GitHub上,我希望大家可以一起去完善它。

图片 3

为什么?

大家是否想过:

  • Web前端开发究竟包含哪些技术呢?
  • 我所掌握的技术这个子集,在Web前端技术大系这个超集里面占的比例是多少呢?
  • 我究竟还没有掌握多少Web前端技术呢?
  • 面试的时候会考哪些技术呢?

那么,Web前端开发是否也应该有这样的技术栈概览图呢?搜索了很久,没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。所以我们自行设计了这个Web前端技术栈。

这个图表里的分类未必准确,相关技术也难免会有遗漏,欢迎大家指点以便不断改进。

Web前端技术实在太繁多限于篇幅,,这里没有罗列一些技术。

您可以点击下面链接查看交互式预览图(用鼠标移动/缩放/点击节点打开相关网站):

移动前端开发者

当职位中包含“移动”或“平板电脑”一词时,这将表示开发人员有在移动设备或平板设备上开发应用程序(原生或web平台上,如浏览器上)的前端经验。

Web前端开发技术栈

现在流行一个说法,是Full Stack
(全栈),简单地说是万金油,说得体面一点就是前端、后台、存储、架构等都懂,我觉得我不是全栈,而是爆栈(stack
overflow),开玩笑了。。。。

这个Web前端开发技术栈,大约20个层级,大约100个技术点,从底层一直到最顶层:

  • 浏览器
  • 渲染引擎、JavaScript引擎
  • HTML/JavaScript/CSS三支柱
  • 编辑器
  • 编译任务
  • 编译工具
  • 打包、调试、质量
  • 测试
  • JS基础类库
  • JS类库
  • UI框架
  • CSS预处理器
  • 模板
  • 现代化
  • 安全/模式
  • 中间语言
  • 跨平台解决方案

这个图表里的分类未必准确,相关技术也难免会有遗漏,欢迎大家指点以便不断改进。

Web前端技术实在太繁多限于篇幅,,这里没有罗列一些技术。

以下是预览图:

图片 4

点击查看原尺寸大图

GitHub开源地址

DotNetFullStack

运行命令

npm start 运行服务并直接打开主html文件。

npm run build 生成预览图。

前端SEO专家

当“SEO”一词包含在职位名称中时,这表示开发人员具有在前端技术中应用SEO策略的丰富经验。

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注