

首页  思维导图  详情



WEB知识体系

2020-04-09 17:55:30   1  举报





仅支持查看

AI智能生成

web学习线路图及前端知识体系图

前端开发

web开发

模版推荐

作者其他创作

大纲/内容

H5和移动端

移动端适配

WebApp

HybridApp

小程序

微信公众号

NODE

基础知识

框架

EXPRESS

KOA

MONGODB

WEBSOCKET

GIT

git add .

git commit -m

git push

设计模式

性能优化

网络相关优化

渲染过程相关优化

文件优化

其他优化

webpack优化

监控

requestAnimationFrame渲染庞大数据量

算法&数据结构

算法

查找

顺序查找

二分查找

索引查找

哈希查找

排序

插入排序

选择排序

冒泡排序

快速排序

贪心算法

动态规划

背包问题

数据结构

树

图

线性表

可视化

Echarts

Canvas

初始化

设置宽高

html标签上设置

js设置

css设置，不推荐

Svg

WebGL

底层知识、基础原理

网络

网络协议

UDP

特点

不可靠性

无连接

不可靠

没有拥塞机制

高效

头部

端口号

数据报文长度

数据报文检验和(可选)IPV4

传输方式

一对一

一对多

多对一

多对多

TCP

特点

状态机

建立连接3次握手

断开连接4次握手

头部

序列号Sequence number

Acknowledgement Number

数据窗口大小 window size

标识符

ARQ

停止等待ARQ

连续ARQ

滑动窗口

拥塞处理

HTTP

基础

客户端请求

请求行

请求方法

URL

协议版本

请求头

请求正文

服务端响应

状态行

协议版本

状态码

响应头

响应正文

常见状态码

5xx 服务器错误

4xx 客户端错误

401 没有权限

403 请求资源被服务器拒绝

404 not found

3xx 重定向

301 永久重定向

302 临时重定向

304 请求资源未修改

2xx 请求成功

1xx 消息<br>

常用头字段

通用头

请求头

响应头

正文头

代理Proxies

底层协议

HTTPS

TLS加密

对称加密

非对称加密

公钥

私钥

TLS 4次握手

SSL加密

HTTP1.0

HTTP2/HTTP3

HTTP2

二进制传输

多路复用

header压缩

服务端push

AJAX readState

0 未初始化

1 启动

2 发送

3 接收

4 完成

WEBSOCKET

什么是websocket

websocket的优点

双向通信，更加灵活

更好的二进制支持

较少的控制开销

支持扩展

websocket需要掌握的技术

如何建立连接

如何进行双向通信

数据帧格式

如何维持连接

Node中websocket封装

socket.io

原理

websocket安全防范

反射代理

安全

Resful Api

微服务

进制转换

二进制转十进制

十进制转二进制

设计模式

浏览器机制

渲染

缓存

基础知识

HTML/HTML5

语义化标签、属性

布局

H5存储

音视频

canvas

CSS/CSS3

选择器

盒模型

定位浮动

过渡动画

2D3D转换

边框、圆角

背景、渐变

ES5

流程控制语句

数据类型

内置对象

函数/事件

变量、作用域

面向对象

正则表达式

jquery常用库

this

闭包

ES6/7

变量和常量

箭头函数

模板字符串

解构赋值

对象、数组及函数的扩展

promise

class类

this指向

静态方法static

私有方法和私有属性

面向对象

创建

继承

基于原型链的继承

基于构造函数的继承

寄生组合继承

es6 class继承

extends关键字

super关键字

mixin模式实现

模块化

CMD规范 nodejs

moudle.exports

require

AMD规范 客户端js

ES6规范

import

export

离线应用PWA与客户端存储

WebWorker

注意点

同源策略

DOM限制

全局对象限制

通信限制

脚本限制

文本限制

主线程main.js

新建worker线程

消息通信

发送 worker.postMessage()

响应

成功响应 worker.onmessage()

错误响应 worker.onError()

关闭 worker.teminate()

worker线程 worker.js

监听主线程事件

self.onMessage('message',cb)

self.addEventListener()

加载脚本

importScripts()

关闭 self.close()

存储方式

数据生命周期

数据存储大小

与服务端通信

异步编程

EventLoop

调用堆栈 the call stack

消息队列 message queue

Heap

宏任务、微任务

promise为微任务

setTimeout是宏任务

回调函数

回调地狱

事件监听

发布/订阅

Promise

特点

优点

可以解决回调地狱问题，代码优雅

缺点

无法取消promise

如果promise没有回调函数，内部的异常不能捕获到

pending状态无法得知promise的进展

promise新建后就会立即执行

一旦状态改变，就不会再改变

状态

pending

resolve

reject

应用

promise封装异步加载图片

promise封装ajax操作

resolve的也是promise对象的情况

generator与promise结合

Iterator迭代器

next()

for ....of

与其他遍历方式区别

for ...  in

forEach

for()

Generator 可遍历状态机

创建generateor

调用generator函数

调用指针next()

yield表达式

Generator中的this、new

状态机

上下文

应用

异步操作同步表述

控制流管理

封装Iterator接口

Async/Await

调用async函数

await

返回值是后面的异步操作返回的值

await等到promise对象状态改变，才继续执行

实现原理

自动执行的generator

并发

嵌套async函数

async函数执行返回的是一个Promise对象，所以直接调用其是异步操作

网页模型DOM

Node节点

Element

重绘和回流

浏览器模块 BOM

浏览器缓存机制

缓存位置

缓存策略

强缓存

协商缓存

事件模型

事件委托

事件绑定方式

onClick

addEventListener

事件绑定常见问题

模拟事件

模拟鼠标hover

前端框架

VUE

VUE基础

基础知识

生命周期钩子函数

vue组件

组件通信

父子组件通信

兄弟组件通信

跨多级组件通信

任务组件通信

组件注册

全局注册

局部注册

插槽slot

动态组件Component

is属性

vue语法

数据绑定

指令v-xx

vue-router

hash

history

常见问题

mixint和mixins的区别

extend能做什么

组件中的data什么时候可以使用对象

v-if和v-show的区别

keep-alive用途

computed和watch区别

vue原理

响应式原理

object.defineProperty的缺陷

编译过程

NextTick原理

REACT

虚拟Dom

jsx语法

事件绑定

生命周期

组件库

ANGULAR

服务端渲染SSR

REACT NEXT.JS

VUE NUXT.JS

虚拟Dom

js模拟创建dom对象

判断差异

diff算法

渲染差异

MVVM原理

概念

VIEW页面

model数据模型

viewModel  view和model之间的媒介

核心

数据绑定

主流框架的实现

Angular 脏值检查

vue 数据劫持

调试

IDE

WEBSTORM

VSCODE

Sublime

构建工具

WEBPACK

GULP

 ROLLUP

 Collect

Get Started

Web前端知识体系大全

 Collect

Get Started

软件知识体系

 Collect

Get Started

DAMA数据管理知识体系指南

 Collect

Get Started

Web前端知识体系大全





0 条评论

下一页