

首页  思维导图  详情



前端知识图谱

2020-08-10 11:19:26   1  举报





AI智能生成

前端知识体系

前端知识

前端技术

前端框架

知识管理

前端开发

软件开发

模版推荐

作者其他创作

大纲/内容

基础知识

工具

开发工具

VS Code

Webstorm

......

调试工具

Chrome Dev Tools

Firebug

......

切图

......

HTML

常用的语义标签（元素）

基础标签

媒体标签

图形标签

SVG

Canvas

语法规范

DOM

CSS

理解“流” - CSS 的设计核心

核心基础

CSS样式规则

引入

行内

内嵌

链入

导入

基础选择器

标记选择器

类选择器

id选择器

通配符：*、[]

文本样式

样式属性

核心基础

基础的图文样式

布局

inline、block、inline-block

盒子模型

margin 相关

float 相关

flex 布局

gird 布局

BFC

定义

float属性不为none

overflow不为visible（可以是hidden、scroll、auto）

position为absolute或fixed

display为inline-block、table-cell、table-caption

作用

清除内部浮动

垂直margin合并

创建自适应两栏布局

定位

position：relative、absolute、fixed

z-index：正负值、值越大越底

定位上下文

响应式

关于 viewport

rem（根元素html的font-size）、em（相对于父元素font-size）

vw、vh、%

新特性

渐变

动画

字体 iconfont

模块化

交互

Sass、Less、Scss

基础语法

变量声明

在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。（变量提升）

ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明普通变量、静态变量、模块和类。

变量作用域（全局、局部）：变量提升（先声明后赋值、后声明）

数据类型

String、Number、Boolean、Null、Undefined 和 Object 等。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。

ES6 新增了 Symbol 类型

函数

普通函数：直接调用时就是普通函数

构造函数：通过new创建对象时就是构造函数

对象方法：通过对象调用时就是方法内置函数

内置函数

控制语句

if else

for、for in、for of、while

switch case

事件

内置对象

Array

Map 和 Set

原型链

高级函数

数据类型的安全检测：typeof、instanceof

构造函数的安全作用域

惰性载入函数（表示函数执行的分支仅会发生一次）

函数的重写

变量接收自执行函数

函数绑定

函数柯里化

作用域

自由变量

闭包

this

异步ajax

JS源生请求方式：XMLHttpRequest

Fetch

浏览器同源策略

模版引擎

跨域解决方案：JSONP、proxy（cors）

promise

async/await：async函数、await使用

宏任务和微任务

event loop 模型

cookie、session、token

正则表达式

class 和继承

异常处理

模块化

ES6 Module（可对比 AMD、CMD、CommonJS）

DOM

DOM 结构

DOM 操作及性能考虑

事件特性及使用

冒泡模型

事件代理（委托）

BOM

window

location（获取 url）

navigator（获取 UA）

history（前端路由）

screen

存储

localStorage

sessionStorage

indexedDB

服务端编程

概念

数据交互格式：XML、JSON

JS&JQ插件

Typescript

类型

变量类型

函数参数类型

函数返回值类型

自定义类型

接口

泛型

枚举

函数重载

命名空间

进阶

网络通信

通讯协议

HTTP1.0/1.1/2.0/3.0

HTTPS

UDP

WebSocket

API风格

RESTFul

RPC

GraphQL

性能

性能指标

首次绘制（FP）

首次内容绘制（FCP）

首次有效绘制（FMP）

每秒传输帧数（FPS）

用户可交互时间

DNS解析时间

TCP连接时间

HTTP请求响应时间

评估工具

Page Speed

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)

CDN

独立组件

调优

代码调优

性能调优

页面响应速度、页面反馈速

组件及框架

可视化

SVG

Raphaël

Snap

Canvas 2D

Echarts

HighCharts

WebGL

Three

移动Web

React Native

Weex

Flutter

jQuery Mobile

Zepto

