前端项目场景相关的面试题，包含验证码、图片存储、登录鉴权、动态路由、组件划分等项目场景实际的面试题

项目场景面试题

如何防止短信验证码被刷

问题场景

添加倒计时和图片滑动验证，避免不必要的资源浪费

1. 发送短信验证码需要费用
2. 发送短信消耗服务器资源

公司的图片、视频、文件资源如何存储的

传统模式

分开存储到数据服务器，托管服务器到云端
缺点：

• 数据服务器压力大
• 需要专人维护服务器
• 存储数据需要成本

云空间

专业的服务器管理团队，提供空间、域名、带宽等
vue项目打包时，有些静态资源图片路径不正常，可以使用云空间
图床：存储项目的图片

项目中的所有数据操作方案

数组

1. for循环遍历
   缺点：当多维数组时，需要多重循环

2. map操作数据

console.log(arr.map((item,index)=>{return item
}))

3. filter
   从数组中筛选出符合条件的数据

console.log(arr.filter((item,index)=>{return item.id == 1
}))

3. reduce
   reduve(prev,cur,index,arr)

• prev是上一次调用回调的返回值，如果是首次执行就是初始值
• cur是当前要处理的元素
• index是当前元素的索引
• arr是数组本身

//求和
//10是prev的初始值
let sum=arr.reduce(function(prev,cur){return prev+cur
},10)
//如果回调函数没有返回值，prev第一次是初始值，第二次就是undefined

json数据

1. for遍历操作
   只能使用for in ，因为json数据没有length属性

2. forEach操作

页面代码在浏览器是如何运行的

cssom

css成为树状结构，提供api操作css
包括model和view
model:样式表规则和模型部分 style/link创建的
view:元素视图相关的api部分 分为：窗口、滚动、布局的API

浏览器加载规则

1. 构造DOM和CSSOM，构建期间如果遇到js，阻塞DOM和cssom，优先执行js
2. 根据dom和cssom构建渲染树，计算每个可见元素的布局并渲染到页面上
3. 如果js操作DOM，浏览器可能对元素进行重绘或重排

web3.0的助记词如何转换为私钥

web3.0

是互联网发展的阶段，主要强调

• 去中心化：数据和程序在分部署网络中运行，同步数据，运行在区块链基础上
• 用户数据主权
• 区块链技术：可以同步数据，每个节点都有一组相同的数据
• 语义网
• 智能化
• 透明性和信任度

助记词生成

需要bip39 包,生成助记词（12个单词），用于方便用户记忆和恢复私钥
bitcore-lib 助记词生成私钥，是长字符串，用于生成数字签名，证明账户所有权

登录鉴权的实现过程

实现方式

1. 角色+自定义权限
   每个菜单对应资源id，创建角色时分配资源数组
   用户可以有多个角色，再加上自定义权限

用户登录后，获取自定义权限和角色权限，取交集，将资源树存储到pinia中，动态添加到router路由中

2. 角色+数据字典
   数据字典：所有权限预先定义好，等待角色匹配
   优点是不用重新请求服务器，缺点是角色权限无法动态修改且字典可能较大
   权限码：[:😗] ‘’

动态路由的使用

路由表中根据用户权限不同，添加不同的路由，登录鉴权时使用
addRoute(route)可以把路由添加到router/index.ts中，然后将路由表存储到pinia中，刷新时router/index读取pinia中的路由
难点在于和后端规定路由数据的格式

项目中组件如何划分

1. 组件分为容器组件和展示组件

• 容器组件：最外层组件，包裹内容、数据抓取
• 展示组件：数据渲染
  导致产生较多的展示组件

2. 根据数据划分

• 有调用接口就是单独的组件，动态
• 没有调用接口，静态
  缺点：主文件的代码较多

遇到bug是如何解决的

1. 配置类型bug

• 加载顺序不对
• 版本问题，可以看下早期的项目的包的版本号

2. 代码bug
   打断点调试、console输出中间结果

