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)

  • SpiderMonkey (Firefox)

  • JavaScriptCore (Safari)

运行时

  • Cookie

  • Local Cache

  • Session Storage

  • Local Storage

  • Components

    • Extensions

    • Plugins

  • Resources

    • Images

    • Icons

    • Fonts

    • Audios

    • Videos

编辑器

  • Sublime Text

  • WebStorm

  • Atom

  • Vim

  • Emacs

  • Brackets

  • Light Table

  • Visual Studio

  • Visual Studio Code (Linux & Mac)

  • Dreamweaver ;

  • FrontPage / SharePoint Designer ;

编译任务

  • 精简

  • 编译

  • 合并

  • 混淆

  • 图像优化

  • 单元测试

编译工具

  • Grunt

  • Gulp

  • Brunch

  • Yeoman

  • Broccoli

调试

  • Developer Tools

  • Firebug

基础工具

  • Node.js

  • Phantom.js

  • SpiderMonkey

质量控制

  • JSLint

  • JSHint

  • jscs

  • Closure Linter

包管理

  • npm

  • Bower

测试

  • 工具

    • QUnit

    • Jasmine

    • Mocha

    • Selenium

    • WebDriverIO

    • Protractor

    • Chai

    • Sinon.JS

    • Karma

    • nodeunit

    • tape

    • nightmare

  • 在线工具

    • Sauce Labs

    • Browser Stack

    • Browser Shots

    • Browserling

    • Browser Sandbox

    • Cross Browser Testing

    • Browsera

    • SortSite

库 / 框架

  • 基础库

    • jQuery

    • Prototype

    • Zepto

    • MooTool

  • 模块化

    • ES6 Module

    • CommonJS

    • webpack

    • browserify

      • AMD

      • RequireJS

      • UMD

      • umd

  • 框架

    • AngularJS

    • Backbone

    • Knockout

    • Ember

    • React

    • polymer

    • Deft.js

    • Vue

    • Riot

  • UI框架

    • Bootstrap

    • Semantic UI

    • Foundation

    • Material UI

    • WinJS

    • Pure

    • Amaze UI

  • WebSocket

    • Socket.io

    • web-socket-js

  • 数据可视化

    • D3

    • Echarts

    • HighCharts

    • Vis.js

    • Flot

  • WebGL

    • Three.js

    • Babylon.js

    • Pixi.js

  • CSS3 动画

    • Animate.css

    • bounce.js

    • Effeckt.css

    • move.js

  • 流程控制

  • ES6

    • Promise

    • Generator

  • ES7

    • yield

    • await

  • async

  • co

  • Promise

    • Bluebird

    • q

    • when.js

  • 函数式编程

    • bacon.js

    • immutable.js

    • ramda

    • underscore.js

    • lodash

    • ReactiveX

  • 手机 UI 框架

    • jQuery Mobile

    • Jo

    • Dojo Mobile

    • Lungo

CSS 预处理器

  • LESS

    • LESS

    • Hat

  • Sass(SCSS)

    • Compass

    • Bourbon

    • Gumby

  • Stylus

    • nib

未来标准

  • babel

模板引擎

  • Handlebars

  • Haml

  • Slim

  • Jade

  • Ejs

  • Spacebars

  • mustache

统一化

  • Normalize

  • Reset

最佳实践

  • SEO

  • Responsiveness

  • CDN

安全

  • Sandbox

  • XSS

  • CORS

中间语言

  • CoffeeScript

  • TypeScript

  • ClojureScript

  • JSX (Facebook)

移动应用开发

  • PhoneGap / Cordova

  • MUI

  • React Native

  • Ionic

桌面应用开发

  • Electron

  • NW.js

来自:https://github.com/unruledboy/WebFrontEndStack


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