• 2019 年 Web 开发技术指南和趋势 备用地址

前端基础
├ HTML
│ ├ 标准、语义化
│ ├ iframe、form(表单)
│ ├ Media(媒体)
│ │ ├ WebRTC
│ │ └ AudioContext
│ ├ [history & hash](https://www.cnblogs.com/tugenhua0707/p/10859214.html)
│ ├ Canvas
│ │ ├ 绘图 D3/Three.js
│ │ └ 游戏
│ ├ SVG
│ ├ WebGL
│ ├ 通信
│ │ ├ Server-sent events
│ │ └ Web Sockets
│ ├ 本地存储
│ │ └ localStorage & cookie websql indexedDB
│ ├ [离线存储 applicationCatch(即将废止) ](https://www.cnblogs.com/wuzhiquan/p/4844258.html)
│ ├ Web Workers
│ ├ MathML & latex
│ └ SEO
│ 
├ CSS
│ ├ 选择器优先级
│ ├ 模块化、可伸缩
│ ├ CSS 预处理器 ★
│ │ ├ Sass 
│ │ ├ PostCSS
│ │ ├ Stylus
│ │ └ Less 
│ ├ CSS 方法：BEM, SMACSS, OOCSS
│ ├ 盒子模型、Flex
│ ├ 浮动、定位
│ ├ 现代CSS：Flex、Grid
│ ├ Sprite(雪碧图)
│ ├ iconfont(字体图标)
│ ├ 重绘和回流
│ └ 过渡、动画
│
└ JavaScript
   ├ 基础
   │ ├ 数据类型、基础语法
   │ ├ 作用域、原型链、this
   │ ├ 面向对象、构造函数
   │ ├ 闭包
   │ ├ Event 事件
   │ └ 单线程、异步队列列（工作线程）
   │   └ AJAX、定时、事件回调
   ├ ES6/ES7 ★
   │ └ 扩展、新特性
   ├ [Node](https://www.liaoxuefeng.com/wiki/1022910821149312/1023025235359040) ★
   │ ├ Web框架
   │ │ ├ Express、Koa
   │ │ └ [Egg](https://eggjs.org/zh-cn/core/cluster-and-ipc.html) ★
   │ ├ pm2
   │ ├ [Cluster](https://cnodejs.org/topic/56e84480833b7c8a0492e20c)
   │ ├ [Node Redis](https://github.com/NodeRedis/node-redis)
   │ ├ [Node使用Redis](https://zhuanlan.zhihu.com/p/96762107)
   │ ├ Puppeteer ★
   │ └ 文件操作，加密 asar
   ├ Deno
   └ Web API
     ├ Notification 通知
     ├ Storage 存储(localStorage/sessionStorage)
     ├ XMLHttpRequest
     ├ Service Worker ★
     ├ DOM 文档对象模型
     └ BOM 浏览器对象模型

框架、库、引擎
├ 综合框架 Framework
│ ├ Vue 及生态 ★
│ ├ React 及生态 ★
│ │ └ React + Typescript + Mobx 
│ ├ Angular
│ ├ Umi
│ ├ Ant Design
│ │ └ Ant Design Pro 
│ └ Ember
├ 模板框架 UI Framework
│ ├ Mint UI、VUX、Vant Weapp(有赞)
│ ├ Fast
│ ├ Fluent UI
│ ├ Material Design
│ └ Element
├ 服务器端渲染 SSR
│ └ Next、Nuxt
├ 其他框架
│ ├ GatsbyJS、Hugo、Hexo、Cosmic、DatoCMS、Contentful、ghost
│ ├ KISSY ✗
│ ├ dva
│ ├ [Zero Sever](https://zeroserver.io)
│ └ Preact ✗
├ 扩展库 Library
│ ├ TypeScript ★
│ ├ CoffeScript
│ ├ jQuery、zepto 
│ ├ Immutable
│ ├ Lodash
│ ├ └ _.debounce
│ └ moment
└ 模板引擎 Templating Engine
  └ hogan.js(twitter)、nunjucks

跨终端
├ 移动端
│ ├ H5场景动画
│ ├ webview（微信、Native）
│ ├ [Flutter](https://flutter.dev/docs/get-started/install/macos) ★
│ │ ├ Fuchsia
│ │ └ Dart
│ ├ 微信生态
│ │ ├ 小程序
│ │ ├ 微信登录、JSSDK
│ │ └ 微信支付
│ ├ uni-app ★
│ └ 其它多端框架 React Native、Weex、Rax、Ionic、Cordova、Dcloud、Instant、WeX5、uniapp、Taro、WePY、mpvue、kbone、Mpx、Chameleon、megalo、OKAM、remax
└ 桌面端
  ├ https://github.com/kusti8/proton-native
  ├ [Electron](https://www.cnblogs.com/tugenhua0707/p/11080473.html https://www.cnblogs.com/tugenhua0707/p/11070243.html) ★ 
  └ NW.js

工具
├ Task & Build 构建工具
│ ├ 包管理 npm、Bower、Yarn - https://yarn.bootcss.com/docs/migrating-from-npm.html
│ ├ 自动化 & 脚手架
│ │ ├ [实现一个脚手架](https://segmentfault.com/a/1190000015222967)
│ │ ├ [gulp](http://javascript.ruanyifeng.com/tool/gulp.html)
│ │ └ grunt
│ └ 模块化
│   ├ [webpack](https://www.cnblogs.com/tugenhua0707/p/9384953.html) ★
│   ├ Rollup ★
│   ├ FIS3
│   └ Parcel
├ 编译
│ └ Babel
├ 代码跟踪
│ └ Sentry
├ Linter(代码检查)
│ └ TSLint, ESLint ...
├ Unit testing(单元测试)
│ └ Karma, jasmine, Mocah, Jest ...
├ E2E testing - https://juejin.im/entry/589d6f072f301e0069bda275
│ └ Cypress, Nightwatch, Spectron ...
├ 调试工具
│ ├ WebView 调试
│ ├ Chrome Dev Tool
│ └ Charles、Fiddleer
├ IDE
│ └ WebStorm、Sublime Text、VSCode、Atom、HBuilder
├ 版本控制 - https://semver.org/lang/zh-CN
│ └ Git、SVN
└ 切图
  ├ UI 协作工具: 蓝湖
  └ PS、Sketch

其他
├ 性能优化
│ └ [Lighthouse](https://github.com/GoogleChrome/lighthouse) ★
│   └ Lighthouse集成CI：https://github.com/GoogleChromeLabs/lighthousebot 还有https://github.com/GoogleChrome/lighthouse-ci
├ [graphQL](https://graphql.cn/learn/) ★
├ PhantomJS
├ [JWT](https://www.cnblogs.com/tugenhua0707/p/10089894.html) 
├ 浏览器
│ ├ Extension
│ ├ 浏览器兼容
│ ├ 页面渲染机制
│ ├ 浏览器缓存机制
│ └ 路由
├ PWA ★
└ XSS 

计算机/网络基础
├ 基础科学
│ ├ 1. 离散数学
│ ├ 2. 数字电路
│ ├ 3. 体系结构
│ ├ 4. 数据结构/算法
│ └ 5. 编译原理学
├ Server 端编程
│ ├ Java
│ │ ├ [Halo](https://halo.run)
│ │ └ [spring boot](http://blog.didispace.com/spring-boot-learning-2x/) ★
│ ├ PHP
│ │ └ Laravel 
│ └ [Python](https://bop.mol.uno) ★
│   ├ asyncio
│   └ Django
├ 算法知识 ★
│ └ 常见的数据结构、常见的算法、复杂度、算法思维、高级数据结构
├ [设计模式](https://www.runoob.com/design-pattern/design-pattern-tutorial.html) ★
├ 数据库
│ ├ MySQL
│ └ 缓存系统
│   ├ Redis ★
│   └ memcached
├ 网络原理、软件工程
├ 网络知识
│ └ 网络知识
│   └ header、cookie、CORS、Cache、Method、状态码
├ 操作系统
│   └ [Linux](https://www.runoob.com/linux/linux-tutorial.html)
│   └ [Shell](https://www.runoob.com/linux/linux-shell.html)
└ 运维知识
  ├ 自动部署 DevOps、CI(持续集成)
  │ ├ jenkins
  │ ├ Travis CI
  │ ├ Appveyor
  │ └ Vercel、Netlify、[Surge](https://surge.sh)
  ├ 自动化
  │ ├ Ansible
  │ └ [spug](https://www.spug.dev)
  ├ 性能 APM
  │ └ Dapper、Pinpoint、SkyWalking、Zipkin
  ├ 集群、分布式
  │ └ Zookeeper、Kafka、Hadoop、ELK
  ├ [docker](https://www.runoob.com/docker/docker-tutorial.html)
  └ Nginx、Apache、Tomcat、CDN、jenkins、负载均衡

前端程序员技术方向

前端技术 →
后端技术 →
服务器技术 →
网络技术 →
操作系统