前端面试题（八）答案版

面试形式：线下面试：一面：30分钟+二面：30分钟

特殊要求：内网开发+自研UI组件库（无文档介绍）+学习能力要求高

面试评价：题目灵活+应用性较强

面试官：项目负责人+前端负责人

面试官的提问大纲：本公司招聘要求+本人简历

面试流程以及面试题：

一面（前端负责人）：

 

1、自我介绍？

   - 我叫xxxxxx，是一名前端开发工程师。毕业于某知名高校计算机专业,有3年丰富的前端开发经验。

   - 熟练掌握HTML、CSS、JavaScript等前端技术,对Vue.js、React等主流框架有深入了解和实践经验。

   - 曾参与过多个大型Web项目的开发和维护工作,积累了丰富的项目经验。擅长前端性能优化、组件化开发、状态管理等。

   - 对前端技术有浓厚的兴趣,热爱学习和研究新技术,能够快速适应新的项目环境。

 

2、项目介绍、难点、解决过程？

   - 我最近参与的一个项目是公司内部的一个ERP管理系统。该系统是基于Vue.js开发的单页应用程序。

   - 项目的主要难点在于:

     1. 大量的业务逻辑和数据交互,需要合理设计数据流和状态管理。

     2. 针对不同业务场景,需要开发大量可复用的UI组件。

     3. 系统涉及大量的表单和表格,对性能优化提出了很高的要求。

   - 我通过以下方式解决了这些问题:

     1. 采用Vuex进行集中式状态管理,合理划分模块和命名空间,提高代码可维护性。

     2. 基于公司的UI组件库进行二次开发和扩展,提高开发效率。

     3. 使用虚拟滚动和懒加载技术优化表格和表单的性能,保证良好的用户体验。

 

3、抢单问题？

   - 为了保证抢单的时效性,可以采用以下方式:

     1. 利用WebSocket或Server-Sent Events技术,实现客户端与服务端的实时双向通信。当有新的订单进来时,服务端能够实时推送给客户端,客户端收到通知后立即进行抢单操作。

     2. 在客户端使用Axios等库进行轮询请求,定期检查服务端是否有新的订单。一旦发现有新订单,立即进行抢单。

     3. 采用分布式锁的机制,当一个客户端抢到订单后,立即在服务端加锁,其他客户端就无法再抢到该订单。

 

4、Vue2修改数组,页面没有发生变化？

   - 在Vue2中,当您直接修改数组元素的值时,Vue无法检测到数组的变化,因此页面不会自动更新。

   - 解决方法:

     1. 使用Vue提供的变异方法,如`push()`、`pop()`、`shift()`等,这些方法可以触发页面更新。

     2. 使用`Vue.set()`或`this.$set()`方法来更新数组元素的值。

     3. 创建一个新的数组并赋值给data属性,这样也可以触发页面更新。

 

5、两个客户端如何实现实时通讯？

   - 可以使用以下技术实现两个客户端的实时通讯:

     1. WebSocket: 基于WebSocket协议,建立客户端与服务端的双向通信通道,能够实现即时、低延迟的数据传输。

     2. Server-Sent Events(SSE): 基于HTTP协议,服务端可以主动向客户端推送数据,客户端只需要监听事件即可。

     3. Long Polling: 客户端发起一个HTTP请求,服务端暂时不返回响应,直到有新数据可用时才返回。客户端接收到响应后立即发起新的请求,形成一个轮询的过程。

   - 对于您的场景,我建议使用WebSocket或SSE技术,可以更好地实现两个客户端的实时通讯需求。

 

6、接口类型？

   - 以下几种常见的接口类型:

     1. RESTful API: 遵循REST架构风格的HTTP接口,提供标准的CRUD操作。

     2. WebSocket API: 实现客户端与服务端的双向实时通信。

     3. 自定义RPC接口: 针对一些复杂的业务场景,可能会设计一些自定义的远程过程调用接口。

   - 不同类型的接口有不同的优缺点,需要根据具体的业务需求来选择合适的接口类型。

 

7、Flex布局和Table布局的区别？

   - Flex布局:

     1. 基于弹性盒子模型,能够灵活控制容器内部元素的排列方式和尺寸。

     2. 适用于复杂的布局需求,如自适应、剧中、空间分配等。

     3. 相对于Table布局,Flex布局更加灵活和简单。

   - Table布局:

     1. 基于表格布局模型,适用于展示类似表格的数据。

     2. 布局相对简单,但不太灵活,无法很好地处理自适应需求。

     3. 在一些特定场景下,Table布局可能会有更好的语义化和性能。

 

8、div元素和span元素的区别？

   - div是HTML中的块级元素,span是行内元素。

   - div用于划分页面结构,通常用于布局。span用于对文本进行语义化标记。

   - div通常用于包裹一个区块,span通常用于对文本进行样式修饰。

   - div在默认情况下会独占一行,span则不会。

   - div可以包含块级元素和行内元素,span只能包含行内元素。