目前最全面总结,Web前端开发技术栈,欢迎补充

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

你可能感兴趣的:(目前最全面总结,Web前端开发技术栈,欢迎补充)