面试题目

1. 简述ES6的新特性

*Default Parameters（默认参数） in ES6
*Template Literals （模板文本）in ES6
*Multi-line Strings （多行字符串）in ES6
*Destructuring Assignment （解构赋值）in ES6
*Enhanced Object Literals （增强的对象文本）in ES6
*Arrow Functions （箭头函数）in ES6
*Promises in ES6
*Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
*Classes（类） in ES6
*Modules（模块） in ES6

2. Koa 与 Express 比较

1. 语法区别

experss 异步使用 回调
koa1 异步使用 generator + yeild
koa2 异步使用 await/async

2. 中间件区别

koa采用洋葱模型，进行顺序执行，出去反向执行，支持context传递数据
express本身无洋葱模型，需要引入插件，不支持context
express的中间件中执行异步函数，执行顺序不会按照洋葱模型，异步的执行结果有可能被放到最后，response之前。
这是由于，其中间件执行机制，递归回调中没有等待中间件中的异步函数执行完毕，就是没有await中间件异步函数

3. 集成度区别

express 内置了很多中间件，集成度高，使用省心，
koa 轻量简洁，容易定制

3. 什么是服务端渲染，服务端渲染的优点

服务端渲染：在早期的时候，由于页面比较简单，前后端分离还没有做的比较完善，所以当时一般页面渲染还是在服务端完成html文件的拼装，然后浏览器接收到这个文件，就可以直接解析展示。
如今前端页面的复杂性提高，前端已经不再仅仅是普通的页面展示了，现在前端页面功能更加完善，也更加复杂。同时伴随着ajax的兴起，使得现在越来越崇尚前后端分离的开发方式。后端不再提供完整的html页面，而是提供一些API使得前端可以获取需要的json数据，然后前端拿到数据后在前端完成html页面的拼装，然后展示在浏览器上，这就是***客户端渲染***。
优点：
1.前端耗时少。因为后端拼接完了html，浏览器只需要直接渲染出来。
2.有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息，更有利于seo。
3.无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析标准的html页面即可，这样对于
4.客户端的资源占用更少，尤其是移动端，也可以更省电。
5.后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效 。
缺点：
1.不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，则对于前端复杂度高的项目，不利于项目高效开发。另外，如果是服务器端渲染，则前端一般就是写一个静态html文件，然后后端再修改为模板，这样是非常低效的，并且还常常需要前后端共同完成修改的动作； 或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端还需要根据改动的模板再调节css，这样使得前后端联调的时间增加。
2.占用服务器端资源。即服务器端完成html模板的解析，如果请求较多，会对服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实完全交给了一个服务器。

4. React 组件间信息传递

1.父组件向子组件传值：父组件通过属性进行传递，子组件通过props获取
2.子组件向父组件传值：触发父组件传给子组件的函数传值
3.兄弟组件传值：可以用上面两种方法一点一点方法传给相同父组件在传下去
使用context传递数据
利用redux传递数据

5. 为什么有时连续多次setState只有一次生效？

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

6. React状态管理工具都有哪些？redux actionCreator都有什么？

一种是将Redux进一步封装的如dva、refrect、refast等，二是采用observable的方案如MobX、dob
actionCreator就是定义个函数然后传入一个数据并返回一个带有action对象，然后供组件使用

7. 标题什么是高阶组件、受控组件、非受控组件？

高阶组件
是个函数，输出结果是个新组件，可以对输入的组件就行加工，并返回一个具有特定功能的组件。
受控组件
相当于input中的value值通过state值获取，onChange事件改变state中的value值。实现了双向绑定，任意一方的数据发生变化，另一方也会随之改变 。
非受控组件
不需要设置对应的state属性，可通过ref来直接操作真是的dom。

8. vuex和redux的区别

表面区别就是vuex是通过将store注入到组件实例中，通过dispatch和commit来维护state的状态，并可以通过mapstate和this.$store来读取state数据。而redux则是需要通过connect将state和dispatch链接来映射state并操作state。redux没有commit，直接通过dispatch派发一个action来维护state的数据。并且只能通过reducer一个函数来操作state。
rudex使用的是不可变数据；vuex是可变的数据。
rudex每次都是返回一个新的state；而vuex是直接改变state。

