最新前端面试总结
1.HTML&CSS：
flex布局，垂直居中，清除浮动，BFC，三栏布局，两栏布局，动画，盒模型，h5新特性
2.javaScript：
继承，原型链，this指向，设计模式，call，apply，bind，new实现，防抖截流，
es6新特性
ecent，loop，promise使用及实现
pomise并行执行和顺序执行
闭包，垃圾回收和内存泄漏
深浅拷贝
数组方法，乱序，排序，数组扁平化
事件委托，事件监听，事件模型
3.Vue：
1.双向绑定原理
vue2 Object.defineProperty get劫持 set改变 ，有一个弊端就是无法监听到数组内部数据的变化（当然也可以通过arr=arr.concat([])）
vue3 Es6的语法Proxy
2.vue computed原理
你给 computed 设置的 get 和 set 函数，会跟 Object.defineProperty 关联起来，所以 Vue 能捕捉到 读取computed 和 赋值computed 的操作
读取computed 时，会执行你设置的 get 函数，但是并没有这么简单，因为还有一层缓存的操作赋值 computed 时，会执行你设置的 set 函数
这个就比较简单，会直接把 set 赋值给 Object.defineProperty - set
3.vue编译器结构图
4.vue的生命周期
5.vue的组件通讯
不相关的两个组件之间的通讯
1.在main.js中挂载Vue.prototype.$EventBus = new Vue()
2.A组件
```
<template>
<div class="wrap">
<div>我是组件A</div>
<button @click="sendMsg">发送</button>
</div>
</template>
<script>
export default {
name: "A",
methods:{
sendMsg(){
this.$EventBus.$emit('sendMsg',"这是组件A发送的消息！")
}
}
}
</script>
```
3.B组件
```
<template>
<div>
<div>我是组件B</div>
</div>
</template>
<script>
export default {
name: "B",
mounted(){
this.$EventBus.$on('sendMsg',(msg)=>{
console.log(msg);//这是组件A发送的消息！
})
},
}
</script>
```
父传子：
1.子组件：绑定，子组件里用props接收
2.子组件上ref=‘name’,父组件this.$refs.name.fn(),可传参数
子传父：
1.子组件上绑定方法@fn=‘dada’，父组建内写上data(val){}，val即使子组件的传参，子组件this.$emit(‘fn’,payload)
2.子组件this.$parent.fn()调用父组件的方法
父子组件执行生命周期
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
6.mvvm模式和mvc模式理解
mvc：model数据层，view视图层，control控制层
1.view -- model层关联密切: view层请求model层数据进行页面渲染;当model层数据发生变化的时候,view需要再次重新请求model
数据进行渲染;...
2.Controller: 接收用户行为,进行逻辑处理后,数据发生改变; 每次改变都要发送给Model层,然后Model改变,进而view改变.
mvvm： model数据层，view视图层，vm viewmodel
view和model是相互独立的,通过vm(viewmodel)这个连接的对象或者说桥梁来实现同步响应式的变化; 当model发生数据改变,view层
会自动同步,同理当view操作数据改变后,model层也会同步 MVVM设计模式:实现view model同步的原理:Object.defineProperty()定义
的set和get函数
7.vue dom diff
vue虚拟dom生成一个和原dom相同的dom树，当需要改变dom操作时候，先把虚拟dom树进行改变，继而虚拟dom树和真实的dom
做比较，比较出不通的地方再改变真实dom，只做了不同部分的dom改变。
8.vuex
9.vue-router
4.react：
1.dom-diff
在有key的情况下，遍历新的集合；判断新集合中的节点在旧集合的位置是否大于之前访问过的旧节点的最大位置
2.列表key属性
3.jsx原理
一.JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。
二.React.js 可以用 JSX来描述你的组件长什么样的。
三.JSX 在编译的时候会变成相应的 JavaScript 对象描述。
四.react-dom 负责把这个用来描述UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。
4.react-router原理
目前react-router在项目中已经有大量实践，其优点可以总结如下
风格: 与React融为一体,专为react量身打造，编码风格与react保持一致，例如路由的配置可以通过component来实现
简单: 不需要手工维护路由state，使代码变得简单
强大: 强大的路由管理机制，体现在如下方面
路由配置: 可以通过组件、配置对象来进行路由的配置
路由切换: 可以通过<Link> Redirect进行路由的切换
路由加载: 可以同步记载，也可以异步加载，这样就可以实现按需加载
使用方式: 不仅可以在浏览器端的使用，而且可以在服务器端的使用
5.redux原理
rematch：https://www.cnblogs.com/mengff/p/9510264.html
6.生命周期
7.react setState 异步
1.setState 不会立刻改变React组件中state的值.
2.setState 通过触发一次组件的更新来引发重绘.
3.多次 setState 函数调用产生的效果会合并。
重绘指的就是引起 React 的更新生命周期函数4个函数：
shouldComponentUpdate（被调用时this.state没有更新；如果返回了false，生命周期被中断，虽然不调用之后的函数了，但是state
仍然会被更新）
componentWillUpdate（被调用时this.state没有更新）
render（被调用时this.state得到更新）
componentDidUpdate
8.react组件通信
父传子：子组件上：绑定值，子组件内用props接收
子传父：父组件传给子组件一个方法，子组件props中接收到方法，调用此方法也可传值
9.hooks
https://www.jianshu.com/p/d22e581df1e4
5.性能优化：
1.Code Splitting
2.shouldComponentUpdate避免重复渲染
3.使用不可突变数据结构
4.组件尽可能的进行拆分、解耦
5.列表类组件优化
6.bind函数优化
7.不要滥用props
8.ReactDOMServer进行服务端渲染组件
6.网络：
浏览器缓存
前端跨域
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、window.name+ iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
HTTP1, HTTP2, HTTPS、浏览从输入网址到回车发生了什么、前端跨域、浏览器缓存、cookie, session, token, localstorage, sessionstorage、状态码、TCP连接(三次握手, 四次挥手)
