前端面试题–某易26问

1、介绍redux，主要解决什么问题

答：redux ：可预测的状态管理机，随着单页面应用的需求越来越复杂，组件间的数据传递和状态管理越来越复杂。Redux 通过一系列约定的规范将修改应用的状态标准化，Redux应用需要遵循三大原则：1，唯一数据源 2，保持应用状态只读 3，应用状态的修改要通过纯函数来完成。
Redux主要用来解决大型web项目间复杂数据传递与状态管理的问题。

2、⽂件上传如何做断点续传

答： a.将文件切片上传，每片都带有一个hash值+下标，然后并发向后端发送
b.后端将文件切片存储在临时文件夹里
c.断点续传时，向服务器端请求，返回后端已经接受完毕的分片
d.前端重新发送切片，并跳过已经发送完毕的切片
e.所有分片发送完毕，前端发送请求告知分片发送完毕，后端组合分片

3、表单可以跨域吗

答：可以，跨域限制是浏览器为了安全和隐私机制设定的限制。Form表单提交数据，请求到了另一个域里，原页面的脚本无法获取新页面里的内容，Form表单会刷新页面也不会把返回结果给js，所以浏览器认为安全。

4、promise、async有什么区别

答：a.promise和async都能够解决异步任务的顺序问题，但是promise是通过链式调用来完成的，而async/await能使异步任务的写法像同步任务一样
b.async 后接一个函数，函数的返回值就是一个成功状态的promise对象

5、搜索请求如何处理（防抖）

答：监听输入框的onChange事件，做防抖处理，在onChange触发后一定时间间隔内没有再次触发，则发起Ajax请求。

#####6、搜索请求中⽂如何请求 #####
答：a.调用js方法encodeURI，将url编码，然后请求
b. 修改服务器编码集,设置为 utf-8

7、介绍观察者模式

答：观察者模式是指对象间存在一对多的依赖关系，当一个对象的状态改变后，所有依赖他的对象都得到通知并自动更新。
观察者模式是一种对象行为模型，优点：
1.降低了目标和观察者之间的耦合关系，两者之间是抽象耦合关系
2.目标与观察者之间建立了一种触发机制
缺点：
1.目标和观察者之间的依赖关系并没有完全解除
2.观察者对象很多时，通知的发布会花费很多时间

8、观察者和订阅-发布的区别，各⾃⽤在哪⾥？

答：订阅-发布模式里，发布者向某个信道发布一条消息，订阅者绑定这个信道，当有消息发布至信道就会接收一条通知。
区别：订阅-发布模式，是完全解耦的，两者仅共享一个信道；观察者模式是抽象耦合关系，不完全解耦。
观察者模式，多应用于单个应用内部
发布-订阅模式，多应用于跨应用模式

9、介绍中介者模式

答：中介者模式，定义一个中介对象来封装一系列对象的交互，使原有对象之间的耦合松散，且可以独立改变他们之间的交互，又被称作调停模式。中介者模式是一种对象行为模式，
优点：降低了对象之间的耦合，使得对象能够独立被复用。将对象之间的一对多关联转变成一对一关联，提升系统灵活性。

10、介绍react优化

答：1.减少不必要渲染
a 使用key值
b 类组件里继承自pureComponent，函数组件使用React.memo 包裹
c 分别使用useMemo和useCallback 分别缓存值和函数
d.使用shouldComponentUpdate阻止不必要的渲染
2.使用React.Fragment 来避免向 DOM 添加额外的节点
3.使用 React.Lazy 延迟加载组件，实现组件的按需加载。即动态调用import()
4.长列表优化，懒加载+分页 或者 虚拟列表

11、介绍http2.0

答：1.二进制分帧。在应用层和运输层之间添加了一个二进制分帧层，将传输信息分成更小的消息和帧，并对他们实现二进制格式编码运输，改进传输性能。
2.多路复用。意味着很多流的数据包能混合在一起通过同一条tcp连接上传输，实现真正的并行传输
3.压缩首部。压缩报文首部减少传输大小，并缓存首部避免重复的首部传输。
4.服务器推送

12、通过什么做到并发请求？

答：Promise.all([p1, p2, p3]).then(res =>{})

13、http1.1是如何复⽤TCP连接？

答：http1.1里通过设置报文首部行字段 connection：keep-alive来实现连接复用，使得可以在一条TCP 连接上完成所有的http请求。

14、介绍service worker

略

15、介绍css3中position:sticky