9. http的缓存机制

关于HTTP的缓存机制来说，这些缓存策略都会体现在HTTP的头部信息的字段上，这些策略会根据是否需要重新向服务器发起请求可以分为强缓存和协商缓存两大类。
强缓存：请求某个资源文件时，服务端就会在response
header中对该资源文件做缓存配置：cache-control，常见的设置是max-age public private
no-cache no-store immutable等。当用户打开某页面，浏览器会判断缓存是否过期，没有过期就会从缓存中读取数据。
协商缓存：协商缓存就是需要客户端和服务器两端进行交互的；每次请求回来的response
header中的etag和last-modified；下次请求带上，服务端会进行标识和对比，如果资源更新了就会返回新的资源和对应的etag和last-modified；反之资源没有变。

10. 什么是数组扁平化，实现扁平化的方法有哪些？

数组扁平化，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层数组。
arr.flat(Infinity)
底层原理：通过foreach遍历和递归的方式进行一层一层的遍历。
arr.toString.split(“,”)
reduce和递归来实现
foreach遍历和递归

11. 什么是回流和重绘

回流：当rendertree的一部分或者全部元素因改变了自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化,导致需要重新构建页面的时候，回流就产生了。
重绘: 当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘。
结论：回流必定触发重绘，而重绘不一定触发回流。

12. webpack中在使用babel插件处理js代码的时候，为什么使用polyfill，如何使用polyfill ？

因为在使用preset_env 处理js代码时，无法将所有的ES6的语法全部转换成ES5语法，就比如promise、array.from以及实例方法都无法转换，这个时候需要加入垫片。
在入口文件引入@babel/polyfill ，会污染全局环境
在配置文件中的entry中写 ，也会污染全局环境
可以配置@babel/preset-env useBuiltIns接收3个参数
entry：不管代码 有没有用到，只要目标浏览器不支持的都会引入对应的polyfill；自动引入polyfill模块
usage: 根据代码的使用情况，按需引入；自动引入polyfill模块
false：不会自动引入polyfill模块
corejs 3.0以后的版本； 如果参数为entry，则需要在入口文件中引入两个包

13. HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 。HTML5 提供了两种本地存储方案： localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。 sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

14. 使用箭头函数应注意什么？

（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的）
（2）不能够使用arguments对象
（3）不能用作构造函数，所以不能使用new命令，否则会报错
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数

15. 简述es6的新特性

1.增加块作用域
2.增加let const
3.解构赋值
4.函数参数扩展 （函数参数可以使用默认值、不定参数以及拓展参数）
5.增加class类的支持
6.增加箭头函数
7.增加模块和模块加载
8.增加新的API math, number, string, array, object

16. 请介绍一下Node事件循环的流程

在进程启动时，Node便会创建一个类似于while(true)的循环，每执行一次循环体的过程我们称为Tick。每个Tick的过程就是查看是否有事件待处理。如果有就取出事件及其相关的回调函数。然后进入下一个循环，如果不再有事件处理，就退出进程。

17. Redux遵循的三个原则是什么？

单一数据来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。
使用纯函数进行更改：为了指定状态树如何通过操作进行转换，需要用纯函数。纯函数是那些返回值仅取决于其参数值的函数。

18. 为什么JavaScript是单线程？

作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，浏览器不知道该以哪个线程为主，单线程这已经成了这门语言的核心特征。
为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

19. map和forEach的区别？

map和forEach都是对数组的遍历，但是他们是有区别的，forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

例如，在react经常需要使用数据进行渲染元素的时候，那么这时候，我们就需要使用map了,返回一个新的元素的数组进行渲染。而forEach就是不需要返回新的数据，需要在原数组的每一项上修改的时候，我们经常会用到。

20. redux的工作流程？

简明来说，首先创建一个store分别管理相应的reducer,在组件内部派发action之后，看是否需要中间件进行处理，如果是ajax等异步操作，可以放入thunk或者saga等中间件，进行处理之后然后传到reducer之中，如果组件里面需要数据,可以通过connect高阶组件或者getState()获取reducer里面的数据。