3. 样式bug
   检查CSS选择器优先级、浏览器兼容性测试

怎么防止恶意登录

恶意登录分类

猜测密码 – 暴力破解
根据页面路由寻找代码漏洞

防御手段

1. 路由拦截器：未授权token时直接返回登录页面
2. 验证码：图片、文字、滑块验证码
3. 令牌机制：token有狭隘性；可以生成唯一校验码，与后端进行比较
4. 前后端都进行数据过滤
5. 隐私数据传输的时候进行加密，SHA256加盐加密
6. 关闭不需要的端口和服务
7. 频繁登录失败后锁设备

websocket的了解

在单个TCP连接上进行全双工通信，连接建立后，客户端和服务器都可以随时发送数据帧，无需等待对方发送或确认

握手过程

websocket连接开始于普通的HTTP请求，使用特定的Upgrade和Connection头来指示服务器；如果服务器同意升级连接，发送带有101状态码的HTTP响应，并且包含Upgrade:websocket和Connection:Upgrade头

心跳机制

客户端与服务器定期发送心跳消息，接收到心跳包的一方需回应确认消息；如果没有收到确认消息，认为断开连接

数据发生变化，视图没有更新

1. 产生原因：vue2中使用defineProperty进行数据劫持，无法对后续更新的数据进行操作
   解决方案

• 使用this.$set(obj,key,value) 对改变的数据赋值
• 强制更新，this.$forceUpdate()
• 深拷贝

2. vue为了提高性能，会对数据变化进行批量处理patching，在所有变化完成后一次性更新DOM，如果数据变化后立即操作DOM，可能出现问题
   可以使用nextTick方法

大文件切片上传

业务背景

需要上传视频或高清照片等，传统的文件上传（比如element-plus中的upload组件）

实现思想

将一个大文件切分为很多小文件，每个小文件不超过100k，支持断点续传

1. 选择上传文件后，获取上传文件对象大小、类型等信息
2. 创建FileReader对象，arraybuffer创建缓存对象，文件转为二进制流
3. 缓存用md5加密，同时生成最终文件名
4. 根据固定大小(比如100k)切片，得到切片数量；如果切片过多，调整每个片的大小（比如文件大小/100）
5. 为每个切片取名，hash+index
6. 实现断点续传：接口返回当前已传的文件名和切片序号
7. 合并已传的文件，每上传一个就再合并一下

项目中的自定义指令

项目背景

在按钮级的权限中用到了自定义指令，不同权限的用户显示不同按钮

实现

1. main.js中全局引入自定义指令，v-permission，写在directives下
2. 权限规则存放在字典中，用户登录时已经将权限存储在pinia中，在指令中根据权限判断是否显示，如果没有就removeChild移除当前元素

解决长时间保存token的安全问题

token通过pinia存储在localStorage中，请求时携带在header-authorization中

1. 加密存储token，crypto-js md5
2. 使用令牌绑定，token+用户的特定信息（IP或设备）
3. 频繁定期更换token，有效期之后自动更新token
4. 身份验证如提供另一个配置，如手机验证码

渲染较多数据时怎么保证不卡顿

分页

滚动到底部时，再请求下一分页的数据

懒加载

监听滚动事件，向后端再次发送请求

虚拟列表

当后端返回较多数据时，浏览器渲染大量DOM节点会导致卡顿，可以使用虚拟列表，只对可视区域的元素进行渲染

实现原理

固定dom节点数量，通过修改dom节点的内容而不是重新增加dom节点来实现列表的更新

1. 监听页面滚动，获取滚动的高度scrollTop
2. 根据scrollTop计算出当前展示的数据的index
3. 根据当前的数据在列表中的index，对列表进行偏移translate

小程序怎么适配iPhone及Android的底部导航/顶部区域

安全区域：忽略底部、刘海屏等的影响
小程序可以使用uni.getSystemInfo，获取屏幕高度与安全区域
最顶部的容器增加padding-top就行了

提升首页性能

