【面试题总结】

Vue组件通信？

Vue组件通信分为父传子、子传父、兄弟组件通信和其他组件通信

父传子：父组件在调用子组件时，向子组件传递参数，随后在子组件通过props进行接收，实现父传子

子传父：在父组件定义一个函数携带一个参数，父组件在调用子组件时，向子组件传递定义的函数，子组件通过props进行接收，随后将要传递的内容通过参数的形式传递给父组件，实现子传父

兄弟组件传值：通过父传子和子传父结合的方式，实现兄弟组件的信息传递

其他组件通信：通过Vuex实现

说说你对vuex的理解？写出其原理的核心代码？

Vuex是为vue提供的一个状态管理仓库，其组成部分分别为state，mutation，action，module，filter五部分组成，其中state负责存储数据，action负责与页面中的信息进行交互，mutation负责对数据进行处理，module是对vuex进行模块化处理，而filter则负责对数据进行二次的处理，类似于计算属性

//核心代码：

State（）{

          Let A=123

}

Action(state){

          Let Addnum(){

                     state.mutation.doaddnum(state.a)

          }

}

Mutation(action){

          Let doaddnum(){

                     State.a++

          }

}

说说React生命周期中有哪些坑？如何避免？

说说你对React中虚拟dom的理解？

React虚拟dom的存在，为react独特的diff算法提供了基础，通过每次更新页面信息时，都需要通过diff算法（新旧dom树的同级比较）来实现，这样的实现方法，使得react的diff算法实现了算法时间复杂程度由传统的O(n^3)到O(n)的变化，极大程度的提升了页面的加载速度，同时降低了性能的消耗

调和阶段setState干了什么？

一个页面的最终展示结果是由数据状态和外部参数所共同决定的，而这个数据状态就是state，如果想要修改组件中的数据状态就需要通过SetState来实现

SetState在调和阶段主要是调用了react中的diff算法去更新虚拟dom树

随后利用render方法将新的虚拟dom渲染成真实的dom元素，从而实现数据的更新

React组件之间如何通信？

父子组件：通过props来进行数据信息的传递

非父子组件：context状态树、redux、react-redux

说说redux的实现原理是什么，写出其原理的核心代码？

说说Connect组件的原理是什么？

connect组件的本质是一个高阶函数，它是真正与store进行数据交互的组件，包在我们的容器组件的外一层，接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。

原理：

首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产Component的函数，然后再将真正的Component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的Connect组件

说说react 中jsx语法糖的本质？

jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本

区别：

Will系列由于用法较为含糊，使得许多程序员都对其用错了方法或执行了本应不该在该函数执行的操作，后社区将其进行了删除

CDN的特点及意义？

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。 
1、本地Cache加速 提高了企业站点（尤其含有大量图片和静态页面站点）的访问速度，并大大提高以上性质站点的稳定性
2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中的用户都能得到良好的访问质量。
3、远程加速远程访问用户根据DNS负载均衡技术智能自动选择Cache服务器，选择最快的Cache服务器，加快远程访问的速度
4、带宽优化 自动生成服务器的远程Mirror（镜像）cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。
5、集群抗攻击 广泛分布的CDN节点加上节点之间的智能冗余机制，可以有效地预防黑客入侵以及降低各种D.D.o.S攻击对网站的影响，同时保证较好的服务质量 。
CDN主要解决这么些问题:
物理距离远，多次网络转发，延时高不稳定;
所在运营商不同，需运营商之间转发绕行;
网络带宽处理能力有限，海量请求时，响应速度与可用性降低

什么是闭包，应用场景是什么？

简单来说： 闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

setTimeout传参，回调，封装变量

从浏览器地址栏输入url到显示页面的步骤？

首先，用户再路由的地址栏中数据要请求的路由地址，随后经过算法的处理，整理出真正要执行的数据请求操作，随后将请求发送到后端，后端经过对数据的处理后，将处理的结果进行返回，随后界面发现数据的变化会进行更新，从而实现一个完整的请求过程

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引 擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。

浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS 引擎：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
 Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

清除浮动的几种方式？各自的优缺点？

1.使用空标签清除浮动clear:both。
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：通俗易懂，容易掌握
缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
2.父级div定义overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
3、父级div定义伪类:after和zoom(用于非IE浏览器)
原理：IE8以上和非IE浏览器才支持:after，原理和方法1有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持

说说你对koa中洋葱模型的理解？

Koa中的洋葱模型，Koa 的洋葱模型指的是以 next() 函数为分割点，先由外到内执行 Request 的逻辑，再由内到外执行 Response 的逻辑。通过洋葱模型，将多个中间件之间通信等变得更加可行和简单。其实现的原理并不是很复杂，主要是 compose 方法。在洋葱模型中，每一层相当于一个中间件，用来处理特定的功能，比如错误处理、Session 处理等等。其处理顺序先是 next() 前请求，然后执行 next() 函数，最后是 next() 后响应，也就是说每一个中间件都有两次处理时机

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为
1/60*1000ms ＝ 16.7ms

说说你对webSocket的理解？

webSocket是网站开发中进行项目优化的一个重要的板块之一，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅,客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输，websocket服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据;而在websocket出现之前，开发实时web应用的方式为轮询。不停地向服务器发送 HTTP 请求，问有没有数据，有数据的话服务器就用响应报文回应。如果轮询的频率比较高，那么就可以近似地实现“实时通信”的效果

总结

以上就是我对于面试题的一些理解，希望对有疑惑的你有所帮助！