个人记录，仅供参考，部分内容可能存在歧义或者错误见谅，部分图片来自互联网，如有侵犯抱歉
CSS
经典布局 左边固定右面自适应
浮动、定位、flex、表格布局、grid布局
CSS盒模型的认识
content+border+padding+margin构成，分为标准模型+IE模型，标准模型的宽高是指content的宽高，IE模型指content+padding+border之后的宽高，通过box-sizing：content-box，border-box设置
BFC
- 概念：块级元素格式化上下文。
- 原理：BFC是一个容器是容器内外的元素不会互相影响，使BFC内的浮动元素参与到容器的宽高计算，通常用来解决边距冲突重重叠，或者清楚浮动。
- 创建BFC：设置float，绝对、固定定位，设置display：inline-block，overflow不为默认值
js
异步加载js
js生成script标签设置src；defer异步加载，并使脚本在文档解析完成后执行；async异步加载，加载完毕后执行
this是个啥
就是指调用函数时的context上下文
闭包是个啥
指在一个函数内部中生命变量，在让函数内声明的函数使用变量就形成一个闭包，通常会再把函数内生命的函数return除去供外部使用来操作变量，作用就是创建一个局部变量
DOM事件相关
- 事件级别 DOM0,DOM2,DOM3；DOM0是通过el.onclick，DOM2是通过addEventListener，DOM3增加了更多事件比如鼠标键盘相关
- 事件模型 捕获、冒泡，指事件由捕获到达目标元素再由冒泡发送到全局。window-document-html-body-XXX-目标元素
- 自定义事件 new Event，dispatchEvent()
常见循环的方式有什么不同
普通for、while、for-in(索引数组 对象)、for-of(不能用于对象)、Object.keys、Object.getOwnProperty(返回对象的自有属性)、map、forEach(可以return)、reduce、every、some、fiter
异步相关
callback promise async
深拷贝浅拷贝
- 浅拷贝指复制一个对象的地址，使用同一片内存，修改之后会互相影响；深拷贝指开辟一块新的内容复制一个属性相同的对象，互不影响；
- 浅：Object.assign()，展开运算符，concat(),slice()
- 深：JSON.parse(JSON.stringify())
原型
- new做了啥 创建一个新对象； 将构造函数的作用域赋给新对象（this就指向了这个新对象）； 执行构造函数中的代码（为这个新对象添加属性）； 返回新对象。
- 常见继承（class ... extends） 子构造函数父构造.call(this),缺点只能继承父构造函数内属性，不能继承原型对象上的内容；让子.prototype = new 父构造()，缺点兄弟实例改变父属性互相影响；组合继承，子构中父构.call(this)，子构.prototype=Object.create(父构.prototype)；子构.prototype.constructor=Child3
Event-loop
Js单线程执行，同步代码依次执行，异步代码挂起，在异步队列中，在同步代码执行完毕之后轮询执行异步代码
先微任务 后 宏任务 宏：setTimeout/setInterval 微：process.nextTick Promise
节流(时间内多次出发，间隔固定时间执行)防抖(时间内多次触发执行一次)
Vue
谈谈MVVM的理解
View视图层，Model数据，ViewModel层是将两者连接起来的桥梁，Model的数据通过数据绑定在视图上展示，View通过事件监听影响Model,响应式的视图进行更新；其中响应式的核心api是（Object.defineProperty或者Proxy）；整体实现原理中有三个重要组成部分：模板编译Compile，数据劫持Observer，数据观察Watcher； 整体流程大致是创建Vue实例之后，由Compile去处理模板指令和插值表达式以及非html标签（组件标签）等，由Observer拦截需要响应式的data数据创建对应的watcher由依赖管理Dep来管理，Dep主要作用是收集watcher在劫持数据发生改变后通知watcher，watcher再通知Compile更新视图
生命周期
创建前后，挂载前后，更新前后，销毁前后。父先再子，子成再父
组件通信
- 属性传递事件触发，自定义事件bus，vuex
插槽
- 匿名插槽，具名插槽(slot标签定义name，然后在tamplete标签v-slot：name使用)，作用域插槽（当父组件想使用子组件的变量时，slot通过动态属性暴露变量，tamplete标签v-slot=“xx”接收）
啥是动态组件如何异步加载
- 动态组件
<component :is="组件名"></component> - 异步加载 components：{bar：()=>import('./bar.vue')}
vue2支持的数组方法，如何实现的
- push pop shift unshift , splice, sort, reverse
- Object.defineProperty对数组支持有缺陷；所以：const arrayPrototype=Object.create({Array.prototype}),重写方法
聊聊Virtual DOM
虚拟DOM是指一个描述DOM结构的js对象，表明是具体什么标签如div，具有哪些props，节点有哪些。因为浏览器操作DOM的成本较高，所以当数据变化是先通过比较虚拟DOM，匹配找出尽可能少的需要更新的真实DOM，从而达到提升性能的目的。
diff 同级比较深度优先
Vuex使用
mapActions/mapMutations/mapState
key
作为循环的标识，便于diff时比较，使用id，不推荐用index
路由原理、守卫
- window.onpopstate，window.onHashChange
Vue中涉及的优化
- 合理利用计算属性（缓存机制）
- 合理的v-if与v-show
- keep-alive
- 保证key的唯一性
- 路由和组件的异步加载
- ui库的按需引入
- 避免v-for绑定事件 使用事件代理
React
聊聊vue与react的区别
生命周期
类组件和函数组件
类组件有自己的state和生命周期，适合做一些逻辑处理，函数组件是接受props，没有state和证明周期也被叫做木偶组件或者无状态组件，更适合单纯的样式展示
setState何时同步
定时器或者原生js绑定事件
react如何双向输入绑定
<input value={this.state.value} onChange={this.handleChange.bind(this)}></input>
高阶组件
接受一个组件并返回一个新组件的函数
react-redux如何使用
浏览器相关
输入URL回车
get与post
- GET产生一个TCP数据包；POST产生两个TCP数据包
- GET是header和data一并发送，POST分两次第一次header响应100，然后再继续
- 参数一个是url长度受限一个是请求体
- GET被浏览器主动cache，后退无害，POST不会，有害
- GET只接受ASCII字符，而POST没有限制