1. uniapp通过uni.preloadPage设置首页预加载
2. 缓存首页的组件
3. image-webpack-loader进行图片压缩
4. 减少重排，尽量用transform代替位置和尺寸的修改
5. 第三方组件可以使用cdn，服务器进行分发

vue和uniapp分别怎么打包和发布的

vue打包

npm run build
需要配置：vite.config.js中设置base为/，路由模式设为hash模式（如果是history模式，需要服务器支持history模式，否则会404）

uniapp打包

前端SEO优化

1. 页面设计扁平化，利于爬虫获取页面信息
2. 重要标签包含关键词，比如h1，alt，title等
3. 标签语义化，能使用p就不用font-weight:bold
4. 页面加载速度尽量快，尽量静态化
5. 网站添加必要的404页面
6. 复杂网站添加站点地图
7. 添加title description keywords

vue是SPA单页面应用，对SEO不友好

• 可以使用SSR服务器端渲染
• 使用nuxt实现静态化
• 使用预渲染的插件

如何解决接口安全

网络传输数据存在安全问题

加密算法

ASE：对称加密
crypto-js包：密钥和偏移量

移动端点击事件300ms延迟

产生原因

移动端浏览器有双击缩放功能，点击之后，在300ms内检测是否再有一次点击，有的话就缩放网页，因此造成单击事件有300ms延迟

解决方案

1. 使用tap事件
2. 在移动端使用fastclick.js库
3. 浏览器设置不能缩放，meta中设置user-scalable=no

移动端点击穿透问题

产生原因

移动端混用click和touch时产生
页面中有B元素在A元素之上，B元素的touchstart事件上注册回调函数隐藏B元素，但是A元素的click事件也被触发了。是因为移动端浏览器事件执行顺序touchstart>touched>click，而且click有300ms延迟

解决方案

1. B元素设置消失动画，事件大于300ms
2. 使用fastclick库

前端如何减少http请求

为什么需要减少

发生http请求后大致有DNS解析、TCP握手、服务器接收请求、解析请求、返回响应等阶段，其中不管返回的数据有多小，都要耗费前面网络连接的时间；同时过于频繁的http请求会增大服务器压力

如何解决

1. 如果是请求脚本和样式，对它们进行合并
2. 实现接口缓存，缓存期间，请求同一个接口（接口地址、请求参数、请求类型一致），将不会重复发起请求，直接使用已缓存的数据。
3. 请求图片资源时使用雪碧图
4. 启用http2，可以在一个TCP连接上并行发送多个http请求

如何优化搜索

1. 增加即使搜索反馈，让用户看到相关的搜索建议
2. 可以使用虚拟列表实现分页或无限滚动功能，让用户方便地查看更多搜索结果
3. 高亮关键词，使用v-html
4. 懒加载，延迟加载搜索结果中的图片or其他资源
5. 异步加载搜索结果，避免阻塞主线程

对前端的定位理解？和后端、UI沟通中遇到过什么问题

• 前端是最接近用户的人，软件最直观的感受反应到前端，交互体验更是前端开发的核心点。开发中要和UI、产品、后端、测试都有频繁密切的沟通
• 和UI遇到的问题就是，UI设计品味比较高，要求前端一比一复刻，但是实际上uniapp现有的组件完全可以满足功能需求，如果自定义组件需要耗费时间与精力；比如UI曾要求在个人名片加个目录，样式比较花哨功能也比较复杂，就展示现有组件的优势、和ui讨论简化设计方案，建议先实现基本功能，后续再优化完善。
• 和后端沟通中深刻体会到，一定要先对业务梳理清楚，约定好数据格式，再讨论技术细节，否则如果在前端接收到数据再进一步处理，一定程度影响页面性能；一定要有理有据的去和后端讨论，不然后端只是觉得增加他工作量
• 团队讨论中，产品和UI可能只是考虑功能的大方向，比如他们提出发布项目之后要进行审核，但是实现的时候就有很多细节，比如审核期间能否编辑、是否会多次审核、是否需要保留审核记录等