21. 容器组件和UI组件的区别

容器组件里面有逻辑操作，可以提供数据和行为给UI组件，并且容器组件时有状态的
UI组件时无状态的，只可以通过props去接受数据，主要用来展示组件内容，是无状态的

22. react中context的使用？

context，通过createContext创建一个context，在所有组件的最外层包裹一个provider,然后通过给provider绑定数据以及方法，然后后代组件可以通过tatic contextType 或者consumer来获取context里面的值，如果是consumer的话，那么就是使用一个回调函数，回调函数的参数就是context的值

23. React路由加载的几种方式？

路由组件的加载一共有三种方式，component\render\children
component可以直接引入组件名，也可以通过一个回调函数去引入一个组件
render只可以通过回调函数引入组件
children和render一样也是通过一个回调函数组件，但是children引入的组件，无论路径是否匹配都显示引入的组件，最后通过match对象的match属性去对应相应的路由，常用于高亮效果等！

24. 提供网页加载速度的方式？（优化）

1、首先可以减少http的请求
2、首页可以使用服务端渲染
3、懒加载图片
4、添加Expires请求头，缓存http访问的组件，下次访问的时候减少不必要的http请求，提高加载速度。
5、使用CDN，减小服务器负担
6、启用GZIP压缩，压缩必要资源，从而给用户发送最小的HTML文件和CSS/JS等资源

25. 节流和防抖

防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供用户选择。
节流：就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率
滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。

26. html5的语义化标签给我们带来了啥好处

结构清晰
可读性好
便于团队维护开发
搜索引擎可根据标签的语言确定上下文和权重问题，
容易被搜索引擎抓住机会

27. computed和watch的区别？

computed：
如果不使用计算属性，那么 message.split(’’).reverse().join(’’) 就会直接写到 template 里，那么在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而且计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会重新计算。而且他返回的是一个值，同时也不能进行异步操作。所以就有了watch。
watch也是用来监听数据的变化的，watch与computed的区别就是它支持异步，不支持缓存。而且watch在第一次监听的时候不会触发，想要触发必须得在第二个参数上面配置（immeiate）。此外还有另外一个参数是deep，可以用来深度监听一个数组或者是对象。

28. v-if 和 v-show 区别

v-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS，DOM 还是一直保留着的。所以总的来说 v-show 在初始渲染时有更高的开销，但是切换开销很小，更适合于频繁切换的场景。
v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时，组件就不会被渲染，直到条件为 true，并且切换条件时会触发销毁/挂载组件，所以总的来说在切换时开销更高，更适合不经常切换的场景。
并且基于 v-if 的这种惰性渲染机制，可以在必要的时候才去渲染组件，减少整个页面的初始渲染开销。

29. vue中的key

   key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。所以key 的作用主要是为了高效的更新虚拟 DOM。

30. git怎么删除远程和本地分支

1. git branch 查看本地分支
2. 删除本地分支，删除需要删除的分支之前切换到别的分支然后执行，git branch --delete 分支名字
3. 删除远程分支，git push origin --delete 分支的名字。

31. div+css 的布局较 table 布局有什么优点？

改版的时候更方便 只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

a> div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
b> table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

32．vue路由懒加载方式；

方法一 resolve
这一种方法较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载

方法二 官网方法
vue-router在官网提供了一种方法，可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身，而我们又可以使用import来导入组件。

方法三 require.ensure
这种模式可以通过参数中的webpackChunkName将js分开打包。
component: resolve => require.ensure([], () => resolve(require(’@/components/’+componentName)), ‘webpackChunkName’)

结合 Vue 的异步组件和 Webpack 的代码分割功能，把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

33．redux工作流程；

首先，用户发出 Action。然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。State 一旦有变化，Store 就会调用监听函数。listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

34．Es6 module和commonjs的区别；

CommonJS和ES6 Module是目前使用较为广泛的模块标准。它们的主要区别在于
1.前者建立模块依赖关系是在运行时，后者是在编译时；
2.在模块导入方面，CommonJS导入的是值拷贝，ES6 Module导入的是只读的变量映射；
3.ES6 Module通过其静态特性可以进行编译过程中的优化，并且具备处理循环依赖的能力。

