面试遇到的商城项目相关问题总结

今天面试遇到的商城项目相关问题总结

记录一下面试中被问到的和商城项目相关的高频问题和我的实际解答，希望能帮到也在准备前端面试的小伙伴！

1. 商城首页、商品列表页怎么做性能优化？

主要从这几个方面展开：

1）资源加载优化

• 图片优化：

• 使用 WebP/AVIF 格式，减小图片体积
• 利用 <img srcset> 实现多分辨率加载
• 首页 banner、商品图等用懒加载（如 vue-lazyload）
• 图片资源使用 CDN 加速

• 资源压缩

• 第三方组件库按需引入（如 Element Plus + babel-plugin-import）
• 打包资源启用 gzip 或 brotli 压缩

• 异步加载

• 路由组件用 defineAsyncComponent 动态加载
• 首页不重要的区块（如推荐、猜你喜欢）懒加载或延迟渲染

2）页面渲染体验优化

• 骨架屏

• 首页和商品列表页首屏渲染时显示骨架屏，避免白屏
• 可用 组件模拟真实页面结构
• 动态组件加载时也加 loading 状态

• 首屏优先加载

• 首页只加载首屏数据，其他数据延后加载
• 商品列表页只请求第一页，滑动时懒加载更多数据

• 预加载/预渲染

• 首页主 banner、热门商品提前预加载
• 鼠标 hover 商品时预加载详情页组件和图片

3）网络请求优化

• 接口合并

• 首页多个模块（banner、分类、推荐）用聚合接口减少并发请求

• 缓存策略

• 热门分类、banner 用 localStorage 缓存，设置过期时间
• 首页数据首次用缓存，后台静默更新

• 请求控制

• 商品列表分页加载，防止一次请求太多
• 滚动加载/触底加载时加防抖，避免重复请求

4）数据处理和逻辑优化

• 合理拆组件

• 商品项、价格、标签分成独立组件
• 配合 v-memo 或 shallowRef 减少重渲染
• 用 keep-alive 缓存商品列表页

• 避免重复计算

• 分类筛选、价格排序用 computed 缓存
• 复杂计算只在数据变动时执行

2. 商城项目开发中遇到的难题和解决方式

• 页面性能卡顿

  商品列表页商品太多，尤其做活动时，一页上百条直接渲染，页面会非常卡。

解决：
用虚拟滚动（virtual scroll）方案，只渲染可视区内容，比如用vue-virtual-scroller。页面滑动流畅很多，用户体验提升很明显。

• 购物车数据同步问题
  用户在多个页面（甚至多端）操作购物车，可能会出现数据不同步。

解决：

购物车状态全部放后端，每次前端操作都通过接口同步。前端本地做缓存，关键节点（比如结算页）做一次强制同步，保证下单准确性。

• 登录态和 Token 管理
  怎么保证登录安全、Token 续期。

解决：
Token 存在 httpOnly 的 Cookie，防止 XSS。前端快过期时自动调用刷新接口，续期后自动重试接口，用户几乎无感。

• 复杂优惠/限购规则
  前端业务代码容易变复杂、难维护。

解决：
复杂逻辑都放后端统一校验，前端只做基础展示和交互，减少维护压力，也方便后期改规则。

3.商品详情页中“加入购物车”后的交互体验怎么做

1.用户点击按钮时，立刻显示 loading 状态，按钮禁用，防止重复点击

2.请求成功后，toast 或弹窗提示“加入成功”，并更新购物车图标数量（可加动画增强反馈感）

3.请求失败时，给出清晰提示（比如库存不足、未登录等分别处理）

4.做好埋点监控，分析用户行为和接口成功率

4.项目中的购物车数据如何管理

• 用全局状态管理（如 Vuex、Pinia），方便多页面共享和操作

• 商品详情页、购物车页等通过 action 更新 store 状态，页面响应变化

• 用户刷新页面时，通过 localStorage 或后端接口同步数据，防止丢失

• 登录与未登录购物车分开管理，登录后合并本地和服务端购物车

• 优化操作（如加减数量做防抖、批量操作统一处理）

5.登录态如何处理？Token 放哪？怎么续期

• 登录后，拿到 access_token 和 refresh_token

• token 存储位置依场景选 localStorage 或 httpOnly cookie

• 请求时通过拦截器统一带上 token

• Token 失效时用 refresh_token 刷新获取新 token，自动重试原请求

• refresh_token 失效则自动跳转登录页

6.商城项目怎么做多端适配？（PC、H5、小程序等）

• 响应式布局：

PC/H5 统一用 Flex、Grid、媒体查询自适应各类屏幕

小程序使用 rpx/vw 单位、uni-app、Taro 等多端框架开发

• 组件复用：

提取通用业务组件、逻辑层，用条件编译/平台判断处理差异

• 适配兼容：

针对不同端的样式、交互、API 差异做单独适配

7.商城类项目中前端安全问题有哪些？如何防护？

• XSS 攻击防护：

输入、输出做转义，关键页面用白名单过滤

Token、Cookie 建议用 httpOnly

• CSRF 防护：

接口加 CSRF Token 校验

关键操作需二次确认

• 用户信息保护：

前端不在页面渲染敏感数据（如手机号、身份证）

支付类信息绝不落地到前端

8.有没有做过国际化（多语言），怎么做

技术方案：

• 使用 vue-i18n 或类似的国际化插件

• 所有文案、提示语都用 key 配置，支持多语言包动态切换

• 布局适配（如阿拉伯语等 RTL 语言特殊处理）

9.如何实现商品秒杀、抢购等高并发场景？

前端优化：

1. 秒杀按钮加倒计时、节流，优化并发点击体验
2. 参与人数/剩余库存实时轮询刷新

后端配合：

1. 秒杀请求走专门的高并发接口，前端只展示“排队中”、“已抢完”等友好提示
2. 前后端配合做“乐观锁/队列”，避免超卖