2020秋季前端面试题2

React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的Key值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React还需要借助Key值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

vue和 react 怎么检测数据变化的

Vue
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

React
react状态变化只能通过setState,调用setState就会更新状态重新渲染dom

React中怎么让setState同步更新？

回调，promise,async+await

回调
setState函数的第二个参数允许传入回调函数，在状态更新完毕后进行调用，例如下面的这个例子

this.setState({
      data: '666'
    }, () => {
      console.log('加载完成')
    });

promise
利用promise的特性，可以使用promise封装一个函数去一劳永逸的解决这个问题

setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
  }

async+await
相当于promise的优雅版，我们可以利用await"等一等"的特性去让程序等待await后面的函数做完以后再执行下面的代码(当然，await必须要配合async使用),例如下面的小例子

async myfun(){
await this.setState({
   data: '666'
});
}

你都做过哪些Vue的性能优化

SPA 页面采用keep-alive缓存组件

在更多的情况下，使用v-if替代v-show

第三方模块按需导入

服务端渲染SSR

压缩代码

Tree Shaking

sourceMap优化

服务端开启gzip压缩

nextTick知道吗，实现原理是什么

nextTick批量异步更新策略，一句话概括在下次DOM更新循环结束之后执行延迟回调。它主要是为了解决：例如一个data中的数据它的改变会导致视图的更新，而在某一个很短的时间被改变了很多次，假如是1000次，每一次的改变如果都都将促发数据中的setter并按流程跑下来直到修改真实DOM，那DOM就会被更新1000次，这样的做法肯定是非常低效的。

而在目前浏览器平台并没有实现nextTick方法，所以Vue.js 源码中分别用 Promise、setTimeout、setImmediate 等方式定义了一个异步方法nextTick，它接收的是一个回调函数，多次调用nextTick会将传入的回调函数存入队列中，当当前栈的任务都执行完毕之后才来执行这个队列中刚刚存储的那些回调函数，并且通过这个异步方法清空当前队列。

什么是 JSX

JSX是javascript的语法扩展。它就像一个拥有javascript全部功能的模板语言 在里面可以使用js代码{}

它实现的原理就是react封装了createElement（第一个参数是 标签名，第二个参数是对象 包含了所有的属性，第三个是 子节点）。

jsx到真实dom的历程：
jsx代码 ==》React.createElement ==》 虚拟dom ==》 ReactDOM.render ==》真实dom

跨域的解决方案

跨域问题来源于浏览器同源策略的限制问题导致的

而浏览器设置同源策略是因为 防止浏览器收到xss 和 csrf的工资

第一种：可以通过JSONP的原理：img ，script，link。

jsonp只支持get的请求方式，也容易受到xss的攻击

第二种：后端设置cros

第三种：服务器代理

第四种：sock

什么是BFC，介绍一下BFC的触发方式以及特性

BFC(Block formatting Context) ，即块级格式化上下文，只要具备以下的某一个条件才可以成为BFC

1、BFC的触发条件

1、根元素 html标签就是一个bfc

2、float的值不为none

3、overflow的值不为visible

4、display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex

5、position的值为absolute或fixed

2、 BFC特性

1、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：可以解释为什么margin上下回重叠，以及解决方法的原因）

2、计算BFC的高度时，浮动元素也参与计算（应用：可以解释为什么高度塌陷可以用overflow：hidden等方法解决）

3、BFC的区域不会与float box发生重叠（应用：自适应两栏布局或者三栏布局<圣杯布局和双飞翼布局>）

4、BFC内部的Box会在垂直方向，一个接一个的放置。

5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

介绍一下单页面和多页面的区别

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：
1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：
1，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

2，初次加载时耗时多

3，页面复杂度提高很多

介绍一下Vue中父子组件生命周期的执行顺序

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

Vue父子组件的通信方式有哪些

Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信

（1）props / $emit 适用 父子组件通信

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 parent / children 适用 父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

parent/children：访问父 / 子实例

（3）EventBus （emit / on）适用于父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）attrs / listeners 适用于 隔代组件通信

attrs：包含了父作用域中不被prop所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于 隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex 适用于 父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

Vue中响应式的原理

Vue的响应式原理也就是数据的双向绑定原理，数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

虚拟DOM为什么会提高性能

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了。

vue中 computed 的原理

在具体讲computed之前，我们需要先知道几个知识点：

Vue.js 的核心包括一套“响应式系统”。
Vue 的响应式，核心机制是 观察者模式。
数据是被观察的一方，发生改变时，通知所有的观察者，这样观察者可以做出响应，比如，重新渲染然后更新视图。
Dep ：每个属性都拥有自己的消息订阅器dep，用于存放所有订阅了该属性的观察者对象。
dep 的属性：
id ：唯一的标识符
subs ：存放订阅者 watcher 的数组
Computed -> 惰性求值的观察者，具有缓存性，当依赖发生变化后，第一次访问 computed 属性，才会计算新的属性，并将该属性挂载到 vm （Vue实例）上
computed原理

原理分析
当组件初始化的时候，computed 和 data 会分别建立各自的响应系统，Observer遍历 data 中每个属性，使用 Object.defineProperty 的 get/set 方法对其进行数据劫持
初始化 computed 会调用 initComputed 函数
new 一个 watcher 实例，watcher 中实例化一个 Dep (消息订阅器) 收集依赖
data -> Dep -> watcher ，通过dep在data和watcher之间建立了依赖
创建的时候不会触发 get 方法

