前端面试题整理（三）

1.Vue组件通信？

1.可是使用vuex插件实现组件之间的通信

2.将数据绑定在组件实例上进行父子组件传递

3.也可以使用路由传参

4.将数据进行本地存储

5.使用发布与订阅publish

2.说说你对vuex的理解？

Vuex 是专门为 Vue.js 设计的状态管理库。

每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，包含应用中大部分的 state（状态）。Vuex 和 单纯的全局对象的区别：

        1.Vuex 的状态存储是响应式的。Vue 组件从 store 中读取状态数据源，若 store 中的 state 发生变化，那么相应的组件也会得到高效的更新。
        2.store 中的 state 是无法直接改变的。只能通过唯一的途径就是 commit mutation（提交变化）

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

通过梳理生命周期，明确周期函数职责，确认什么时候该做什么事儿，以此来避免坑。

getDerivedStateFromProps 容易编写反模式代码，使受控组件与非受控组件区分模糊。

shouldComponentUpdate 通过返回 true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化。

如果在 componentWillUnmount 函数中忘记解除事件绑定，取消定时器等清理操作，容易引发 bug。

如果没有添加错误边界处理，当渲染发生异常时，用户将会看到一个无法操作的白屏，所以一定要添加。

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

虚拟 DOM 是 React 的一大亮点，具有 batching(批处理) 和高效的 Diff 算法。

这让我们可以无需担心性能问题而” 毫无顾忌” 的随时“ 刷新” 整个页面，使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能 跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行

