10367.jpg

web前端开发技术栈

1 运行环境

1-1 浏览器

浏览器兼容性

• css hack
• javascript 例如事件系统
• 渐进增强 优雅降级
• 相应式布局

web安全

• 同源策略
• xss 跨站点攻击
• csrf 跨站点请求伪造
• 点击劫持
• sql注入
• ……

性能优化

• 压缩
• css sprites
• 合并 减少http请求
• 缓存
• cdn
• 避免重定向
• ……
• node

2 理论知识

2-1 硬知识

http标准

• http请求的过程
• http状态码的意义
• http头部信息
• cookie状态管理
• 方法 get post
• https

w3c标准

html html5

• html
• 语义化
• dom
• 2d 3d
• 本地存储

css css3

• 层叠规则
• 选择器

排版

• position
• display
• 盒子模型
• float
• 绘制
• 动画

javascript

dom api

• 增、删、改、查、移动
• 属性操作
• 样式操作

bom api

• window
• navigator
• screen
• history
• location

事件

• event对象
• 冒泡 / 捕获
• 代理

ajax

• xhr 兼容性
• get post
• 异步
• 状态监控
• 跨域
• json
• xml
• websocket
• ……

ecmascript

• 语法
• 宿主对象
• 原型链 继承
• 上下文环境
• 作用域 闭包
• 正则表达式
• 严格模式

2-2 软知识

设计模式

• 5大设计原则
• 常用设计模式

面向对象

• 封装
• 继承
• 多台
• 算法
• 数据结构
• ……

2-3 协议

http/1.1

• 链接
• 会话
• 授权
• 请求
• 响应

http/2

• 压缩
• 打包
• 服务器端推送
• websocket

3 安全

• csrf/xss
• csp
• same-origin policy
• adsafe/caja/sandbox

4 性能

• jsperf
• yslow 35 rules
• pagespeed
• httpwatch
• dynatrace's ajax
• 高性能javascript

5 核心概念

5-1 html

• dom
• element
• attribute

5-2 javascript

• prototype
• scope
• closure
• json(javascript object notation)
• ajax(asynchronous javascript and xml)

css

• selector
• priority

6 渲染引擎

• trident(ie)
• blink/prev. webkit(chrome)
• gecko(firefox)
• webkit(safari)
• blink/prev. presto(opera)
• edgehtml(edge)

7 脚本引擎

• jscript(ie8-/asp)
• chakra(ie9+/edge)
• v8(chrome/opera/nodejs/mongodb)
• spidermonkey(firefox)
• nitro(safari)

8 运行时

• cookie
• local cache
• session storage
• local storage

8-1 components

• extensions
• plugins

8-2 resources

• images
• icons
• fonts
• audios
• videos

9 编辑器

• sublime text
• webstorm
• atom
• vim
• emacs
• brackets
• light table
• visual studio
• visual studio code

10 编辑任务

• 精简
• 编译
• 合并
• 混淆
• 图像优化
• 单元优化

11 编译工具

• grunt
• gulp
• brunch
• yeoman
• broccoli

12 调试

• developer tools
• firebug

13 桌面应用开发

• electron
• nw.js

14 基础工具

• node.js
• phantom.js
• spidermonkey

15 质量控制

• jslint
• jshint
• jscs
• closure linter

16 包管理

• npm
• bower

17 测试

17-1 工具

• qunit
• jasmine
• mocha
• selenium
• webdriverio
• protractor
• chai
• sinonjs
• karma
• nodeunit
• tape
• speckjs

17-2 在线工具

• sauce labs
• browser stack
• browser shots
• browserling
• browser sandbox
• cross browser tesing
• browsera
• sortsite

18 库/框架

18-1 基础库

• jquery
• prototype
• zepto
• mootool

18-2 模块化

• es6 module

commonjs

• webpack
• browserify

amd

• requirejs

umd

• umd

18-3 框架

• angularjs
• backbone
• knockout
• ember
• react
• polymer
• deft.js
• vue
• riot

18-4 ui框架

• bootstrap
• semantic ui
• foundation
• material ui
• winjs
• pure
• amaze ui

18-5 websocket

• socket.io
• web-socket-js

18-6 数据可视化

• d3
• echarts
• highcharts
• vis.js
• flot

18-7 webgl

• three.js
• babylon.js
• effeckt.css
• move.js

18-8 流程控制

es6

• promise
• generator

es7

• yield
• await
• async
• co

promise

• bluebird
• q
• when.js

18-9 函数式编程

• bacon.js
• immutable.js
• ramda
• underscore.js
• lodash
• reactivex

18-10 手机ui框架

• jquery mobile
• jo
• dojo mobile
• lungo

19 css预处理器

19-1 less

• less
• hat

19-2 sass(scss)

• compass
• bourbon
• gumby

19-3 stylus

• nib

19-4 后置处理

• postcss

19-5 命名规范

• bem

20 未来标准

• babel

21 模板引擎

• handlebars
• haml
• slim
• jade
• ejs
• spacebars
• mustache

22 统一化

• normalize
• reset

23 最佳实践

• seo
• responsiveness
• cdn

24 安全

• sandbox
• xss
• cors

25 中间语言

• coffeescript
• typescript
• clojurescript
• jsx(facebook)

26 移动应用开发

• phonegap/cordova
• mui
• react native
• ionic

26 自动化

26-1 构建

webpack

• anne
• gulp
• rollup

26-2 审查

eslint

• airbnb
• google
• standard
• stylelint
• 单元测试

26-3 部署

• jenkins + shell脚本
• docker
• pm2

27 非web端

27-1 原生应用开发

桌面端

electron

• nedb（数据库）
• nw.js

移动端

• react-native
• weex

27-2 第三方平台开发

微信小程序

• 原生
• wepy
• mpvue
• taro
• 快应用
• 支付宝，百度小程序

27-3 其他一些渐进式web应用

• pwa
• flutter
• hybird