调用 computed 时会触发其 Object.defineProperty 的 get 访问器函数
dirty = true 会调用 watcher.get 方法重新计算，随后 dirty = false
启动依赖收集，调用 watcher.depend() 方法向自身的消息订阅器 dep.subs 中添加订阅者（其他属性的watcher）

当某个属性（依赖项）发生变化，触发 set 拦截函数，然后调用自身消息订阅器dep， dep 通过 notify 遍历当前 dep.subs 通知每个 watcher 更新（watcher.update()）。

介绍React hooks

hooks是react 16.8引入的特性，他允许你在不写 class 的情况下操作 state 和 react 的其他特性。
hook s只是多了一种写组件的方法，使编写一个组件更简单更方便，同时可以自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间共享。
在编写函数组件并意识到需要向其添加一些state 时，就可以使用hook。

hook的钩子：

useState() 保存组件状态
useEffect() 处理副作用
useContext() 获取context的值，减少组件层级
useReducer() 跟 redux 中的数据流的概念非常接近
useCallback 记忆函数
useRef 表示可以定义一个变量, 在函数体内实现唯一的引用
useMemo() 主要用于渲染过程优化，两个参数依次是计算函数（通常是组件函数）和依赖状态列表，当依赖的状态发生改变时，才会触发计算函数的执行。如果没有指定依赖，则每一次渲染过程都会执行该计算函数。
React Hooks 提供为状态管理提供了新的可能性，尽管我们可能需要额外去维护一些内部的状态，但是可以避免通过 renderProps / HOC 等复杂的方式来处理状态管理的问题。Hooks 带来的好处如下：

更细粒度的代码复用，并且不会产生过多的副作用
函数式编程风格，代码更简洁，同时降低了使用和理解门槛
减少组件嵌套层数
组件数据流向更清晰

为什么不建议在 componentWillMount 做Ajax等操作？

一个组件的 componentWillMount 比 componentDidMount 也早调用不了几微秒，性能没啥提高；而且，等到异步渲染开启的时候，componentWillMount 就可能被中途打断，中断之后渲染又要重做一遍（例如：在 componentWillMount 中做 AJAX 调用，代码里看到只有调用一次，但是实际上可能调用 N 多次，这明显不合适）。相反，若把 AJAX 放在 componentDidMount，因为 componentDidMount 在第二阶段，所以绝对不会多次重复调用，这才是 AJAX 合适的位置。

React的diff算法，规则是什么？

React Diff 算法的差异查找实质是对两个JavaScript对象（虚拟DOM和真实DOM）的差异查找，所以React更新阶段才会有Diff算法的运用。
规则：

Web UI中 DOM 节点跨层级的移动操作特别少，可以忽略不计
拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构
对于同一层级的一组子节点，它们可以通过唯一的 id/key 进行区分

单行或多行文本溢出展示省略号的实现方法

css 实现

单行文本

固定容器宽度

white-space：nowrap

work-break:keep-all

overflow:hidden

text-overflow:ellipsis

多行文本

添加line-clamp属性

转成弹性布局

js

多行文本检测子容器和父容器的高度，子容器高度超过父容器时，对子容器的字符串内容进行遍历，配合slice对子容器的高度进行重新更改，当新的容器高度高于父元素高度时，截取最后两个字符并且替换成,"…"

#container {
  border: 1px solid;
  height: 90px; 
  width: 30px; // height 和 width 都必要
  /*overflow: hidden;*/
  overflow-wrap: break-word; // 设置文本溢出容器宽度时换行（但会溢出容器长度）
}
#content {
  line-height: 30px; // 必要，控制文本行数。否则文本会被挤压，行数不定
}

var $container = $('#container')
var $content = $('#container .content')
var str = $content.text()
if ($content.height() > $container.height()) {
  for (var i = 0; i <= str.length; i++) {
    $content.text(str.slice(0,i))
    if ($content.height() > $container.height()) {
      $content.text(str.slice(0,i-2) + "..");
      break;
    }
  }
}

装饰器是什么

装饰器是ES6中一种增强类的功能函数，基本实现就是传入一个类，在修饰器加工后返回一个具有修饰器中功能的新的类，常用在react中，类似于高阶组件的实现，但时没有了高阶组件的嵌套结构，语法上清晰明了

浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

setTimeout、Promise、Async/Await 的区别?

事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

.call 和 .apply 区别是啥？

.call和.apply均用于调用函数，并且第一个参数将用作函数中this的值。但是，.call将逗号分隔的参数作为下一个参数，而.apply将参数数组作为下一个参数。简单记忆法：C用于call和逗号分隔，A用于apply和参数数组。

HTML5 应用程序缓存和浏览器缓存有什么区别？

应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：

<!doctype html>
<html manifest=”example.appcache”>
…..
</html>

React中为什么有时连续多次setState只有一次生效？

原因就是 React会批处理机制中存储的多个 setState进行合并，来看下 React源码中的 _assign函数，类似于 Object的 assign：
React会对多次连续的 setState进行合并，如果你想立即使用上次 setState后的结果进行下一次 setState，可以让 setState 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数。

简述微信小程序的原理？

微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口
微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现
小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理