5.调和阶段setState干了什么？

  (1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。
（2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；
（3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；
（4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

6.React组件之间如何通信？

1. 将数据绑定在组件实例上
2. 使用redux
3. 将数据本地存储
4. 使用发布与订阅publish

7.说说redux的实现原理是什么 ?

 1.将应用的状态统一放到state中，由store来管理state。
2.reducer的作用是返回一个新的state去更新store中对用的state。
3.按redux的原则,UI层每一次状态的改变都应通过action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state，这样就完成了一次状态的更新
4.subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行
5.可以添加中间件对提交的dispatch进行重写

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

这个函数允许我们将 store 中的数据作为 props 绑定到组件上

connect 的第二个参数是 mapDispatchToProps

由于更改数据必须要触发action, 因此在这里的主要功能是将 action 作为props 绑定到 组件上

Provider就是react-redux中的一个组件, Provider 做的事情也简单, 它就是一个容器组件, 会把嵌套的内容原封不动作为自己的子组件渲染出来. 它还会把外界传给它的 props.store 放到 context, 这样子组件 connect 的时候都可以获取到.

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

jsx本质就是下面这个函数React.createElement的语法糖，所有的jsx语法都会最终经过babel.js转化成为React.createElement这个函数的函数调用

10.说说你对redux中间件的理解？常用的中间件有哪些？ 

Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理

前面我们了解到了Redux整个工作流程，当action发出之后，reducer立即算出state，整个过程是一个同步的操作

那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件，其本质上一个函数，对store.dispatch方法进行了改造，在发出 Action和执行 Reducer这两步之间，添加了其他功能

常用的redux中间件，如：redux-thunk：用于异步操作、edux-logger：用于日志记录

中间件都需要通过applyMiddlewares进行注册，作用是将所有的中间件组成一个数组，依次执行然后作为第二个参数传入到createStore中

11.props和state相同点和不同点？render方法在哪些情况下会执行？

         props是一个从外部传进组件的参数，由于React具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据，它是不可改变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变，props除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数

        state主要作用是用于组件保存，控制及修改自己的状态，它只能在constructor中初始化，state是可以被改变的，state放改动的一些属性，比如点击选中，再点击取消，类似这种属性就放入带state中，注意：没有state的叫做无状态组件，多用props少用state，多写无状态组件，注意：修改state的值时，必须通过调用setState方法，当我们调用this.setState方法时,React会更新组件的数据状态，并且重新调用render方法

        render方法在类组件抵用setState修改状态时；函数组件通过useState hook或者通过useState修改状态时;当我们的数据发生改变render方法就会触发

12.react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

新增的钩子函数

        getDerivedStateFromProps：这个钩子的作用其实就是从props中获取衍生的state

   getSnapshotBeforeUpdate：这个钩子的意思其实就是在组件更新前获取快照，此方法一般结合componentDidUpdate使用，getSnapshotBeforeUpdate中返回的值将作为第三参数传递给componentDidUpdate

react一共四个will将来时的钩子，除了componentWillUnmout之外，componentWillMount、componentWillReceiveProps、componentWillUpdate这三个钩子均被废弃。

react中生命周期钩子虽然多，但事实上常用的就那么几个，

13.CDN的特点及意义？

 CDN 意为内容分发网络，是基于现有网络的智能虚拟网络，分布在世界各地的边缘服务器上。基本思路是避免互联网上可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快更稳定。

CDN 具有的主要功能
        1.节省骨干网带宽，降低带宽需求；

        2.提供服务器端加速，解决大量用户访问导致的服务器过载问题；

        3.服务提供商可以利用Web Cache技术将用户访问的网页和对象缓存在本地，这样对相同对象的访问就不需要占用骨干网的出口带宽，相应的用户访问网页的时间要求也增加了；

        4.可以克服网站分布不均的问题，降低网站自身的建设和维护成本；

        5.减少“通信风暴”的影响，提高网络访问的稳定性。

CDN 的特点
        1.本地缓存加速:提高了企业网站(尤其是包含大量图片和静态页面的网站)的访问速度，大大提高了上述网站的稳定性。

        2.镜像服务:消除了不同运营商之间互联瓶颈带来的影响，实现了跨运营商的网络加速，保证了不同网络的用户都能获得良好的接入质量。

        3.远程加速:远程访问用户根据DNS负载均衡技术智能自动选择缓存服务器，选择最快的缓存服务器加速远程访问。

        4.带宽优化:自动生成服务器的远程镜像缓存服务器。远程用户访问时，可以从缓存服务器读取数据，减少远程访问的带宽，分担网络流量，减轻原WEB服务器的负载。

        5.集群抗攻击:广泛分布的CDN 节点加上节点间的智能冗余机制，可以有效防止黑客入侵，降低各种D.D.o.S攻击对网站的影响，同时保证更好的服务质量。

14.什么是闭包？

 一个函数的作用域可以访问另一个函数的局部变量，这个变量所在的函数就是闭包函数

闭包使得内部函数可以访问外部函数的属性（变量或方法）

闭包（closure）指有权访问另一个函数作用域中变量的函数。

闭包：

• 作用：延伸变量的作用范围。
• 变量不会销毁（核心作用）
• 变量什么时候不会销毁：变量被引用并且有内存
• 闭包的缺点：内存泄漏（栈溢出）

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

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL的DNS缓存记录。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接（三次握手）。

5、HTTP发起请求。

6、服务器处理请求，浏览器接收HTTP响应。

7、渲染页面，构建DOM树。

8、关闭TCP连接（四次挥手）。

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

浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上，浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息

浏览器内核又可以分成两部分：渲染引擎和JS引擎

• 渲染引擎：负责获取网页的内容并显示，不同的浏览器内核对网页的解析渲染也不同
• JS引擎：负责解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果

IE：Trident内核，也是俗称的IE内核
Chrome：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核
Firefox：Gecko内核，俗称Firefox内核
Safari：Webkit内核
Opera：最初是自己的Presto内核，后来是Webkit，现在是Blink内核
360、猎豹：IE+Chrome双内核
搜狗、遨游、QQ浏览器：Trident（兼容模式）+Webkit（高速模式）
百度、世界之窗：IE内核
2345浏览器：以前是IE内核，现在也是IE+Chrome双内核

 17.清除浮动的几种方式？

1.父元素添加 overflow: hidden

2.:after 伪元素法，为父元素清除浮动

3.:after和:before双伪元素清除浮动

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

Koa是一个精简的node框架，被认为是第二代Node框架，其最大的特点就是独特的中间件流程控制，是一个典型的洋葱模型，它的核心工作包括下面两个方面：

将node原生的req和res封装成为一个context对象。

基于async/await的中间件洋葱模型机制。

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

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

20.说说你对webSocket的理解？

webSocket是html5提供的与浏览器与服务器进行网络交互，他的特点就是服务器可以向客户端传递消息，客户端也可以向服务器发送消息