开发库/框架

Vue

Vuex

Vue-router

Vue-cli

Element UI

React

Redux

React-router

create-react-app

Ant design

Angular

Ember

Knockout

Backbone

UI框架

Bootstarp

ElementUI

Vux

Mint UI

MUI

......

工具库

jQuery

Zepto

Bootstrap

Prototype

Underscore

Lodash

RxJS

moment

计算机基础

计算机组成原理

冯诺依曼结构

二进制

算术运算和逻辑运算

各级存储器的区别

操作系统

进程和线程

CPU 调度算法

内存管理

文件系统和 IO

汇编语言

寄存器和内存模型

堆栈模型

CPU 指令

编译原理

编译器流程

AST

词法

文法

计算机网络

TCP/IP 协议

UDP

DNS

HTTP/HTTPS

编码

ASCII 码

unicode 字符集

UTF-8 / UTF-16

数据结构

结构化与非结构化

逻辑结构与代码表现

栈（逻辑结构）可用数组、链表（代码）表示

队列（逻辑结构）可用数组（代码）表示

树（逻辑结构）可用对象（代码）表示

线性结构

向量

堆（Heap）

栈（Stack）

队列（Queue）

链表（Linked List）

数组（Array）

集合（Set）

哈希表（Map）

树（Tree）

普通树

二叉树

搜索树

AVL 树

红黑树

B 树

算法

复杂度

算法思想

二分

贪心

动态规划

递归思想（爆栈）

常用算法

线性结构

查找

线性搜索

二分查找

索引

深度优先搜索（DFS）

广度优先搜索（BFS）

排序

冒泡排序

选择排序

插入排序

快速排序

希尔排序

归并排序

堆排序

计数排序

基数排序

新增、删除

树

遍历

新增删除（平衡树）

图

搜索

最短路径

字符串

KMP 算法

前缀匹配

Diff

设计模式

创建型

单例模式

原型模式

工厂模式

抽象工厂模式

建造者模式

结构型

适配器模式

装饰器模式

代理模式

外观模式

桥接模式

组合模式

享元模式

行为型

观察者模式

迭代器模式

策略模式

模板方法模式

职责链模式

命令模式

备忘录模式

状态模式

访问者模式

中介者模式

解释器模式

编程模式

面向对象（OOP）

类和对象

三要素（继承、封装、多态）

UML 类图

面向切面编程（AOP）

函数式编程（FP）

高级函数

纯函数

curry

compose

响应式编程

程序设计

结构化程序

自顶向下

逐步求精

模块化

限制使用goto

面向对象程序

单一职责原则（S）

开放关闭原则（O）

里氏替换原则（L）

接口隔离原则（I）

依赖反转原则（D）

架构模式

MVC

MVP

MVVM

其他

SSR

大前端

微服务

Serverless

WebAssembly

Less code/No code

后端知识

Node

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

工程开发

模块化

CSS Module

ES6 Module

CommonJS

SeaJS/CMD

RequireJS/AMD

版本管理

Git

Gitlab

Github

Svn

TortoiseSVN

依赖管理

npm

Yarn

Lerna

语言增强

CSS

less

Sass(Scss)

Stylus

Post css

JavaScript

TypeScript

CoffeeScipt

Flow

构建工具

Webpack

Gulp

Grunt

Rollup

转换器

Babel

Traceur

CI/CD

Git web hook

Jenkins

代码质量

质量检测

JSLint/JSHint/TSLint/ESLint

StyleLint

Sonar

单元测试

Chai/Expect/Should

Unit/Mocha/QUnit/Jasmine/Jest

Karma

Sinon

Istanbul

E2E测试

Nightwatch

Cypress

 Collect

Get Started

知识图谱

 Collect

Get Started

GraphRAG 知识图谱增强检索架构图

 Collect

Get Started

知识图谱

 Collect

Get Started

前端知识图谱





0 条评论

下一页