答：position：sticky又称粘性布局。以top,left,right,bottom为阈值，超过阈值表现为相对定位，反之，表现为相对于父元素的固定定位。

16、使用Redux请求中间件如何处理并发?

答：使用redux-thunk中间件，使得dispatch()里能接收一个内含有异步操作的函数，这个异步函数里使用promise发出请求，然后使用Promise.all([p1,p2])处理并发,拿到所有成功状态下的返回结果。

17、介绍Promise，异常捕获

答：Promise是异步编程解决方案之一，Promise是一个容器保存着异步操作的结果。Promise对象有三种状态，pending(进行中)，resolved(已成功)，rejected(已失败)。通过new Promise((resolve, rejecte)=>{})来构造Promise对象的实例，传入函数作为参数，当异步任务执行成功调用resolve(res)送出返回值，失败则调用reject()抛出异常。通过链式调用(也就是实例对象调用then())接收成功状态的返回值或接收异常，再次返回一个Promise对象的实例。
Promise.prototype.catch()用来捕捉异常，实际上也就then(null,(error)=>{})的变形。

18、介绍position属性包括CSS3新增

position:fixed,固定定位,相对于屏幕视口布局，元素从正常文档流中移除。
position:static,静态定位(默认)，处于正常文档流中，top right bottom left不会生效。
position:relative,相对定位，元素相对于正常文档流中的位置发生偏移，且占据原来的位置(原位置会留白)。
position:absolute,绝对定位，元素相对于最近的非static定位的祖先元素发送偏移，且从文档流中移除。
position：sticky又称粘性布局。以top,left,right,bottom为阈值，超过阈值表现为相对定位，反之，表现为相对于父元素的固定定位。

19、浏览器事件流向

答：浏览器事件流向分为两个阶段，捕获和冒泡。捕获阶段是指触发事件先从Dom树的根节点触发(也就是document)，向下层层传递到执行事件的目标节点。冒泡阶段是指从Dom树的子节点，也就是从目标节点向上传递到document。不冒泡事件如blur,focus，mouseenter，mouseleave等是在捕获阶段触发，冒泡事件默认是在冒泡阶段触发。

20、介绍事件代理以及优缺点

答：事件代理是指将事件的触发及触发执行函数绑定在祖先元素上，触发事件时向上冒，由祖先元素代为执行。
优点：1、避免给每一个子元素都绑定同一类型的事件，代码清晰，结构优雅。
2、方便动态删除元素时，内存泄漏问题。
3、降低js与Dom的耦合程度。
缺点：如果所有的事件都使用事件代理时，容易形成误判？但我觉得通过自定义属性可以避免?

21、React组件中怎么做事件代理？

答：React基于virtual Dom 实现了一个SyntheticEvent(合成事件层)，我们定义的事件处理器会接收一个SyntheticEvent对象的实例，这个实例符合W3C的标准，且不存在IE兼容性的问题，且拥有和原生浏览器事件一样的接口，支持事件的冒泡机制。
React底层主要对合成事件层做了两件事请：事件委派和自动绑定。
事件委派：React并不会把事件处理函数绑定到真实的Dom节点上，而是把所有事件绑定到结构的最外层(或许是document节点？)并使用一个统一的事件监听器，这个事件监听器维持了一个映射用来保存所有事件监听和处理函数，组件挂载、卸载时就在这个监听器里添加或删除一些对象。事件触发时，先被这个统一的事件监听器处理，然后在映射里找到真正的处理函数并调用。对于冒泡事件，冒泡到document节点上才会触发，非冒泡事件，在捕获时触发。
自动绑定：在React组件里的每个方法的上下文都指向组件的实例，但是在使用ES6 class或者函数组件时，这种绑定就不复存在了，需要手动绑定。

22、React组件中做事件代理的原理？

答：同上

23、介绍this各种情况？

答：1、事件监听处理函数里的this指向触发事件的Dom节点。
2、函数调用时，函数里的this指向它的调用者。
3、ES6 class里的this指向class的实例。
4、箭头函数里的this，在定义时确定，this也就是它的上下文
5、非严格模式下，this指向window,严格模式下 this等于undefined。

24、前端怎么控制管理路由？

答：以React的SPA来举例，基于浏览器的history对象来实现的，监听URL的改变，将新的URL生成location对象，加入到history stack 里实现路由跳转。

25、使⽤路由时出现问题如何解决？

未知

26、React怎么做数据的检查和变化？

暂无

赏

谢谢你请我吃糖果

微信