今天面試遇到的商城項目相關問題總結

記錄一下面試中被問到的和商城項目相關的高頻問題和我的實際解答，希望能幫到也在準備前端面試的小伙伴！

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. 前后端配合做“樂觀鎖/隊列”，避免超賣