WEB知识体系
2020-04-09 17:55:30 1 举报AI智能生成
web学习线路图及前端知识体系图
作者其他创作
大纲/内容
H5和移动端
移动端适配
WebApp
HybridApp
小程序
微信公众号
NODE
基础知识
框架
EXPRESS
KOA
MONGODB
WEBSOCKET
GIT
git add .
git commit -m
git push
设计模式
性能优化
网络相关优化
渲染过程相关优化
文件优化
其他优化
webpack优化
监控
requestAnimationFrame渲染庞大数据量
算法&数据结构
算法
查找
顺序查找
二分查找
索引查找
哈希查找
排序
插入排序
选择排序
冒泡排序
快速排序
贪心算法
动态规划
背包问题
数据结构
树
图
线性表
可视化
D3
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 消息
常用头字段
通用头
请求头
响应头
正文头
代理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封装
ws
socket.io
原理
websocket安全防范
反射代理
安全
Resful Api
微服务
进制转换
二进制转十进制
十进制转二进制
设计模式
浏览器机制
渲染
缓存
基础知识
HTML/HTML5
语义化标签、属性
布局
H5存储
音视频
canvas
CSS/CSS3
选择器
盒模型
定位浮动
过渡动画
2D3D转换
边框、圆角
背景、渐变
JS
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
0 条评论
下一页
