web 前端开发技术栈
浏览器
- Internet Explorer(需要了解, 需不需要看公司业务需求)
- Chrome(建议学习使用)
- Firefox(建议学习使用)
- Safari(建议学习使用)
- Opera
- Edge
- Netscape
协议 (前端学到一定阶段后学习比较好)
HTTP/1.1
链接
会话
授权
请求
响应
HTTP/2
压缩
打包
服务器端推送
WebSocket
Web 三剑客 (必须学会, 而且要精通, JavaScript 一定要精通, 推荐红宝书)
标准
- W3C(推荐到 W3Cschool 看文档)
- 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 / Node.JS / MongoDB)[GitHub]
- 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
- Visual Studio(电脑要好)
- Visual Studio Code(推荐使用, 简单易用)
- Dreamweaver ;(电脑要有一定的性能)
编译任务
精简
编译
合并
混淆
图像优化
单元测试
编译工具
- Grunt
- Gulp
- Brunch
- Yeoman
- Broccoli
调试
- Developer Tools
- Firebug
基础工具
Node.JS(前端一定要会, 一定要会, 如果学 PHP 什么的可以只要了解一下 node 就可以, 但要会基础使用)
Phantom.JS
SpiderMonkey
质量控制
- JSLint
- JSHint
- jscs
- Closure Linter
包管理
- NPM(要先学 node.JS,node.JS 是现在很多前端工程师都必须掌握的一项技能)
- Bower[GitHub]
测试
工具
- QUnit
- Jasmine
- Mocha
- Selenium
- WebDriverIO
- Protractor
Sinon.JS
- Karma
- nodeunit
- tape
- nightmare
在线工具
- Sauce Labs
- Browser Stack
- Browser Shots
- Browserling
- Browser Sandbox
- Cross Browser Testing
- Browsera
- SortSite
库 / 框架
基础库
- jQuery (主要是为了让操作 DOM 更加简单, 需要了解, 毕竟 JavaScript 暂时不会过时, 操作 DOM 的简化有一定的价值, 但是最好不要和 vue 一起用)
- Prototype
- Zepto
- MooTool
模块化
- ES6 Module
- CommonJS
- webpack
- browserify
- AMD
- RequireJS
- UMD
- umd
框架
- AngularJS
- Ember
- React
Deft.JS
- Vue.JS(推荐学习, 有中文文档)
- Riot
UI 框架 (可以都了解一下, 百度一下, 看看官网, 喜欢那个玩哪个)
- Bootstrap(推荐学习, 简单上手)
- Semantic UI
- Foundation
- Material UI
- WinJS
- Pure
- Amaze UI
- WebSocket
- Socket.io
- Web-socket-JS
数据可视化
- Echarts(推荐学习, 简单易用, 前提是要会 JavaScript)
- HighCharts
- 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
- 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
自己是一个 6 年的前端开发工程师
这里推荐一下我的前端学习交流扣 qun:784783012 , 里面都是学习前端的, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴. 2019 最新技术, 从企业招聘人才需求 到怎么学习前端开发, 和学习什么内容都有免费系统分享. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
来源: http://www.jianshu.com/p/d7d906be3bbc