35．hash、chunkhash、contenthash三者区别

一、hash（所有文件哈希值相同，只要改变内容跟之前的不一致，所有哈希值都改变，没有做到缓存意义）
二、chunkhash（同一个模块，就算将js和css分离，其哈希值也是相同的，修改一处，js和css哈希值都会变，同hash，没有做到缓存意义）
三、contenthash（只要文件内容不一样，产生的哈希值就不一样）

36．React 中 keys 的作用是什么？

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

37. React中keys的作用是什么

优化性能，避免渲染无辜DOM节点

38. 为什么我们要用hook

避免一个方法在多个生命周期执行

39. redux中使用setState不能立即获取值，怎么办

传入函数或者在第二个参数写一个回调‘’
‘redux中state不可变性
有利于react渲染节点。避免深遍历造成性能浪费

40. 强缓存与协商缓存的区别

强缓存客户端不需要重复发HTTP请求，协商缓存则不发送HTTP请求

41. Vue中单项数据流

单项数据流主要是父组件传给子组件的数据父组件只能渲染而不能修改。

42. Vue组件中的data为什么是一个函数，根组件却是对象

非根组件用函数则多个组件共用一个变量造成变量共享

43. https://blog.csdn.net/qq_40060770/article/details/107956197

7、React 新老版生命周期函数
8、从启动webpack构建到输出结果经历了一系列过程，它们是什么
9、vue react 怎么检测数据变化的
10、instanceof 的原理是什么？
11、React中怎么让setState同步更新？
12、什么是immutable, 为什么要使用它

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

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

一、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

二、 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就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

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

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

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

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

2，前后端分离

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

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

2，初次加载时耗时多

3，页面复杂度提高很多

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

加载渲染过程

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

子组件更新过程

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

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

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

47. 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 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

48. Vue中响应式的原理

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

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

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

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

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

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

49. 虚拟DOM为什么会提高性能

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

50. https://blog.csdn.net/qq_41163670/article/details/108055179

7、vue中 computed 的原理
8、webpack 优化有哪些
9、跨域的解决方案
10、React的diff算法，规则是什么？
11、为什么不建议在 componentWillMount 做Ajax等操作？
12、介绍React hooks

51. https://blog.csdn.net/qq_41583484/article/details/107997863

1、单行或多行文本溢出展示省略号的实现方法
2、你知道ES6中的Generator和yiled吗，在实际开发中有使用过吗
3、redux处理的中间件有什么作用，使用过哪些redux处理的中间件？有什么优缺点
4、如何在react中构建一个弹出的遮罩层
5、简述微信支付的业务流程
6、简单描述一下装饰器

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

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

53. setTimeout、Promise、Async/Await 的区别?

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

54. call 和 apply 区别是啥？

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

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

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

与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

56. 什么是柯里化，并说明柯里化的好处？

柯里化是一种模式，其中一个具有多个参数的函数被分解成多个函数，当被串联调用时，这些函数将一次累加一个所需的所有参数。这种技术有助于使用函数式编写的代码更容易阅读和编写。需要注意的是，要实现一个函数，它需要从一个函数开始，然后分解成一系列函数，每个函数接受一个参数。

57. 简述微信小程序的原理？

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

https://blog.csdn.net/qq_41583484/article/details/107997863

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

css 实现
单行文本

固定容器宽度

white-space：nowrap

work-break:keep-all

overflow:hidden

text-overflow:ellipsis

​ 多行文本

添加line-clamp属性

转成弹性布局

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

59. 你知道ES6中的Generator和yiled吗，在实际开发中有使用过吗?

Generator的初衷是用来解决异步的嵌套问题

语法: 使用 * 声明一个函数，这个函数在调用时会返回一个Generator对象，使用 * 声明的函数内部使用yield生成阻塞行为，yield后面声明的内容，配合一个外部调用的next方法来控制被阻塞代码的执行，并且yiled会将Generator中的value值设置成为刚刚被阻塞的内容的返回值，一个yiled配合一个next使用。

