导图社区 蓝灯会面试题前端整理
Node函数（聚合函数）；虚拟dom；h函数；patch函数：判断是否是同一节点（sameVnode方法）。
client向server发送SYN报文，进入SYN_SEND状态；server收到信息，验证了s-c发送通畅；状态位FLAGS字段
社区模板帮助中心，点此进入>>
论语孔子简单思维导图
《傅雷家书》思维导图
《童年》读书笔记
《茶馆》思维导图
《朝花夕拾》篇目思维导图
《昆虫记》思维导图
《安徒生童话》思维导图
《鲁滨逊漂流记》读书笔记
《这样读书就够了》读书笔记
妈妈必读：一张0-1岁孩子认知发展的精确时间表
前端
网络通信
Http
缓存
强缓存和协商缓存
同源限制
跨域问题
jsonp
websocket
cors
nginx
postMessage
协议标识符->http
版本
http/1.0
无状态、无连接
http/2.0
二进制分帧
多路复用(连接共享)
头部压缩
缓存处理(cache-control)
host字段、支持断点传输
服务器推送
请求方式
在我大万维网世界中，TCP就像汽车，我们用TCP来运输数据，它很可靠，从来不会发生丢件少件的现象。 但是如果路上跑的全是看起来一模一样的汽车，那这个世界看起来是一团混乱，送急件的汽车可能被前面满载货物的汽车拦堵在路上，整个交通系统一定会瘫痪。 为了避免这种情况发生，交通规则HTTP诞生了。 HTTP给汽车运输设定了好几个服务类别，有GET, POST, PUT, DELETE等等，HTTP规定，当执行GET请求的时候，要给汽车贴上GET的标签（设置method为GET），而且要求把传送的数据放在车顶上（url中）以方便记录。 如果是POST请求，就要在车上贴上POST的标签，并把货物放在车厢里。 当然，你也可以在GET的时候往车厢内偷偷藏点货物，但是这是很不光彩；也可以在POST的时候在车顶上也放一些数据，让人觉得傻乎乎的。HTTP只是个行为准则，而TCP才是GET和POST怎么实现的基本。
GET
POST
DELETE
PUT
HEAD
CONNECT
OPTIONS
允许客户端查看服务器的性能
TRACE
Ajax
Websocket
协议标识符->ws
连接打开(onopen)
类似于get，返回的响应中没有具体内容，用于获取报头
接收到消息(onmessage)
连接关闭(onclose)
WebRTC
网络安全
XSS(Cross Site Script)跨站脚本攻击
问题
如：网站输入框中插入脚本-弹出提示框等
解决
CSRF(Cross Site Request Forgery)跨站点伪造请求
SQL注入攻击
Http Heads攻击
Cookie攻击
重定向攻击
性能优化
代码
防抖
控制次数(多次执行变成一次执行)
节流
控制频率(多次执行变成每隔一段时间执行)
文件压缩(webpack)
文件懒加载
减少重绘回流
使用事件委托
查找表代替判断
requestAnimationFrame来实现视觉变化
图片
图片压缩
使用雪碧图，减少http请求
图片懒加载
CDN(内容交付网络)
http缓存
强缓存(200)
Pragma(更老版本的)
Cache-Control(http1.1版本的)
public
所有内容都将被缓存（客户端和代理服务器都可缓存）
private
所有内容只有客户端可以缓存，Cache-Control的默认取值
no-cache
客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
no-store
所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
max-age=xxx (xxx is numeric)
缓存内容将在xxx秒后失效
Expires(http1版本的)
协商缓存(304)
模式一
每次的请求头中的ETag都是获取的上一次响应头中的If-None-Match
请求头
If-None-Match
响应头
ETag
每次的请求头中的If-Modify-Since都是获取的上一次响应头中的Last-Modify
If-Modify-Since
Last-Modify
浏览器缓存
本地存储
webStorage
localStorage
sessionStorage
Cookie
IndexDB
WebSql
应用缓存Application Cache
PWA(渐进式web应用)
默认存储
往返缓存BFCache
字体图标代替图片图标
算法
排序
冒泡排序
归并排序
快速排序
插入排序
选择排序
数组/字符串去重
递归
递归优化
递归>>>尾递归>>>循环
break
break是结束整个循环体
continue
continue是结束单次循环
for循环和foreach区别
for循环可以使用break和continue终止循环，forEach不行
数据结构
23种设计模式
创建型模式
工厂方法模式
主要解决接口选择问题，创建国产延迟到子类进行
抽象工厂模式
创建一个相关对象的工厂，每个工厂按照工厂模式提供对象
单例模式
避免一个全局使用的类频繁的创建与销毁
建筑者模式
使用多个简单的对象一步步构建成一个复杂的对象
原型模式
创建重复的对象
结构型模式
适配器模式
适配器基础或依赖已有的对象，实现想要的接口
装饰者模式
在不想增加很多子类的情况下扩展类，动态地给一个对象添加额外的职责
代理模式
为其他的对象提供一种代理以控制这个对象的访问
外观模式
想现有的系统添加一个接口，来隐藏系统的复杂性
桥接模式
将抽象部分与现实部分分离，使他们都可以队里的变化
组合模式
树枝和叶子实现统一接口，树枝内部组合该接口
享元模式
减少创建对象的数量，以减少内存占用和提高性能
行为型模式
策略模式
定义一系列的算法，把他们一个个封装起来，并且使他们可以互相替换
模板方法模式
有一些通用的方法，但是在每一个子类都重写此方法
观察者模式(发布—订阅模式)
解决一个对象改变状态给其他对象通知的问题
Observer
劫持并监听所有属性，有变动就通知订阅者
defineReactive()监听所以属性，get就添加监听依赖到监听依赖队列中，set就通知监听依赖队列更新数据
Watch
收到属性变化，执行回调函数，更新视图
update()执行回调函数，更新视图
Compile
创建虚拟dom，编译模板，绑定元素事件、指令值，创建监听初始化模板数据
init()创建虚拟dom，编译模板，绑定元素事件、指令值，创建监听初始化模板数据,删除元素模板指令属性，添加到真实dom中去
Dep
存储监听依赖队列，并更新监听依赖
addSub()添加监听依赖
notify()通知所有依赖更新
MVVM
创建实例，创建监听Observer(数据劫持)，编译模板并挂载数据，更新数据，销毁数据
proxyKeys()代理属性通过this.property访问到this.data.property
迭代器模式
提供一种方法顺序访问一个集合对象中各个元素，而又无序暴露该对象的内部表示
职责链模式
无须关心处理细节和请求传递，只需将请求发送到责任链上即可
命令模式
将一个请求封装成一个对象，从而用不同的请求对客户进行参数化
备忘录模式
保存一个对象的某个状态，以便在适当的时间恢复对象
状态模式
对象的行为依赖于它的状态(属性)，并且可以根据它的状态改变而改变它的相关行为
访问者模式
在被访问的类里面加一个对外提供访问者的接口来进行判断
中介者模式
多个类相互耦合，将类解耦
解释器模式
实现一个表达式接口，解释一个特定的上下文
正反代理
正向代理
代理客户端,列如VPN
反向代理
代理服务端，用户无感知
负载均衡
轮询
weight权重模式
ip_hash
动静分离
静态资源的请求，nginx就在静态资源目录下面读取返回给客户端
动态资源的请求，nginx利用反向代理把请求转发给后端应用去处理，后端应用将结果返回给nginx，nginx再返回给客户端
css3
布局
弹性布局
Flex布局
容器
水平对齐
justify-content
左对齐
flex-start
右对齐
flex-end
居中
center
两端对齐
space-between
间隔相等
space-around
垂直对齐
align-items/align-content
align-content属性只适用于多行的flex容器，单行无效
上对齐
下对齐
基线对齐
baseline
高度铺满
stretch
排列方向
flex-direction
水平
row | row-reverse
垂直
column | column-reverse
换行
flex-wrap
不换行
nowrap
wrap
反换行
wrap-reverse
组合
flex-flow
flex-direction和flex-wrap组合
项目
order
放大
flex-grow
缩小
flex-shrink
基准
flex-basis
flex
对齐
align-self
rem
栅格布局
静态布局
流式布局(百分比布局)
响应式布局
媒体查询
动画
animation
animation-name(keyframe 名称)
animation-duration(耗时)
animation-timing-function(转速曲线)
animation-delay(开始之前的延迟)
animation-iteration-count(播放的次数)
animation-direction(是否轮流反向播放动画)
形状转换
transform
translate
rotate
scale(缩放)
skew(倾斜转换)
perspective(视角)
过渡
transition
transition-property(属性)
transition-duration(耗时)
transition-timing-function(转速曲线)
transition-delay(开始之前的延迟)
css
css框架
less
sass/scss
盒模型
渲染模式
BFC(Block Formatting Context)格式化上下文
种类
IE6盒子模型
content包含了padding和margin
w3c盒子模型
content不包含padding和margin
css选择器
id选择器
class选择器
tag选择器
相邻选择器(h1+p)
兄弟选择器(div~p)
子选择器(ul>li)
后代选择器(ul li)
通配选择器(*)
属性选择器
伪类选择器(:hover)
伪元素选择器
优先级
!important>id选择器>class选择器>tag选择器
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
可继承属性
font-size
font-family
color
line-height
text-align
不可继承属性
width
height
margin
padding
border
display
background
position
Es5
call、apply、bind
fn.call(obj, 多个参)
fn.apply(obj, 单个参)
fn.bind(obj, 多个参)()
oop
面相对象三大特性
封装
实物抽象化
权限控制
继承
__proto__和prototype关系
每个对象都具有一个名为__proto__的属性
每个构造函数都有一个名为prototype的方法
每个对象的__proto__属性指向自身构造函数的prototype
多态
子类可以重写父类的属性和方法
dom
数据
结构
8种数据类型
String
Number
Null
Undifined
Boolean
Object
Symbol
BigInt
存储
基本类型
引用类型
Function
Array
拷贝
深拷贝
新复制一份数据
JSON.parse(JSON.stringify(obj))
浅拷贝
只改变指向
转换
隐式类型转换
数据类型判断方法
typeof
typeof 'duofuni' -> string
typeof 100 -> number
typeof function fn(){}-> function
typeof [1, 2, 3] -> object
typeof {age: 20} -> object
Object.prototype.toString.call()
contructor
instanceof
数组操作函数
shift去头
unshift加头
pop去尾
push加尾
块级作用域
try catch
with
闭包
含义
闭包就是能够读取其他函数内部变量的函数
闭包是将函数内部和函数外部连接起来的桥梁
缺点
闭包使得Javascript的垃圾回收机制不会收回其所占用的资源，可能导致内存泄露，解决方法是，在退出函数之前，将不使用的局部变量全部删除
自执行函数
webpack
组成
entry
module
chunk
代码分割
entry新增入口
CommonsChunkPlugin
import函数动态导入
loader
plugin
JS事件机制
事件流
事件冒泡(ie事件流)
阻止
stopPropagation
取消默认
preventDefault
事件捕获
事件目标
顺序
DOM事件流
事件冒泡
模块化
AMD、CMD
适用于浏览器端，采用异步
CommentJS
适用于服务器端，采用同步
Es6(Es2015)
es6新特性
作用域
块级变量let
块级常量const
模块
import(导入)
export(导出)
export default(默认导出)
箭头函数
模板字面量
promise
展开运算符
解构赋值
元编程
proxy(代理)
类
extends实现继承
重写构造器
super关键字
迭代
for of(不支持对象类型)
数据类型
symbol
set
map
weakset
weakmap
遍历方法
find
filter
forEach
some
every
for of
html5
webSocket
webWorker
新标签
<section>、<article>、<footer>、<header>、<nav>、<menu>
canvas
拖放API
video、audio
Geolocation(地理定位)
js框架
vue
生命周期函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
vue3
Composition-Api
setup()
react
componentWillMount
componentDidMount
componentWillUpdate
componentDidUpdate
shouldComponentUpdate
componentWillUnmount
componentWillReciveProps
hooks
useState
useEffect
useReducer
useContext
服务端渲染(SSR)
Nuxt.js
自动集成了路由、axios、vuex等
路由表通过创建文件夹自动生成，路由跳转通过提供的nuxt-link组件实现
axios、vuex等需要在nuxt.config中配置
默认全局TDK在nuxt.config中的head对象中配置
所有组件的TDK使用提供的head方法配置
Next.js
默认全局TDK需要自己封装
所有组件的TDK通过在提供的Head组件中编写
typescript
基础类型
boolean
number
string
enum
any
Tuple
void
null
undefined
接口
属性接口
可选属性
只读属性
函数接口
(source: string): boolean;
数组接口
可索引[index: number]: string;
对象接口
可索引[index: string]: string;
类接口
扩展接口
泛型
数据流方案
Vuex
state
getter
mutation
定义
mutations
触发
commmit
action
actions
dispatch
Dva
reducers
effects
Subscriptions
Redux
createStore
combineReducers
reducer
subscribe
Middleware
redux-saga
redux-thunk
redux-promise
Mobx
observable
inject
依赖收集（autoRun）
js事件循环
宏任务(Macrotask)
setTimeout/setInterval
script( 整体代码)
微任务(Microtask)
Promise
process.nextTick
