前端知识图谱

• 为图谱对应的列表增添超链接,链接到知识点对应的更多内容的页面(建议文档渠道:官网、MDN、GitHub、wiki,中英文随意)

  • 编程基础
  • 开发软件
  • 类库框架
  • 知识进阶
  • 工程开发
  • 编程思想
  • 领域分支
  • 社区发展
  • 计算机基础
  • 后端知识
  • 软技能

• 增加二级图谱,进行更详细的拓展

  • 编程基础
  • 开发软件
  • 类库框架
  • 知识进阶
  • 工程开发
  • 编程思想
  • 领域分支
  • 社区发展
  • 计算机基础
  • 后端知识
  • 软技能

• 元素
• DOM
• 语义化

• CSSOM
• 选择器
• 布局
• 交互
• 绘制

• 类型
• 原型链
• 作用域
• 闭包
• 事件
• 异步
• 正则表达式

• VIM
• Sublime Text3
• Notepad++
• WebStorm
• Visual Studio Code(强烈推荐)

• Chrome DevTools
• Firebug
• Postman
• Fiddler
• Charles

• Sketch
• PhotoShop
• PxCook

• jQuery
• Zepto
• Bootstrap
• Prototype
• Underscore
• Lodash
• RxJS
• moment

• Vue 2

• Vue 3

  • Vuex
  • Vue-router
  • Vue-cli
  • TDesign Vue2
  • TDesign Vue3
    • Element UI

• React

  • Redux
  • React-router
  • create-react-app
  • Ant design
  • TDesign React

• Angular

• Ember

• Knockout

• Backbone

• 通讯协议

  • HTTP1.0/1.1/2.0/3.0
  • HTTPS
  • TCP
  • UDP
  • WebSocket
  • *:HTTP1.0、HTTP1.1 和 HTTP2.0 的区别、TCP和UDP的区别

• API风格

  • RESTFul
  • RPC
  • GraphQL

• 性能指标

  • 首次绘制(FP)
  • 首次内容绘制(FCP)
  • 首次有效绘制(FMP)
  • 每秒传输帧数(FPS)
  • 用户可交互时间
  • DNS解析时间
  • TCP连接时间
  • HTTP请求响应时间
  • *:以用户为中心的性能指标

• 评估工具

  • PageSpeed
  • WebPageTest
  • PhantomJS
  • Lighthouse
  • JSPerf
  • Chrome dev tools

• XSS
• CSRF
• CSP
• Same-origin Policy

• IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)
• Firefox (Gecko)
• Chrome/Chromium (Blink)
• Safari (WebKit)
• Opera (Blink)
• *:can i use

• CSS Module
• ES6 Module
• CommonJS
• SeaJS/CMD
• RequireJS/AMD
• *:AMD 和 CMD 的区别有哪些?

• Git

  • Gitlab
  • Github

• Svn

  • TortoiseSVN

• npm
• Yarn
• Lerna

• CSS

  • Less
  • Sass(Scss)
  • Stylus
  • Post css

• JavaScript

  • TypeScript
  • CoffeeScript
  • Flow

• Webpack
• Gulp
• Grunt
• Rollup
• Vite

• Babel
• Traceur

• Git webhooks
• Jenkins

• 质量检测

  • JSLint/JSHint/TSLint/ESLint
  • StyleLint
  • Sonar

• 单元测试

  • Chai/Expect/Should
  • Unit/Mocha/QUnit/Jasmine/Jest
  • Karma
  • Sinon
  • Istanbul

• E2E测试

  • Nightwatch
  • Cypress

• 单例模式
• 工厂模式
• 观察者模式
• 发布订阅模式
• 代理模式
• 适配器模式
• 策略模式
• 命令模式
• ...

• Script
• Code Blocks
• Code Behind
• MVC
• MVP
• MVVM
• Flux
• *:你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解?

• 面向对象编程(OOP)
• 面向切面编程(AOP)
• 函数式编程
• 响应式编程

• 结构化程序

  • 自顶向下
  • 逐步求精
  • 模块化
  • 限制使用goto

• 面向对象程序

  • 单一功能原则(S)
  • 开放关闭原则(O)
  • 里氏替换原则(L)
  • 接口隔离原则(I)
  • 依赖反转原则(D)

• SVG

  • D3
  • Raphaël
  • Snap

• Canvas 2D

  • Echarts
  • HighCharts
  • AntV

• WebGL

  • Three
  • Echarts GL

• WebGPU

• WebView

  • Zepto
  • jQuery Mobile

• Web to Native

  • Weex
  • React Native
  • Flutter

• 小程序

  • Taro
  • uni-app
  • mpvue

• 响应式网页设计

• Cocos2d
• Egret Engine

• Glass
• Bracelet

• SSR

• 大前端

• 微服务

• Serverless

• WebAssembly

• Less code/No code

• 词法
• 文法
• V8
• AST
• JIT
• *:JavaScript 语法解析、AST、V8、JIT

• 堆(Heap)
• 栈(Stack)
• 队列(Queue)
• 链表(Linked List)
• 数组(Array)
• 树(Tree)
• 集合(Set)
• 哈希表(Map)
• *:JavaScript 算法与数据结构

• 排序

  • 冒泡排序
  • 选择排序
  • 插入排序
  • 快速排序
  • 希尔排序
  • 归并排序
  • 堆排序
  • 计数排序
  • 基数排序

• 检索

  • 线性搜索
  • 二分查找
  • 索引
  • 深度优先搜索(DFS)
  • 广度优先搜索(BFS)

• Diff

• *:JavaScript 算法与数据结构

• PC

  • Linux
  • Unix
  • Windows
  • Mac OS

• Mobile

  • Android
  • IOS

• OSI七层模型

• Express
• Koa
• Egg

• C/C++/Java/PHP/Ruby/Python/...

• Nginx
• Apache
• Tomcat

• SQL

  • MySQL
  • Oracle
  • SQL Server
  • PostgreSQL
  • DB2

• NoSQL

  • MongoDB
  • CouchDB
  • HBase

• Redis
• Memcached

• 知识储备
• 知识分享

• 解决问题

• 沟通技巧

• 业务理解
• 需求分析
• 项目评估

• 交互设计
• 可用性
• 扩展性
• 安全性
• 性能

• 进军高级前端开发工程师必备的知识图谱
• 前端技能汇总