​ 所以在使用时通常可以将异步处理放在yiled后生成一个阻塞，配合一个返回值是promise的函数进行异步处理操作，需要使用两次的next，第一次是调用yiled后的函数，第二次是获得异步操作的结果

​ 实际应用:redux中间件的saga中takeEvery内部封装了这两部操作，两步并作一步直接让开发者拿到结果

60. redux处理的中间件有什么作用，使用过哪些redux处理的中间件？有什么优缺点

redux是相当于一个仓库，配合react使用时能够成为一种状态管理工具，但是redux本身的特性规定其在派发信息时只能派发同步并且是扁平化的内容，这样在redux中若想实现异步操作就会有很大的局限性，中间件等同于一个仓库管理员的身份，每次想去仓库中取货，必须经过管理员去取钥匙，redux-thunk，redux-saga是两个常用的中间件，通过中间件能够增强redux本身的功能，redux-thunk中能够处理函数，其内部机制就是识别派发的参数类型，若是函数则直接调用，若是对象直接进行派发的操作，redux-saga则在内部封装了一些方法能够拦截派发的请求，到内部执行异步操作后，再去处理数据。

redux-thunk直接函数，较为直接，但是由于派发内容可以是扁平的对象，也可以是函数，所以不易于维护。

redux-saga仍旧派发扁平对象，符合redux派发规则，但是实现的逻辑较为复杂，其实就是在内部封装了处理异步的行为。

61. 简述微信支付的开发原理

微信支付存在两种模式的实现，其中第二种模式较为简洁且易于实现
基本逻辑:
首先，用户需要在开发者的系统中下单，完成下单行为后向开发者的服务器发送请求，这个请求能够携带商品信息等数据，在服务器接收到请求时，需要向微信服务器发送请求，以完成一个预支付的行为，在发送请求前需要按照微信服务器的规则生成一些必要的参数，微信服务器在接收到请求时，会对签名进行验证，随后会返回一个支付url，开发者服务器需要将连接处理成为二维码供用户扫码支付
之后，用户在扫码后微信服务器会验证连接真实性及有效性，在完成支付行为后，微信服务器会以一种异步的形式，向开发者服务器发送请求，以通知开发者服务器支付状态，方便开发者执行后续操作。

62. 如何在react中构建一个弹出的遮罩层

实现方式:

组件库
直接使用antdesign组件库中的遮罩层

react portal
portal是ReactDOM上的一个方法，能够更改某组件或节点的挂载位置
我们在需要构建弹出层的时候，将某个元素利用portal直接提升到与根组件并列的位置上，加一些覆盖的样式，就能够实现一个弹出层

为了便于复用，我们可以将portal封装在一个高阶组件或者装饰器中

import React from ‘react’
import ReactDOM from ‘react-dom’

function withModel (WrapperedComponent) {
return class extends React.Component {
render() {
return (
ReactDOM.createPortal(
<WrapperedComponent {…this.props}>,
document.querySelector(‘body’)
)
)
}
}
}

export default withModel

63. 装饰器是什么

装饰器是ES6中一种增强类的功能函数，基本实现就是传入一个类，在修饰器加工后返回一个具有修饰器中功能的新的类，常用在react中，类似于高阶组件的实现，但时没有了高阶组件的嵌套结构，语法上清晰明了
但是在webpack环境中如果使用修饰器，需要另外载入一些解析修饰器语法的babel

"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.5"

64. https://blog.csdn.net/weixin_44157964/article/details/107945951

1、构造函数,实例对象,原型对象三者的关系
2、xss和csrf的原理及防御措施
3、混合开发的原理
4、v-on可以绑定多个方法吗
5、客户端渲染和服务端渲染的区别
6、React类组件和函数组件有什么区别
7、flex布局有哪些常用的属性？
8、JS中常见的设计模式及其使用场景
9、Vue中template的编译过程
10、React的事件机制？
11、React-router-dom内部是怎么实现的，怎么做路由守卫？
12、小程序与普通网页开发有什么区别？
。。。

序号 11 开始